微信小程序中音频播放

如何在小程序中实现音频播放

需要注意几点

由于现在官方不再维护 audio 组件，所以音频播放尽可能采取 wx.createInnerAudioContext() 接口（若需要在后台播放，则采用 wx.getBackgroundAudioManager() ）
音频播放，只有在播放时才可以获取到音频长度（参考了多个带音频的小程序 qq音乐，百度网盘等，都是采取自动播放的方式，以获取总时长）
由于 wx.createInnerAudioContext()和wx.getBackgroundAudioManager()接口都差不多，（简单来说，前者只会在当前页面播放，后者可在离开播放页面甚至返回微信界面（需要配置下），继续播放音乐），这里以背景音乐为例子
wx.getBackgroundAudioManager()这个api返回的是一个对象（BackgroundAudioManager），同时需要注意背景音频播放是获取的 全局唯一的背景音频管理器，也就是说，你不销毁或者停止，他会一直播放（离开微信和配置了后台播放除外）
BackgroundAudioManager在这个对象上有一些方法，比如：暂停，设置地址，监听播放状态（播放，停止，暂停，错误。。。。等）

具体操作如下

我使用的是uni-app,但原生小程序也是一样的，调整下生命周期就可以了

获取全局唯一的背景音频管理器

const InnerAudioContext = uni.getBackgroundAudioManager();

具体代码如下（此处是封装为播放组件，可直接复制）

