Zwei Methoden in der Methode zum Abspielen von Musik im WeChat-Applet

Es gibt viele Möglichkeiten, Musik im WeChat-Applet abzuspielen. Hier ist eine Zusammenfassung der Vor- und Nachteile von zwei davon, hauptsächlich weil sie kürzlich verwendet wurden.

Audio-Komponente

das ist am einfachsten

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

Ich werde nicht viel über die anderen sagen, lassen Sie uns über das Aktionsattribut sprechen, das jetzt nicht im WeChat-Dokument enthalten ist

Das Aktionsattribut kann die entsprechende Aktion der Komponente, wie z. B. Abspielen oder Anhalten, wie folgt auswählen

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

oder

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

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

In diesem Fall sollte jedoch das Rendering-Verzögerungsproblem berücksichtigt werden, insbesondere hier: Audiokomponenten-Rendering-Layer-Fehler

Die Audiokomponente ist einfach zu bedienen, aber einige Funktionen sind schwierig umzusetzen oder die Funktionen sind zu eintönig, zum Beispiel, wenn Sie einen benutzerdefinierten Musikfortschrittsbalken wünschen oder die Musikdauer und die verstrichene Zeit anzeigen möchten, wie Sie die Dauer erhalten die Musik in der Komponente? Wie springe ich zum entsprechenden Fortschritt?

Es gab zuvor einen audioContext, der an die ID der Komponente gebunden werden kann, um das Verhalten der Komponente zu manipulieren, aber jetzt wird der audioContext nicht beibehalten, aber es gibt auch einen innerAudioContext

innerAudioContext

Sie können einen innerAudioContext außerhalb der Seite definieren, sodass Sie denselben innerAudioContext in anderen Methoden bearbeiten können, ohne die Definition zu wiederholen

const innerAudioContext = wx.createInnerAudioContext()
page{

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

}

Verwenden Sie den Schieberegler, um den Fortschrittsbalken zu implementieren

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

 Beachten Sie, dass die Dauer so genommen werden muss, sonst wird sie 0 oder undefiniert

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

Wenn Sie Zeit haben, aktualisieren Sie die Implementierung, um den Fortschritt des Songs zu ändern, indem Sie den Fortschrittsbalken verschieben