微信小程序之音频播放

 

 项目需求要做一个音频播器的功能，但是要实现退出小程序后还能播放，在微信聊天顶部出现正在播放的什么音频的播放标记。然后在网上找了相关的例子发现大多都是退出后音频会暂停掉，不符合项目需求。查阅微信小程序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   },

基本完成音乐播放功能

 

posted @ 2018-07-26 13:44  夏天的薰风  阅读(13257)  评论(1)  编辑  收藏  举报