山东大学创新实训周报（7）----媒体播放器的接入

一.前情提要

我们已经完成了播放器的视觉效果，下面需要实现播放点击，快退点击，快进点击时音频文件的快退，播放，快进，同时与上面的进度条对应。

二.尝试实现播放器功能

微信提供了innerAudioContext对象实现对音频播放的所有过程，具体步骤如下：

1.在页面onload生命周期函数中初始化innerAudioContext对象

初始化并将其存储以备后续使用，存在页面的data中即可。

2.同样在onload周期函数中声明对播放时进度改变的监听函数

接下来我们需要监听播放时的进度变化，并实时的将进度修改到某个事先定义的变量中，然后将进度条与这个变量绑定，就可以实现进度条的实时跟踪。

观察下面代码，我们令pro作为获取的实时进度，并保存在data的current中，与进度条绑定便可以实现进度条实时跟踪。

audioCtx.onTimeUpdate(()=> { 
  var pro = 
Math.round((this.data.current.audioCtx.currentTime/this.data.current.audioCtx.duration)*100)

  this.setData({  
    current: {  
      ...this.data.current,  
      audioCtx  
    }  
});  

3.实现正常的播放与暂停

通过对我们先前创造的innerAudioContext对象进行操作，可以实现播放功能，但是要提前声明播放内容，暂停类似，同时根据播放暂停状态更改按钮中间的字。

  playAudio: function () {
    const currentAudio = this.data.current.audioCtx;  
    currentAudio.play()
    this.setData({
      "current.played":true,
    });
    setTimeout(() => {
      console.log(currentAudio.paused)
    }, 100)
  },

4.实现循环播放

为了实现循环播放功能，我们需要在onload函数中监听“进度达到100%”这个事件，并完成当进度达到100%时进度归零，来处理音频正常播放完后的细节。

扩充上面的监听函数：

    const audioCtx = wx.createInnerAudioContext();  
    audioCtx.src = this.data.current.src;  
    audioCtx.onTimeUpdate(()=> { 
      var pro = Math.round((this.data.current.audioCtx.currentTime/this.data.current.audioCtx.duration)*100)
      if(pro==100){
        pro = 0
        this.setData({
          "current.played":false
        })
      }
      this.setData({
        "current.progress":pro
      })
      console.log(pro)
    })
    this.setData({  
      current: {  
        ...this.data.current,  
        audioCtx  
      }  
    });