微信小程序播放音乐的方法中的两种方法

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

audio组件

这个是最简单的

<audio src="播放链接" id="music"></audio>

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

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

<audio src="播放链接" action="play" id="music"></audio>

或者

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

<audio src="播放链接" action="{{action}}" id="music"></audio>

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

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

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

innerAudioContext

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

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

利用slider实现进度条

<view class="timebox">
  <view>{{passTime}}</view>
  <slider block-size="12" bindchange="sliderChange" value="{{sliderSeek}}"></slider>
  <view>{{musicEndTime}}</view>
</view>

const innerAudioContext = wx.createInnerAudioContext()
 
Page({
 
  data: { 
    musicId: "",
    musicDuration: <any>[],
    musicEndTime: "",
    passTime: "00:00",
    sliderSeek: <number>{},
  },
 
  getMusicEndTime: function () {               //拿到时长
    var duration: number
    innerAudioContext.onCanplay(() => {
      innerAudioContext.duration
      setTimeout(() => {
        duration = innerAudioContext.duration
        this.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: number
    var value = 0
    let that = this
    var timeSeek
    var interval: number | null = null
    innerAudioContext.onPlay(() => {
      innerAudioContext.duration
      setTimeout(function () {            //setTimeout fuction 是个闭包
        duration = innerAudioContext.duration;
        if (interval != null) {                //检查定时器是否重置
          clearInterval(interval)              
          console.log("interval!=null")
        } else {
          interval = setInterval(function () {             //设置定时器
            value += 1
            timeSeek = 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 = 0
              console.log("进度条百分比大于一百")
            }
            that.setData({ sliderSeek: timeSeek })
          }, 1000)
        }
      }, 10)
    })
  },
 
  onLoad() {
    this.getMusicEndTime()
    this.updataSlider()
    let id = this.data.musicId
    innerAudioContext.autoplay = true
    innerAudioContext.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);
    })
}

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