小程序InnerAudioContext设置问题记录

最近有个需求是对接美团得400语音通话，有个播放通话语音得功能，写的三端（pc、企微、小程序），pc和企微用了howler.js来写，小程序用得InnerAudioContext

因为好久没怎么认真写小程序了，本来准备用audio，后来看到不维护了，然后推荐InnerAudioContext

先上效果图吧

进度条使用slider

	<view class="slider-wrap">
      <slider
        bindchange="sliderChange"
        bindchanging="sliderChanging"
        value="{{proValue}}"
        step="1"
        min='{{proMin}}'
        max='{{proMax}}'
        activeColor="#016eec"
        block-size="16"
        block-color="#016eec"
        backgroundColor="#e5f0fd"
      />
    view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

proMin: 0, // 进度条开始
proMax: 0, // 进度条结束
proValue: 100, // 进度条值

sliderChanging () {} // 正在拖动进度条事件
sliderChange () {} // 拖动/点击进度条事件

音频播放InnerAudioContext

• 需要先在 Page【页面级别】/Component【组件级别】定义 InnerAudioContext 【这里这样写可能会有奇怪的问题】

	 const innerAudioContext = wx.createInnerAudioContext();
1

注：我这里的业务是在客户轨迹列表点击播放，然后打开对应那条轨迹的语音通话弹窗

？？？？？？？？？？？？？？？？？？？？？？？？？？？？？
问题： 我这里在页面定义innerAudioContext遇到一个问题，在点击客户轨迹列表点击播放，播放一个语音关了之后，再点击另一个播放，它显示的还是上次播过的那个，也调用销毁的方法了，url也变了，但是播放一直显示之前的，试了好多方法都没效果【个人觉得是这个小程序这个API有问题】

然后我最终的解决方案是：innerAudioContext定义在data里，每次点击播放获取的新的url重新setdata给innerAudioContext，这样就不会有那个问题了

————————————————————————————————————————————————————————

• 然后在生命周期onLoad【页面级别】/lifetimes: { attached(){} }【组件级别】定义InnerAudioContext监听事件

	  innerAudioContext.onPlay(() => {
        console.log('开始播放')
        _this.setData({
          isPlaying: true, // 音频播放状态
          // 做些什么...比如设置音频开始时间、结束时间等
        })
      })
      innerAudioContext.onPause(() => {
        console.log('暂停播放')
        _this.setData({
          isPlaying: false,
          // 做些什么...比如设置音频开始时间、结束时间等
        })
      })
      innerAudioContext.onCanplay(() => {
        console.log('监听音频进入可以播放状态')
        _this.setData({
          // 做些什么...比如设置音频开始时间、结束时间等
        })
      })
      innerAudioContext.onTimeUpdate(() => {
        console.log('监听音频播放进度更新')
        _this.setData({
          // 做些什么...比如设置音频开始时间、结束时间、进度条值等
        })
      })
      innerAudioContext.onEnded(() => {
        console.log('自然播放到结束')
        _this.setData({
          isPlaying: false,
          // 做些什么...比如初始化音频开始时间、结束时间、进度条等
        })
      })
      innerAudioContext.onStop(() => {
        console.log('停止播放')
        _this.setData({
          isPlaying: false,
          // 做些什么...比如初始化音频开始时间、结束时间、进度条等
        })
      })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

• methods里设置音频事件(播放、暂停等)

	onPlay () {
		innerAudioContext.play()
	}
	onStop () {
		innerAudioContext.stop()
	}
	onPause () {
		innerAudioContext.pause()
	}
	// 拖动进度条 
    sliderChange (e) {
      const { innerAudioContext } = this.data
      const { value } = e.detail
      innerAudioContext.seek(value)
      this.setData({
        // 拖动完进度条这里需要设置一下 进度条的开始时间
      })
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• 然后设置页面卸载得事件

	  innerAudioContext.stop()
      innerAudioContext.destroy()
      _this.setData({
        isPlaying: false,
        // 做些什么...比如初始化音频开始时间、结束时间、进度条等
      })
1
2
3
4
5
6

小程序 InnerAudioContext 文档直通车~
我的业务暂时没发现其他bug，目前先记录这么多…