微信小程序播放音乐的方法有很多种，这里总结一下其中两种的优缺点，主要是最近用到了

audio组件

这个是最简单的

其他的就不多说了，说一下现在微信文档里没有的action属性

action属性可以选择组件对应的动作，比如播放或暂停，具体如下

或者

data{action:{ method:'play' }
}

不过这样的话要考虑渲染延时问题，具体在这里：audio组件渲染层错误

audio组件操作简单，但是有些功能不好实现，或者说功能太单调了，比如想要一个自定义的音乐进度条，或者显示音乐时长和已播放时间，那么该怎么得到组件中音乐的时长？又怎么跳到对应的进度？

之前还有个audioContext，可以和组件的id绑定，从而操作组件的行为，但是现在audioContext不维护了，不过还有个innerAudioContext

innerAudioContext

可以在page外定义一个innerAudioContext，这样可以在其他方法中对同一个innerAudioContext进行操作，也不需要重复定义

const innerAudioContext = wx.createInnerAudioContext()
page{onload(){innerAudioContext.autoplay = trueinnerAudioContext.src = '播放链接' var duration = innerAudioContext.duration  //获取总时长innerAudioContext.seek(666)      //跳至对应的时间，单位为秒}}

利用slider实现进度条

{{passTime}}{{musicEndTime}}

const innerAudioContext = wx.createInnerAudioContext()Page({data: { musicId: "",musicDuration: [],musicEndTime: "",passTime: "00:00",sliderSeek: {},},getMusicEndTime: function () {               //拿到时长var duration: numberinnerAudioContext.onCanplay(() => {innerAudioContext.durationsetTimeout(() => {duration = innerAudioContext.durationthis.setData({ musicDuration: duration })var min = parseInt(duration / 60)var sec = parseInt(duration % 60)if (min < 10) {min = `0${min}`                //以00:00的格式保存}if (sec < 10) {sec = `0${sec}`}this.setData({ musicEndTime: `${min}:${sec}` })}, 10);})},updataSlider: function () {               //自动更新进度条var duration: numbervar value = 0let that = thisvar timeSeekvar interval: number | null = nullinnerAudioContext.onPlay(() => {innerAudioContext.durationsetTimeout(function () {            //setTimeout fuction 是个闭包duration = innerAudioContext.duration;if (interval != null) {                //检查定时器是否重置clearInterval(interval)              console.log("interval!=null")} else {interval = setInterval(function () {             //设置定时器value += 1timeSeek = parseInt(100 * value / duration)// console.log(that.data.sliderSeek)var min = parseInt(value / 60)var sec = parseInt(value % 60)if (min < 10) {min = `0${min}`              //改为两位数格式}if (sec < 10) {sec = `0${sec}`              }console.log(min + ":" + sec)that.setData({ passTime: `${min}:${sec}` })if (timeSeek >= 100) {                      //进度条进度达到一百重置clearInterval(interval)timeSeek = 0console.log("进度条百分比大于一百")}that.setData({ sliderSeek: timeSeek })}, 1000)}}, 10)})},onLoad() {this.getMusicEndTime()this.updataSlider()let id = this.data.musicIdinnerAudioContext.autoplay = trueinnerAudioContext.src = 'http://music.163.com/song/media/outer/url?id=' + id},
})

 需要注意的duration得这样拿，不然会拿到0或者undefined

getMusicEndTime: function () {               var duration: number                           innerAudioContext.onCanplay(() => {innerAudioContext.duration                        //先初始化setTimeout(() => {                                //再timeout延时duration = innerAudioContext.duration            //duration才不为0，缺一不可    }, 10);})
}

有时间再更新一下滑动进度条更改歌曲进度的实现