微信小程序播放音樂(lè)的方法有很多種，這里總結(jié)一下其中兩種的優(yōu)缺點(diǎn)，主要是最近用到了

audio組件

這個(gè)是最簡(jiǎn)單的

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

其他的就不多說(shuō)了，說(shuō)一下現(xiàn)在微信文檔里沒(méi)有的action屬性

action屬性可以選擇組件對(duì)應(yīng)的動(dòng)作，比如播放或暫停，具體如下

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

或者

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

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

不過(guò)這樣的話要考慮渲染延時(shí)問(wèn)題，具體在這里：audio組件渲染層錯(cuò)誤

audio組件操作簡(jiǎn)單，但是有些功能不好實(shí)現(xiàn)，或者說(shuō)功能太單調(diào)了，比如想要一個(gè)自定義的音樂(lè)進(jìn)度條，或者顯示音樂(lè)時(shí)長(zhǎng)和已播放時(shí)間，那么該怎么得到組件中音樂(lè)的時(shí)長(zhǎng)？又怎么跳到對(duì)應(yīng)的進(jìn)度？

之前還有個(gè)audioContext，可以和組件的id綁定，從而操作組件的行為，但是現(xiàn)在audioContext不維護(hù)了，不過(guò)還有個(gè)innerAudioContext

innerAudioContext

可以在page外定義一個(gè)innerAudioContext，這樣可以在其他方法中對(duì)同一個(gè)innerAudioContext進(jìn)行操作，也不需要重復(fù)定義

const innerAudioContext = wx.createInnerAudioContext()
page{

    onload(){
    innerAudioContext.autoplay = true
    innerAudioContext.src = '播放鏈接' 
    var duration = innerAudioContext.duration  //獲取總時(shí)長(zhǎng)
    innerAudioContext.seek(666)      //跳至對(duì)應(yīng)的時(shí)間，單位為秒
    }

}

利用slider實(shí)現(xiàn)進(jìn)度條

<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 () {               //拿到時(shí)長(zhǎng)
    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 () {               //自動(dòng)更新進(jìn)度條
    var duration: number
    var value = 0
    let that = this
    var timeSeek
    var interval: number | null = null
    innerAudioContext.onPlay(() => {
      innerAudioContext.duration
      setTimeout(function () {            //setTimeout fuction 是個(gè)閉包
        duration = innerAudioContext.duration;
        if (interval != null) {                //檢查定時(shí)器是否重置
          clearInterval(interval)              
          console.log("interval!=null")
        } else {
          interval = setInterval(function () {             //設(shè)置定時(shí)器
            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}`              //改為兩位數(shù)格式
            }
            if (sec < 10) {
              sec = `0${sec}`              
            }
            console.log(min + ":" + sec)
            that.setData({ passTime: `${min}:${sec}` })
            if (timeSeek >= 100) {                      //進(jìn)度條進(jìn)度達(dá)到一百重置
              clearInterval(interval)
              timeSeek = 0
              console.log("進(jìn)度條百分比大于一百")
            }
            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得這樣拿，不然會(huì)拿到0或者undefined

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

有時(shí)間再更新一下滑動(dòng)進(jìn)度條更改歌曲進(jìn)度的實(shí)現(xiàn)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-458580.html

到了這里，關(guān)于微信小程序播放音樂(lè)的方法中的兩種方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！