亚博资讯站一一为您提供时下热门前沿动态

查看更多
首页> 微信小程序资讯> 微信小程序音频功能开发实(cai)践(keng)

微信小程序音频功能开发实(cai)践(keng)

阅读:723微信小程序

1. 需求分析与开发方案

1.1 需求简介

最近产品给我们提出了“在小程序中播放音频课程”的需求,主要是有四个要点:

  • 课程管理:进入某个课程的播放页面,获取全部音频列表,但暂时不播放。
  • 音频管理:支持在播放页面,点击任意音频进行播放;可自动播放下一首。比如这样
小程序
  • 进度控件:支持拖动修改进度/上下首/暂停/播放,就像下面这样。
小程序
  • 全局播放:当用户暂时离开小程序时,在微信聊天列表页顶部展示背景音频。

就像这样子。

小程序

1.2 开发分析

好了,问题来了,怎么实现上面这几个需求呢?

我陷入了沉思…………

第一条“课程管理”不难,全局维护一个数组就好了。

第二条“音频管理”看上去是个麻烦,一开始我想到了小程序提供的audio控件。

但是随即我就否决掉了这种想法,理由主要有两点:

  • 微信官方提供的audio控件有默认的样式,如下图,这与设计稿的需求不相符。
小程序
  • 经过在微信官方提供的小程序实例Demo中亲测,如果使用audio控件,那么当我退出当前页面的时候,音频会消失,这没有办法满足PM要求的“全局播放”

因此,我决定采用微信提供的backgroundAudioManager。

1.2.1 backgroundAudioManager简介

按官方文档的说法,backgroundAudioManager是:全局唯一的背景音频管理器

下面列出它的部分重要属性和重要的方法:

属性:

  • duration:当前音频长度,可以用来初始化播放控件的值。
  • currentTime:当前播放的位置,可以用来更新播放控件的进度值
  • paused:false为播放,true表示停止/暂停
  • src:音频数据源,注意设置src的时候会自动播放
  • title:音频标题(刚刚在微信聊天列表页顶部展示的音频title“为什么秋冬季节孩子易生病”,就是通过这里设置的)

方法:

  • play/pause/stop/seek:可以进行音频常见的播放控制,其中seek是跳转到特定播放进度的方法
  • onPlay/onPause/onStop/onEnded:响应特定事件,其中onStop是主动停止,onEnded是自动播放完毕(这可用于实现“连续播放”)
  • onTimeUpdate:背景音频播放进度更新事件,可与前面的currentTime属性结合在一起,去更新控件的值。
  • onWaiting/onCanplay:音频通常不会立刻就能播放,这两个方法可以在音频加载的时候为用户做一些提示。

更多的消息请查看它的官方文档。

1.2.2 播放控件

第三条“播放控件”也不算太难,播放/暂停/上下首都用小图片就可以了。

但是难点在于播放进度条的模拟,前面已经说到audio控件的样式是不符合需求的。

那么我决定采用slider来模拟,应该也可以搞定。

第四条,前面已经说了,用backgroundAudioManager实现“全局播放”。

1.2.3 开发方案确定

好了,需求分析得差不多了,我们要开发这个需求,需要三个对象,

  • 课程管理对象,负责维护课程信息和课程音频列表,不负责播放
小程序
  • 音频管理对象,即backgroundAudioManager,负责管理音频的播放,其中只有changeAudio方法具有修改音频的权限
小程序
  • 播放控件。
小程序

有了这几个对象,课程管理/音频管理/进度控件/全局播放就都可以搞定啦。

不过,话虽然这么说,但是实际实现需求总是会碰到各种各样的问题。

2. 功能实现

因为需求实在太多了,我没法一一列出,在这里就介绍一些需要技巧的需求

2.1 Slider控件模拟进度

前面提到,控件大概长这样


小程序

所以得用slider来模拟,但是模拟并不容易。哈?你说为什么?我慢慢告诉你。

2.1.1 需求一:控件随着音频播放,自动更新

PM的需求是:控件随着音频播放,自动更新进度,左值随着进度更新,右值为音频总长度。

但是小程序自带的slider不支持展示左右值,我们只能自己模拟。

<!-- ?音频进度控件 --><view class="course-control-process"> ???// 左值展示,currentProcess ???<text class="current-process">{{currentProcess}}</text> ???// 进度条 ???<slider ?????bindchange="hanleSliderChange" ??????????????// 响应拖动事件 ?????bindtouchstart="handleSliderMoveStart" ?????bindtouchend="handleSliderMoveEnd" ?????min="0" ?????max="{{sliderMax}}" ?????activeColor="#8f7df0" ?????value="{{sliderValue}}"/> ???// 右值展示,totalProcess ???<text class="total-process">{{totalProcess}}</text></view> currentProcess为左值、totalProcess为右值、sliderMax控件最大值、sliderValue为当前控件的value。

