需求:
- 倍速播放音频【结果:x】
- 记录播放的时间
- 快进后退【结果:获取当前播放到的时间+跳转到指定位置】
额外衍生前端需要做的:【因为不能使用audio组件实现效果】
- 进度条自定义【结果:当前播放到的时间/总时长】
调研:
官方文档:
一个组件:
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio>
有一个能力seek
叫做跳转到指定位置,所以快进/后退是可以实现的。
//从头开始播放/跳转到后边的某个位置/跳转到前边的某个位置 单位是s
audioStart () {
this.audioCtx.seek(0)
}
现在不推荐使用的audioContext 是通过 id 跟一个 <audio/> 组件绑定,操作对应的 <audio/> 组件。
现在推荐使用的是一个叫做InnerAudioContext
的对象,它也拥有很多可以操作的属性和方法。而且不需要和audio那个组件绑定。所以样式就可以随意实现了,一切样式。当然要实现的功能另说。
停止播放有两种情况:暂时停止==pause和永久的停止==stop,pause后使用play,那么会接着上次停止的地方继续播放;stop后play,会直接从头播放。
InnerAudioContext
这个对象也有seek这个跳转到任意s的方法。用起来是InnerAudioContext.seek(15)
.跳转到15s处的播放位置。根据这个+使用currentTime就可以获取到当前播放的位置,然后根据当前的时间+快进的距离=快进到的位置
,就可以实现快进/后退了。
比如这个代码:
innerAudioContext.onTimeUpdate(function(){
let cur = innerAudioContext.currentTime;
let dur = innerAudioContext.duration;
console.log("currentTime=" + cur +";duration="+dur)
})
通过这里的currentTime与duration的比值可以控制进度条的显示。
作为一个写出来用户友好的组件,我需要加上弱网下的友好提示:
innerAudioContext.onWaiting(()=>{
wx.showLoading()
})
innerAudioContext.onCanplay(() => {
wx.hideLoading()
})
eee...待定,因为无法测试出来,不过字面上的意思确实是这样使用,告诉用户正在加载中,然后能播放了就隐藏掉加载中这个提醒。
有人问,音频怎么引用,可以下载下来之后放到小程序的文件夹里,这样就能直接用了。线上的链接是怎么来的呢?还不知。
obeyMuteSwitch
需要设为false,即使系统静音也要能播放音频。现在的功能都这么流氓了。
网上有人分享倍速可以实现,然而实践证明无效,开发者工具和真机都无效,不明白为什么还要分享,附上链接
不只一个人这么分享过,看来微信在调整自己的功能呢。目前不支持。setPlaybackRate
已经么有了。
然而官方说自己从来没有过倍速播放的功能。
现在是一个各行各业都在产生迅速变化的时代。
记录播放的时间也么有问题,因为有update这个方法。
综上,调研结果是除了倍速不可以,其他的都可以实现