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

需求:

  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这个方法。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342