文章首发：掘金主页
一、前言
- 开发背景：首次尝试小程序中实现录音、播放功能。
- 开发框架：
- taro 2.2.6
- taro-ui 2.3.4
- 难点描述：
- 实现小程序录音、上传到后台
- PC、IOS 和安卓端音频播放资源的地址，支持 mp3 下载链接
温馨提示：这篇文章重点介绍小程序的音频在各种环境录音和播放实践。适用对象：遇到小程序在 IOS 端无法播放音频的同学们和对小程序兼容性感兴趣的同学。
二、小程序录音、上传
2.1 注册事件监听
首先，介绍一下录音的部分。这里主要用到了小程序中的 wx.getRecorderManager() 模块部分。
直接放代码，感兴趣的可以去微信开发文档就了解下各种配置。
import Taro, { Component } from '@tarojs/taro'
export default class Index extends Component {
...
// 声明录音管理器模块
recorderManager = wx.getRecorderManager()
componentDidMount() {
// 抛出错误
recorderManager.onError(() => {
Taro.showToast({
title: '录音失败！',
duration: 1000,
icon: 'none'
})
})
// 录音结束时的处理
recorderManager.onStop(res => {
if (res.duration < 1000) {
Taro.showToast({
title: '录音时间太短',
duration: 1000,
icon: 'none'
})
} else {
// content 是存储录音结束后的数据结构,用于调试
this.setState({ content: res })
wx.saveFile({
tempFilePath: res.tempFilePath,
success: result => {
// 这里会调用一个文件上传的接口
this.fileUpload(result.savedFilePath)
}
})
}
})
}
fileUpload(tempFilePath) {
Taro.uploadFile({
url: XXXApi,
filePath: tempFilePath,
name: 'file',
header: {
'content-type': 'multipart/form-data',
cookie: Taro.getStorageSync('cookie') // 上传需要单独处理 cookie
},
formData: {
method: 'POST' // 请求方式
},
success: res => {
// 录音上传成功之后的处理
}
})
}
}
梳理一下：
- 在
componentDidMount生命周期中，注册几个重要的事件。包括：监听录音错误事件和监听录音结束事件 - 在录音结束时，用
wx.savefile将文件保存到本地 - 在
wx.savefile成功的回调中，调用文件上传的接口，将文件上传到服务器。
2.2 实现录音事件处理函数
先看下 dom 节点部分：
<Text>上传语音</Text>
<Text
onLongPress={this.handleRecordStart}
onTouchend={this.handleRecordStop}
>
长按说话
</Text>
其中就两个事件：handleRecordStart 和 handleRecordStop。他们分别是长按时触发和手指松开时触发。
简单实现：
// longpress （长按）时触发
handleRecordStart(e) {
this.setState({
record: {
// 修改录音数据结构，此时录音按钮样式会发生变化。
text: '松开保存',
type: 'recording'
}
})
// 开始录音
this.recorderManager.start({
duration: 60000,
sampleRate: 44100,
numberOfChannels: 1,
encodeBitRate: 192000,
format: 'mp3',
frameSize: 50
})
Taro.showToast({
title: '正在录音',
duration: 60000,
icon: 'none'
})
}
// touchend （手指松开）时触发
handleRecordStop() {
// 复原在 start 方法中修改的录音的数据结构
this.setState({
record: {
text: '长按录音',
type: 'record'
}
})
// 结束录音、隐藏 Toast 提示框
wx.hideToast()
// 结束录音
this.recorderManager.stop()
}
这里用了一个 record 对象来记录录音的状态。
注意 recorderManager.start 方法的参数中， duration 指录音时长，这里设置为 60000 ms；format 值为 mp3，意思录音得到的音频文件为 mp3 格式。
温馨提示：最初开发没有设置成格式化为
mp3，导致后台同事增加了工作量（将m4a转换成mp3），这里建议前端直接处理，很方便。
三、小程序端录音的播放
3.1 录音播放
说到音频播放，大家第一时间可能想到的是 Audio 标签，然后给其中的 src 属性动态赋值就好了。没错，PC 端确实是这样。但是小程序比较坑，如下图：
音频播放这里，我们选用了 wx.createInnerAudioContext() 接口。
温馨提示：如果音频上传到后台之后可以返回
.mp3结尾的url链接（例如：http://47.104.167.164/faceVideo/result_2020_07_21_12_33_43.mp3），可以考虑直接利用wx.createInnerAudioContext()的play()方法实现播放。
由于部分原因，我们后台上传音频文件后，返回的链接是一个云文件 ID（指浏览器打开可以下载此 mp3 文件）。而且经过测试发现，安卓端可以直接播放，IOS 端直接播放没有声音。
然后，请教了一下我们组的架构师，决定将文件先下载下来，然后保存到手机本地，最后播放（经过测试方案可行）。
我们直接看代码：
// 小程序音频播放 api
innerAudioContext = wx.createInnerAudioContext()
// 下载音频文件
downloadFile() {
const FileSystemManager = wx.getFileSystemManager()
const { voiceUrl } = this.state
wx.downloadFile({
url: voiceUrl,
header: { 'Content-type': 'audio/mp3' },
success: res => {
// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
FileSystemManager.saveFile({
tempFilePath: res.tempFilePath,
// 文件地址为手机本地
filePath: `${wx.env.USER_DATA_PATH}/${new Date().getTime()}.mp3`,
success: result => {
if (result.errMsg == 'saveFile:ok') {
this.registerAudioContext(result.savedFilePath)
}
}
})
}
}
})
}
// 注册音频控件
registerAudioContext(path) {
this.innerAudioContext.src = path
this.innerAudioContext.play()
// 避开 IOS 端静音状态没法播放的问题
this.innerAudioContext.obeyMuteSwitch = false
this.innerAudioContext.onEnded(res => {
// isPlaying 记录是否在播放中
this.setState({ isPlaying: false })
this.innerAudioContext.stop()
})
this.innerAudioContext.onError(res => {
// 播放音频失败的回调
})
this.innerAudioContext.onPlay(res => {
// 开始播放音频的回调
})
this.innerAudioContext.onStop(res => {
// 播放音频停止的回调
})
}
这里做了两件事情：
- 用
wx.downloadFile()接口将文件下载下来，注意参数中header属性，Content-type值为audio/mp3。即将此文件识别为音频类文件。这里用到微信里的文件管理器wx.getFileSystemManager()，接口中的saveFile()方法可以把文件保存到本地 - 用
wx.createInnerAudioContext()的play()方法播放存在本地的音乐mp3文件
3.2 性能优化
这里考虑到播放完之后，存在手机的录音文件会越来越多。我们想想办法，做一做性能优化工作。也就是在恰当的时机清楚多余文件。
代码如下：
componentWillUnmount() {
this.clearDir()
}
// 删除下载的音频文件
clearDir() {
const FileSystemManager = wx.getFileSystemManager()
const __dirPath = wx.env.USER_DATA_PATH
FileSystemManager.readdir({
dirPath: __dirPath,
success: res => {
const { errMsg, files } = res
if (errMsg == 'readdir:ok') {
files.forEach(item => {
FileSystemManager.unlink({
filePath: `${__dirPath}/${item}`
})
})
}
}
})
}
梳理一下：
用 wx.getFileSystemManager() 接口中 readdir() 方法读取到指定目录（wx.env.USER_DATA_PATH）的所有文件。在其读取成功的回调中做一个 forEach 循环，然后用 unlink() 删除文件。最后将此方法放在生命周期 componentWillUnmount 中调用。
四、PC 端音频播放
小程序的录音和播放都简单的介绍了，这里也拓展一下。说一说 PC 端比较原始的音频播放方法。
项目中没有引用播放器插件，这里直接用 audio 标签来实现。 html 的部分如下：
const { voice_url, isPlaying } = this.state;
return (
<>
<p>
<span>音频：</span>
<Button onClick={this.onBtnClick}>{isPlaying ? '停止' : '播放'}</Button>
</p>
<audio
id={`audio`}
src={voice_url}
autoPlay={true}
ref={this.audioRef}
preload={'auto'}
onCanPlay={() => {}}
onTimeUpdate={() => {}}>
<track src={voice_url} kind='captions' />
</audio>
</>
)
然后看下 PC 端解析播放部分，和小程序原理差不多，先下载，后播放。代码如下：
// 播放或者暂停
onBtnClick = () => {
const { isPlaying } = this.state;
// 区分播放还是暂停
if (isPlaying) {
this.audioRef.current.pause();
} else {
this.downloadFile();
}
this.setState({ isPlaying: !isPlaying });
};
// 下载文件
downloadFile = () => {
const { download_url } = this.state;
axios.get(download_url as string, { responseType: 'blob' }).then((res: any) => {
const reader = new FileReader();
const data = res.data;
reader.onload = e => {
this.executeDownload(data);
};
reader.readAsText(data);
});
};
// 在浏览器上预览音频文件
executeDownload = (data: any) => {
if (!data) {
return;
}
// 将文件转化音频流的链接
const url = window.URL.createObjectURL(new Blob([data], { type: 'audio/mp3' }));
// 前端存储这个链接
this.setState({ voice_url: url });
};
梳理：
- 创建
audio标签作为音频播放的容器 - 点击页面的播放按钮触发文件下载方法
- 通过
axios下载资源文件，用new FileReader()读取文件，并且在文件完全加载时，利用window.URL.createObjectURL()方法生成可以在浏览器上预览音频文件的链接 -
audio监听到src属性的变化时，会自动播放出声音
五、感谢
- 如果本文对你有帮助，就点个赞支持下吧！感谢阅读。
- 文中还有很多不完善的地方，欢迎大家在评论区提出疑问。
