小程序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>

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

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

音频播放InnerAudioContext

  • 需要先在 Page【页面级别】/Component【组件级别】定义 InnerAudioContext 【这里这样写可能会有奇怪的问题】
	 const innerAudioContext = wx.createInnerAudioContext();

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

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

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

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

  • 然后在生命周期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,
          // 做些什么...比如初始化音频开始时间、结束时间、进度条等
        })
      })
  • 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({
        // 拖动完进度条这里需要设置一下 进度条的开始时间
      })
    }
  • 然后设置页面卸载得事件
	  innerAudioContext.stop()
      innerAudioContext.destroy()
      _this.setData({
        isPlaying: false,
        // 做些什么...比如初始化音频开始时间、结束时间、进度条等
      })

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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值