那么,怎么更新这些数值呢?前面提到backgroundAudioManager有一个onTimeUpdate方法,在这里面去更新进度值就可以了。

// ?formatAudioProcess函数我就不放了,就是把时间格式化成00:15这样就行了onTimeUpdate() { ?// 省略一些判断代码 ?self.page.setData({ ???currentProcess: formatAudioProcess(globalBgAudioManager.currentTime), ???sliderValue: Math.floor(globalBgAudioManager.currentTime) ?});}, ?

这里有一件值得注意的是,就是在进入同一个课程的播放页时,由于原page很可能已经销毁(比如你执行navigateTo),因此需要在初始化的时候更新原有的data值,比如当前的播放进度currentProcess,这就要从当前的backgroundAudioManager里去拿。

## 检查是否同一个课程,如果是的话,更新进度 if (id !== globalCourseAudioListManager.getCurrentCourseInfo().id)## 更新方法 updateControlsInOldAudio() { ???// 获取当前音频 ???const currentAudio = globalCourseAudioListManager.getCurrentAudio(); ???// 更新进度和控件内容 ???this.setData({ ?????currentProcess: formatAudioProcess(globalBgAudioManager.currentTime), ?????sliderValue: formatAudioProcess(globalBgAudioManager.currentTime), ?????sliderMax: Math.floor(currentAudio.duration / 1000) - 1 || 0, ?????totalProcess: formatAudioProcess(currentAudio.duration / 1000 || 0), ?????hasNextAudio: !globalCourseAudioListManager.isRightEdge() && this.data.hasBuy, ?????hasPrevAudio: !globalCourseAudioListManager.isLeftEdge() && this.data.hasBuy, ?????paused: globalBgAudioManager.paused, ?????currentPlayingAudioId: currentAudio.audio_id, ?????courseChapterTitle: currentAudio.title ???}); ?}, ?

2.1.2 需求二:拖动进度条,自动跳转到特定位置

注意到前面slider控件具有bindchange="hanleSliderChange",那么我们就可以拿到value值,然后去更新音频了

hanleSliderChange(e) { ???const position = e.detail.value; ???this.seekCurrentAudio(position); ?}, ?// 拖动进度条控件 ?seekCurrentAudio(position) { ???// 更新进度条 ???const page = this; ???// 音频控制跳转 ???// 这里有一个诡异bug:seek在暂停状态下无法改变currentTime,需要先play后pause ???const pauseStatusWhenSlide = globalBgAudioManager.paused; ???if (pauseStatusWhenSlide) { ?????globalBgAudioManager.play(); ???} ???globalBgAudioManager.seek({ ?????position: Math.floor(position), ?????success: () => { ???????page.setData({ ?????????currentProcess: formatAudioProcess(position), ?????????sliderValue: Math.floor(position) ???????}); ???????if (pauseStatusWhenSlide) { ?????????globalBgAudioManager.pause(); ???????} ???????console.log(`The process of the audio is now in ${globalBgAudioManager.currentTime}s`); ?????} ???}); ?}, ?

看上去有一点比较奇怪是不是?backgroundAudioManager的seek方法是没有success回调的,这里被我改了。

