项目需求要做一个音频播器的功能,但是要实现退出小程序后还能播放,在微信聊天顶部出现正在播放的什么音频的播放标记。然后在网上找了相关的例子发现大多都是退出后音频会暂停掉,不符合项目需求。查阅微信小程序API文档,发现可以使用wx.getBackgroundAudioManager()这个api实现退出后还能播放的需求。
上图就是大概界面,点击按钮进行播放,进图条可以拖拽,点击列表播放音频
首先创建全局的音频播放器
const audioManager = wx.getBackgroundAudioManager()
通过wx.request请求调用接口获取音频列表的信息
第二步初始化对象赋值
采用定时器延时赋值,因为请求是异步的方式,有可能会在成功时取不到值
播放与暂停
列表播放
看了下文档,在onEnded中执行下一首的函数
1 audioManager.onEnded(function() { 2 console.log("onEnded"); 3 console.log("当前状态", that.data.audioPalyStatus); 4 let nextTimer = setTimeout(function() { 5 if (that.data.showpause === true) { 6 that.bindTapNext() 7 } 8 }, 2000) 9 })
that.data.showpause这是表示没有点击暂停按钮的状态
1 //自动播放下一首 2 bindTapNext: function() { 3 console.log("播放下一首", 'bindTapNext') 4 let that = this 5 let length = this.data.audiolist.length 6 console.log("当前有多少音频的长度", length); 7 let audioIndexPrev = this.data.index 8 console.log("当前的index", audioIndexPrev); 9 let audioIndexNow = audioIndexPrev 10 if (audioIndexPrev === length - 1) { 11 12 audioIndexNow = 0 13 } else { 14 audioIndexNow = audioIndexPrev + 1 15 console.log("当前audioIndexNow", audioIndexNow); 16 } 17 setTimeout(function() { 18 that.setData({ 19 index: audioIndexNow, 20 audioPalyStatus: 0, 21 // showstart: false, 22 showpause: true, 23 secondplay: false, 24 max: that.data.max, 25 }) 26 that.setData({ 27 currentobj: that.data.audiolist[that.data.index] 28 }) 29 that.setData({ 30 text: that.data.currentobj.voice_dec, 31 }) 32 console.log("再次的index", that.data.index); 33 console.log("下一首的吗", that.data.currentobj); 34 console.log("第0首", that.data.audiolist[0], '第一首', that.data.audiolist[1]); 35 if (that.data.showpause == true) { 36 // that.start() 37 that.setData({ 38 secondplay: false, 39 }) 40 audioManager.src = that.data.currentobj.voicefile 41 audioManager.title = that.data.currentobj.voice_name 42 audioManager.coverImgUrl = that.data.currentobj.urlimage 43 // max = that.data.currentobj.voice_times 44 } 45 }, 1000) 46 47 },
基本完成音乐播放功能