Taro（React+TS）基于InnerAudioContext封装一个基本的音频组件（uni-app（vue）后续更新）

Question

为什么要封装一个音频组件

主要因为微信小程序官方的audio不维护了，并且在很多iOS真机上确实也存在点击无法播放，总时长不显示等问题.

音频组件的要求与限制

1. 点击播放或者暂停
2. 显示播放进度及总时长
3. 通过图标变化显示当前音频所处状态（暂停/播放/加载中）
4. 页面音频更新时刷新组件状态
5. 全局有且只有一个音频处于播放状态
6. 离开页面之后要自动停止播放并销毁音频实例

材料：

icon_loading.gif
icon_playing.png
icon_paused.png

InnerAudioContext提供的属性和方法

属性:

string src: 音频资源的地址，用于直接播放。
bumber startTime: 开始播放的位置（单位：s），默认为 0
boolean autoplay: 是否自动开始播放，默认为 false
boolean loop: 是否循环播放，默认为 false
number volume: 音量。范围 0~1。默认为 1
number playbackRate: 播放速度。范围 0.5-2.0，默认为 1。（Android 需要 6 及以上版本）
number duration: 当前音频的长度（单位 s）。只有在当前有合法的 src 时返回（只读）
number currentTime: 当前音频的播放位置（单位 s）。只有在当前有合法的 src 时返回，时间保留小数点后 6 位（只读）
boolean paused: 当前是是否暂停或停止状态（只读）
number buffered: 音频缓冲的时间点，仅保证当前播放时间点到此时间点内容已缓冲（只读）

方法：

play(): 播放
pause(): 暂停。暂停后的音频再播放会从暂停处开始播放
stop(): 停止。停止后的音频再播放会从头开始播放。
seek(postions: number):跳转到指定位置
destory(): 销毁当前实例
onCanplay(callback): 监听音频进入可以播放状态的事件。但不保证后面可以流畅播放
offCanplay(callback): 取消监听音频进入可以播放状态的事件
onPlay(callback): 监听音频播放事件
offPlay(callback): 取消监听音频播放事件
onPause(callback): 监听音频暂停事件
offPause(callback): 取消监听音频暂停事件
onStop(callback): 监听音频停止事件
offStop(callback): 取消监听音频停止事件
onEnded(callback): 监听音频自然播放至结束的事件
offEnded(callback): 取消监听音频自然播放至结束的事件
onTimeUpdate(callback): 监听音频播放进度更新事件
offTimeUpdate(callback): 取消监听音频播放进度更新事件
onError(callback): 监听音频播放错误事件
offError(callbcak): 取消监听音频播放错误事件
onWaiting(callback): 监听音频加载中事件。当音频因为数据不足，需要停下来加载时会触发
offWaiting(callback): 取消监听音频加载中事件
onSeeking(callback): 监听音频进行跳转操作的事件
offSeeking(callback): 取消监听音频进行跳转操作的事件
onSeeked(callback): 监听音频完成跳转操作的事件
offSeeked(callback): 取消监听音频完成跳转操作的事件

让我们开始吧

Answer 1

你这发错区了吧，这里发的是提问，文章应该发自己专栏里的