需求背景
公司需要一款可以在企业微信打开的小程序,主要的功能是播放音频.
从图上可以看出来,音频播放器主要的功能就是以下几点:
- 进度条(实时进度)
- 播放列表
- 上一曲、下一曲
- 播放、暂停
- 倍速(大坑,后面说)
微信音频播放API
这个小程序实现的核心其实就是播放音频,那自然就离不开微信内置的音频播放API,因为我们不需要背景播放,所以就选择使用了 InnerAudioContext.但是众所周知微信小程序的尿性,平台兼容是个大问题,因为这个小程序需要在iOS、安卓、mac、windows上使用,所以产生了很多的兼容性问题,下面就我遇到的兼容性问题做一下总结.
InnerAudioContext.onCanplay(function listener)
这个方法是音频准备好的回调,但是想在这个方法里面play()的小伙伴注意了,他并不是在每个平台都生效的,推荐使用autoplay属性代替,但是autoplay在iOS不生效.
duration 属性
获取音频时长的属性,但是在音频播放之前获取不到数值,需要先play()再获取.
InnerAudioContext.seek(number position)
跳转到指定位置,但是在非iOS平台需要先调用play()方法才能生效.
在iOS平台需要在seek()之后调用play()才能生效.
playbackRate 属性
设置音频倍速的属性,但是兼容性很不友好.
在安卓平台一切正常;
在iOS平台设置的时候需要先暂停音频,然后设置倍速,设置之后再播放才能生效;
在windows平台的问题和iOS平台一样,但windows在切换歌曲之后倍速失效,所以需要在切换歌曲之后重新设置倍速;
在mac平台倍速设置无效.
解决mac平台倍速无效的问题
因为在我们的需要里面,倍速是非常重要的一项功能不能舍弃.所以我决定另辟蹊径,mac端的播放页面采用H5来实现,然后将此H5页面通过web-view组件嵌入到小程序里面.
小程序与H5的交互可以参考这篇文章.
