最近有个需求是对接美团得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
重新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,
// 做些什么...比如初始化音频开始时间、结束时间、进度条等
})
})
- 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,目前先记录这么多…