山东大学创新实训周报（8）----播放器快进和快退的实现

一.前情提要

我们已经实现了播放与暂停功能，接下来实现快进与快退功能，同时完善用户体验，处理使用时可能出现的异常，由于还未与后端对接，我们的所有音频使用菊花台代替。

二.快进和快退的实现

真正实现快进快退时发现较为复杂，需要获取进度，增加进度，以及快进时进度超过100%和快退时进度小于0%的处理：

propp:function(){
    const current = this.data.current;  
    if (current.audioCtx && current.src) {  
      if (current.audioCtx.paused) {  
        current.audioCtx.play();  
      }  
      // 快进5秒  
      var newProgress = current.progress + 5;  
      if (newProgress < 100) {  
        current.audioCtx.currentTime = newProgress/100*current.audioCtx.duration;  
      } else {  
        // 如果快进后时长大于100，则重置为0或进行其他处理  
        newProgress=0
        current.audioCtx.currentTime = newProgress;  
      }  
      console.log(newProgress)

      this.setData({  
        current: {  
          ...current,  
          progress: newProgress,
          played:true
        }  
      });  
    }  
  },

但是由于微信小程序提供的媒体播放组件有bug，我发现当进度快进时，虽然可以成功快进，也可以正常播放，但是之前设置的进度监听就无效了，wx开放社区中对这个问题有所记录，官方至今未解决，好在网友提供了偏方，解决了这个问题，具体解决办法在下面陈述。

p.s. 开发社区对上述问题的讨论：微信开放社区

三.问题记录与解决

1.解决InnerAudioContext.onTimeUpdate再次调用不触发问题

在每次更改进度后都调用下面的函数便可解决问题。

      setTimeout(() => {
        console.log(current.audioCtx.paused)
      }, 100)

修改后的快进函数：

  propp:function(){
    const current = this.data.current;  
    if (current.audioCtx && current.src) {  
      if (current.audioCtx.paused) {  
        current.audioCtx.play();  
      }  
      // 快进5秒  
      var newProgress = current.progress + 5;  
      if (newProgress < 100) {  
        current.audioCtx.currentTime = newProgress/100*current.audioCtx.duration;  
      } else {  
        // 如果快退后时长小于零，则重置为0或进行其他处理  
        newProgress=0
        current.audioCtx.currentTime = newProgress;  
      }  
      console.log(newProgress)
      setTimeout(() => {
        console.log(current.audioCtx.paused)
      }, 100)

      this.setData({  
        current: {  
          ...current,  
          progress: newProgress,
          played:true
        }  
      });  
    }  
  },

2.用户体验优化--关闭弹窗，关闭地图，开启导航后自动暂停播放

这个部分的实现较为简单，但是可以提高用户体验，只需要在上述三个动作的函数中调用音频暂停函数就可以实现。