seek(options) { ???wx.seekBackgroundAudio(options); ?// 这样实现,就可以配置success回调了} ?

但是,“onTimeUpdate事件触发slider控件更新”和“手动拖动触发slider更新”是有冲突的,假如说两个函数都要改slider,听谁的?

但是,可以利用监测touchstart和touchend事件,来检查是否在滑动。如果在滑动,禁止onTimeUpdate去修改slider控件更新就行了。

因此,我先设定一个变量,来标记是否正在滑动

handleSliderMoveStart() { ???this.setData({ ?????isMovingSlider: true ???}); ?}, ?handleSliderMoveEnd() { ???this.setData({ ?????isMovingSlider: false ???}); ?}, 在滑动期间禁止更新进度条即可onTimeUpdate() { ???// 在move的时候,不要更新进度条控件 ???if (!self.page.data.isMovingSlider) { ?????self.page.setData({ ???????currentProcess: formatAudioProcess(globalBgAudioManager.currentTime), ???????sliderValue: Math.floor(globalBgAudioManager.currentTime) ?????}); ???} ???// 其他省略}, 2.2 backgroundAudioManager相关需求

在开始下一个需求介绍之前,不知道各位有没有疑问:

我在哪儿设置的onTimeupdate方法?

OK,我来介绍下。

首先,全局获取

this.backgroundAudioManager = wx.getBackgroundAudioManager(); 

其次,在play/index.js中引入backgroundAudioManager

let globalBgAudioManager = app.backgroundAudioManager; 

在适当的时候,比如我就是onLoad,扩展globalBgAudioManager对象。——这样我就把具体的功能放进了具体的page中,不同的page中针对backgroundAudioManager可以有不同的实现。

this.initBgAudioListManager(); ?

接下来我们看看这个拓展到底干了什么。

initBgAudioListManager() { ???// options中的函数在执行的时候,this指向函数本身(亲测),因此这里需要保存Page对应的this。 ???const page = this; ???const self = globalBgAudioManager; ???const options = { ???????// options在后面会介绍 ???}; ???// decorateBgAudioListManager函数,直接修改globalBgAudioManager对象,从而实现方法的拓展 ???globalBgAudioManager = decorateBgAudioListManager(globalBgAudioManager, options); ?

好了,怎么引入的现在已经说完了,接下来就讲需求,也就是介绍options里面干了什么。

其实options里面都是backgroundAudioManager已经有的方法,具体可以参考文档。我只是做了改写

2.2.1 需求三:绕过onCanPlay,提醒用户音频在加载

众所周知,音频需要加载一段时间才可以播放,为此小程序的全局播放对象,即backgroundAudioManager提供了onWaiting和onCanplay,看上去天生就是为了音频加载的交互实现的。

但不知道为什么,onCanplay无!法!触!发!和社区提了这个问题也没有人鸟我哎……心痛。

算了算了,他强由他强,我绕我的墙。。。

首先,在options中,改写onWaiting:先提示用户正在加载当中,isWaiting进行标记(“看!音频在Waiting!”)

const options = { ???onWaiting() { ???????wx.showLoading({ ?????????title: '音频加载中…' ???????}); ???????globalBgAudioManager.isWaiting = true; ???},} 

然后接下来,在时间进度发生更新的时候(这相当于开始播放了),把Loading窗口关了就行。同样是在options中去改写onTimeUpdate。

onTimeUpdate() { ???if (self.isWaiting) { ?????self.isWaiting = false; ?????setTimeout(() => { ???????wx.hideLoading(); ?????}, 300); ?????// 设置300ms是为了避免某些音频加载过快而导致Loading效果一闪而过对用户造成糟糕的体验 ???} ???// 以下代码省略}, ?

2.2.2 需求四:点击某个音频,实现播放

这个需求的麻烦之处,在于需要检查点击的音频是什么,比如假定你在播放音频A,你重新点击A,那当然不用重播了啊。

以及iOS版本的小程序和阿里云服务器似乎有点过节,下面就会看到。

在pages/play/index内部,先响应点击事件

## pages/play/index ?outlineOperation(e) { ???// 获取音频地址 ???const courseAudio = e.currentTarget.dataset.outline || {}; ???const targetAudioId = courseAudio.audio_id; ???// 中间省略一系列合法性检查。 ???this.playTargetAudio(targetAudioId); ?}, ?

然后执行播放相关操作,这个globalCourseAudioListManager虽然前面提到过,但是一会儿再具体介绍,它做了什么就直接看注释好了

## pages/play/index ?/** ??* 点击/自动播放 目标音频 ??* @param {*Number} targetAudioId ??* - 检查是否点击到同一个音频 ??* - 检查是否完全播放完毕 ??* - 若未播放完毕,或者点击的不是同一个音频,先暂停当前音频 ??* - 执行音频播放操作 ??*/ ?playTargetAudio(targetAudioId) { ???const currentAudio = globalCourseAudioListManager.getCurrentAudio(); ???// 点击未停止的原音频的话,没必要响应 ???if (targetAudioId === currentAudio.audio_id && !!globalBgAudioManager.currentTime) { ?????return false; ???} else { ?????this.getAudioSrc(targetAudioId).then(() => { ???????// 若未暂停,则先暂停 ???????if (!globalBgAudioManager.paused) { ?????????globalBgAudioManager.pause(); ???????} ???????// 全局切换当前播放的音频index(此时还没有开始播放) ???????globalCourseAudioListManager.changeCurrentAudioById(targetAudioId); ???????// 更新当前控件状态,比如新音频的title和长度,总要更新吧。 ???????this.updateControlsInNewAudio(); ???????// 更换并且播放背景音乐 ???????globalBgAudioManager.changeAudio(); ?????}); ???} ?}, 

好了,终于到这个changeAudio函数了,它也是刚刚提到的options里面的一部分。

## changeAudio是options的属性,被扩展进入了backgroundAudioManager ?// 修改当前音频 ?changeAudio() { ???// 获取并且 ???const { url, audio_id, title, content_type_signare_url } = globalCourseAudioListManager.getCurrentAudio(); ???const { doctor, name, image } = globalCourseAudioListManager.courseInfo; ???self.title = title; ???self.epname = name; ???self.audioId = audio_id; ???self.coverImgUrl = image; ???self.singer = doctor.nickname || '丁香医生'; ???// iOS使用content_type_signare_url ???const src = isIOS() ? content_type_signare_url : url; ???if (!src) { ?????showToast({ ???????title: '音频丢失,无法播放', ???????icon: 'warn', ???????duration: 2000 ?????}); ???} else { ?????self.src = src; ???}} ?

为什么这里iOS要用content_type_signare_url?(它是我们后端返回的一个字段)

因为iOS小程序发起音频文件请求的时候,会默认带上content-type:octet-stream,而我们的音频文件URL又带有Signatrue签名参数,阿里云服务器似乎会默认把content-type加入到签名当中……于是我就遇上了403错误。

解决方案有两个:

  • 让后端负责CDN服务器的同事,在我请求获取音频src地址之前,先请求一次资源,并且做好缓存。
  • 把音频地址改成公开的。

2.3 courseAudioListManager相关需求

前面提到,我需要维护一个全局的课程信息和音频列表的管理对象,然后,就能操作音频列表了。

## 在app.js当中初始化this.courseAudioListManager = createCourseAudioListManager();## 在pages/play/index.js里面引用const globalCourseAudioListManager = app.courseAudioListManager; 

这个对象其实没有太多好介绍的,比较简单。又比如,前面提到“点击某个音频并自动播放”,其中有一步是这样的。

// 全局切换当前播放的音频index(此时还没有开始播放)globalCourseAudioListManager.changeCurrentAudioById(targetAudioId); ?

就是根据id来修改音频的索引,它是这么干的。

changeCurrentAudioById(audioId = -1) { ???this.currentIndex = this.audioList.findIndex(audio => audio.audio_id === audioId);}, ?

其他,具体有哪些方法,可以看前面的1.2.3节“开发方案确定”中的脑图。

不过,它有个addAudioSrc,可以解决重播失败的问题。

2.3.1 用重新加载src的方法,解决重播失败

当一个音频的播放被“停止”而不是“暂停”的时候,再调用play()方法,是不会重播的,亲测调用seek方法执行跳转也不行。

比如,当我试听完了一段音频,想重新听的时候,常规的play是无能的……怎么办?当然是绕过去啊

当你点击播放按钮的时候,

  • 首先通过一系列检查,就会触发下面这个playTargetAudio
handleStartPlayClick() { ???// 以上省略,若globalBgAudioManager.currentTime为false,表示认为你在点击一个已经播放完毕的音频 ???} else if (!globalBgAudioManager.currentTime) { ?????this.playTargetAudio(currentAudio.audio_id); ???} else ????// 以下省略} ?
  • 在playTargetAudio内部依次执行getAudioSrc/changeCurrentAudioById/changeAudio
this.getAudioSrc(targetAudioId).then(() => { ???????// 省略 ???????// 全局切换当前播放的音频index ???????globalCourseAudioListManager.changeCurrentAudioById(targetAudioId); ???????// 省略 ???????// 更换并且播放背景音乐 ???????globalBgAudioManager.changeAudio(); ?????}); ???} 
  • 在getAudioSrc内部,主要的作用就是,更新了一下新的src

globalCourseAudioListManager.addAudioSrc(res.items[0]);

然后我们看看addAudioSrc干了什么

## 现在在courseAudioListManager内部 ???addAudioSrc(audioSrcObject) { ?????this.audioList = this.audioList.map(audio => { ???????// 强制更新特定id的audio对象 ???????// 新的src隐藏在audioSrcObject里面 ???????if (Number(audio.audio_id) === Number(audioSrcObject.id)) { ?????????return Object.assign(audio, audioSrcObject, { id: audio.id }); ???????} else { ?????????return audio; ???????} ?????}); ???}, ?

现在src已经更新完了。看上去每次获取到的音频src都指向同一个音频,但是,音频的src地址是带有时间戳的,这避免了缓存,backgroundAudioManager设置src的时候,就会重新加载了~

当然这样,就没有缓存了,交互上会有所牺牲,每次重播的时候都会闪一下“音频加载中”。

如果各位有好的办法实现缓存,欢迎交流哈。

3. 其他一些经验

  • 如果代码过长,不要用三目运算符,很难读。
  • 音频播放可能出现错误,需要用onError加以捕获。
  • 最后,欢迎留言~!

本文作者: 丁香园F2
原文地址:微信小程序音频功能开发实(cai)践(keng)-实战教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟

【温馨提示】亚博应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至1223636800@ ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于亚博应用观点。用户与作者的任何交易与本站无关,请知悉。

热门模板

咨询热线

400-078-9990