<template><view class=""><view class="audio-wrapper"><view class="audio-number">{{forNowTime}}</view><slider class="audio-slider" :activeColor="color" block-size="16" :value="current" :max="duration" @changing="seek=true,current=$event.detail.value"@change="change"></slider><!-- 时长 --><view class="audio-number">{{forAllTime}}</view></view><view class="audio-control-wrapper" :style="{color:color}"><!-- 随机播放 --><view class="audio-control audio-more iconfont music_icon_random" hover-class="btn-bg-m"></view><!-- 上一首 --><view class="audio-control  iconfont music_icon_previous" hover-class="btn-bg-m" v-if="control"  @click="prev"></view><!-- 播放 --><view class="audio-control audio-control-switch iconfont" hover-class="btn-bg"  :class="{'music_icon_play':paused,'music_icon_pause':!paused}"  @click="operation"></view><!-- 下一首 --><view class="audio-control  iconfont music_icon_next" v-if="control" hover-class="btn-bg-m"  @click="next"></view><!-- 列表 --><view class="audio-control audio-more  iconfont music_icon_list" hover-class="btn-bg-m" ></view></view></view>
</template><script>const InnerAudioContext = uni.getBackgroundAudioManager(); //createInnerAudioContextexport default {data() {return {forNowTime:'00:00', //当前播放时间 4:30 格式forAllTime:'', //总时长 格式化duration:0,//总时间 秒current:0, //slider当前进度seek: false, //是否处于拖动状态paused: true, //是否处于暂停状态}},props: {audioSrc: {              //音频链接type:String,default:''},audioName:{         //歌曲名称type:String,default:''},control: {        //是否需要上一曲/下一曲按钮type:Boolean,default:true}, nextAudio:{        //播放完成后是否继续播放下一首，需定义@next事件type:Boolean,default:false,},color: {        //主色调type:String,default:'#5189FF'} },created() {// 是否遵循系统静音开关InnerAudioContext.obeyMuteSwitch = false// 监听播放InnerAudioContext.onPlay(()=>{this.paused=falseconsole.log('播放中。。。')})// 监听暂停InnerAudioContext.onPause(()=>{this.paused=true})// 监听播放结束InnerAudioContext.onEnded(()=>{// 是否需要 自动播放下一首if(this.nextAudio) {this.next()}else{// 暂停this.paused=true}})// 监听 进度更新InnerAudioContext.onTimeUpdate(()=>{// 获取总进度this.duration = InnerAudioContext.duration// 当前进度 非拖动时if (!this.seek) {this.current= InnerAudioContext.currentTime}})//监听 进度更改完成InnerAudioContext.onSeeked(() => {this.seek = false})// 音频播放失败this.errMsg()},mounted(){},beforeDestroy(){// InnerAudioContext.pause()},computed:{},watch: {// 音频地址audioSrc(value){if(InnerAudioContext.src==value)returnInnerAudioContext.src= valuethis.current=0// 设置自动播放 以获取总时长InnerAudioContext.autoplay=true},// 音频名字audioName(value,o){InnerAudioContext.title =value},// 音频总时长--格式化duration(value){this.forAllTime = this.format(value)},// 当前播放位置current(now){this.forNowTime = this.format(now)if(!InnerAudioContext.paused){this.paused=false}}},methods: {//返回prev事件prev() {this.$emit('prev')},//返回next事件next() {this.$emit('next')},//时间格式化format(num) {return '0'.repeat(2 - String(Math.floor(num / 60)).length) + Math.floor(num / 60) + ':' + '0'.repeat(2 - String(Math.floor(num % 60)).length) + Math.floor(num % 60)},//播放/暂停操作operation() {// 停止播放状态InnerAudioContext.paused?InnerAudioContext.play():InnerAudioContext.pause()},//快进change(e) {InnerAudioContext.seek(e.detail.value)},// 播放失败errMsg(){InnerAudioContext.onError((res)=>{let ErrMsg=res.errMsgwx.showModal({title: '播放失败',content:ErrMsg,showCancel:false,success: function(res) {}})})}},}
</script><style>.audio-wrapper {display: flex;align-items: center;padding-bottom: 90rpx;}.audio-number {font-size: 24upx;line-height: 1;color: #333;}.audio-slider {flex: 1;margin: 0 30upx;}.audio-control-wrapper {margin-top: 20upx;display: flex;align-items: center;justify-content: space-around;}.audio-control {font-size: 32rpx;width:80rpx;height:80rpx;border:1rpx solid rgba(168,196,255,1);border-radius:50%;text-align: center;line-height: 80rpx;}.audio-more{border:none;font-size: 32rpx;border-radius: 50%;}.audio-control-switch {color: #FFFFFF;font-size: 42rpx;margin: 0 60rpx;width:120rpx;height:120rpx;line-height: 120rpx;background:rgba(81,137,255,1);border-radius:50%;border: none;}.audioLoading {animation: loading 2s;animation-iteration-count: infinite;animation-timing-function: linear;}@keyframes loading {to {transform: rotate(360deg);}}
</style>

效果图如下

微信小程序中音频播放相关推荐

微信小程序-音频播放-wx.createInnerAudioContext() 每次都是重复播放同一条录音
前言在调试微信小程序音频播放时,刚开始我也是直接复制官方文档的实例: const innerAudioContext = wx.createInnerAudioContext() innerAudi ...
微信小程序中播放海康萤石云HLS '.m3u8'视频 video标签
微信小程序中播放海康萤石云HLS '.m3u8'视频 video标签前言萤石云开放平台微信开发者工具前言因为项目需要在微信小程序上展示实时视频流信息,以下内容是我将萤石云平台官方文档和自己实 ...
微信小程序音乐播放器
趁周末做一个简单的微信小程序音乐播放器,源码已留. 播放列表首页wxml <swiper class="swiper" indicator-dots='{{swipterSe ...
微信小程序滚动播放内容
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
微信小程序如何播放腾讯视频?
popper小P 微信小程序如何播放腾讯视频? 1.背景因为当时需要做视频播放,后台存放视频文件又不现实.所以,做了一个能解析腾讯视频地址的并播放视频的小程序. 2.介绍小程序里的解析腾讯视频地址 ...
微信小程序-音频播放每次都是重复播放同一条录音
前言在调试微信小程序音频播放时,刚开始我也是直接复制官方文档的实例: const innerAudioContext = wx.createInnerAudioContext() innerAudi ...
IOS端微信小程序API播放视频无效，应该这样做
微信小程序 IOS端通过API播放视频无效需求微信小程序项目中需求点击"播放"按钮,直接开始播放视频问题直接调用微信API操作视频播放,Adroid端运行一切正常,IOS端 ...
微信小程序音乐播放控件，监听播放事件，音乐播放的基本实现
下面我将会为大家初步讲解利用微信小程序的音乐控件制作音乐播放器,以及会遇到的一些问题,最后会附上源码包喔! 图片以及音乐都必须使用网络链接体播放器播放之后闪退,是因为音乐的链接失效了所以闪退监 ...
微信小程序——音乐播放器
音乐播放器前言主页三个标签页推荐页播放器页播放列表页逻辑前言使用swiper组件完成三个标签页的切换,并且实现轮播图.scroll-view组件完成滚动视图,使用微信小程序提供的音乐 ...

微信小程序中音频播放

如何在小程序中实现音频播放

需要注意几点

具体操作如下

微信小程序中音频播放相关推荐

最新文章

热门文章