微信小程序开发者微信小程序 网站

微信小程序音频的实现案例

2018-09-26  本文已影响4人  王月_92f2

需求:

  1. 倍速播放音频【结果:x】
  2. 记录播放的时间
  3. 快进后退【结果:获取当前播放到的时间+跳转到指定位置】

额外衍生前端需要做的:【因为不能使用audio组件实现效果】

  1. 进度条自定义【结果:当前播放到的时间/总时长】

调研:

官方文档:

一个组件:
<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这个方法。

综上,调研结果是除了倍速不可以,其他的都可以实现

上一篇下一篇

猜你喜欢

热点阅读