微信小程序播放音乐的方法中的两种方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序播放音乐的方法中的两种方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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);
    })
}

有时间再更新一下滑动进度条更改歌曲进度的实现文章来源地址https://www.toymoban.com/news/detail-458580.html

到了这里，关于微信小程序播放音乐的方法中的两种方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！