需求背景
录音可以帮助用户快速捕捉语音信息,由于微搭官方组件库中暂时没有提供实现录音的组件,本篇实践主要介绍微搭结合小程序 API 实现录制语音的流程。
实现流程
实践思路
方法介绍
涉及小程序相关 API 如下:
名称 | 方法 | 说明 |
录音管理器(RecorderManager) | wx.getRecorderManager() | - |
开始录音 | recorderManager.start(options) | options 是录音器默认配置参数 |
暂停录音 | RecorderManager.pause() | - |
继续录音 | RecorderManager.resume() | - |
停止录音 | RecorderManager.stop() | - |
监听录音开始事件 | RecorderManager.onStart(function listener) | - |
监听录音暂停事件 | RecorderManager.onPause(function listener) | - |
监听录音继续事件 | RecorderManager.onResume(function listener) | - |
监听录音结束事件 | RecorderManager.onStop(function listener) | 返回录音文件的临时路径 (本地路径) |
播放录音 | wx.createInnerAudioContext() | 创建小程序音频对象 |
上传录音文件 | wx.cloud.uploadFile() | 上传临时文件到云储存 |
云储存文件转化 | $w.cloud.getTempFileURL() | 将云储存文件转化成 cdn 链接(可访问的 HTTPS 链接) |
实现步骤
1. 在编辑器中使用多个按钮组件构建录音场景,包含录音器的基本功能,例如开始录音、暂停录音、继续录音、结束录音等,代码区新建相关变量和 javascript 方法。
2. 编辑器-代码区相关变量和方法功能介绍。
recorderManager_get
:js 方法,获取录音器示例。recorderManager_object
:对象型变量,用来存储录音器示例的变量。recorderManager_action
:js 方法,执行和监听录音的相关事件,例如监听开始录音、暂停录音、继续录音、结束录音、播放录音。innerAudioContext
:js 方法,获取媒体-音频对象,主要是用来播放录音。wxFilePath
:文本类型变量,用来存储结束录音时生成的录音临时文件。getTempFileURL
:js 方法,上传临时录音文件到云储存并转化成可访问的 cdn 链接。3. 执行方法代码展示。
recorderManager_get
:用 wx.getRecorderManager()
来获取录音器实例,变量 recorderManager_object 存储录音器实例。
export default function ({ event, data }) {$w.page.dataset.state.recorderManager_object = wx.getRecorderManager(); //录音器实例对象}
recorderManager_action
:data.target
为按钮绑定的相关事件传递参数,options
为录音器配置。
export default function ({ event, data }) {let action = data.targetconst options = {duration: 60000, // 录音时长,单位:毫秒sampleRate: 16000, // 采样率,单位:HznumberOfChannels: 1, // 声道数encodeBitRate: 48000, // 编码位速,单位:bpsformat: 'mp3', // 音频格式,支持 'mp3'、'aac'、'wav'frameSize: 50, // 指定帧大小,单位:ms}//录音事件switch (action) {case "start": //开始$w.page.dataset.state.recorderManager_object.start(options)breakcase "pause": //暂停$w.page.dataset.state.recorderManager_object.pause()breakcase "resume": //继续$w.page.dataset.state.recorderManager_object.resume()breakcase "stop": //停止$w.page.dataset.state.recorderManager_object.stop()breakdefault:}//监听录音事件$w.page.dataset.state.recorderManager_object.onStart(() => { //监听开始录音console.log('recorder start')})$w.page.dataset.state.recorderManager_object.onPause(() => { //监听暂停录音console.log('recorder pause')})$w.page.dataset.state.recorderManager_object.onStop((res) => { //监听结束录音console.log('recorder stop', res)const { tempFilePath } = res //返回录音临时文件$w.page.dataset.state.wxFilePath = tempFilePath //将临时文件路径存储到变量wxFilePathconsole.log("wx-tempfile:" + $w.page.dataset.state.wxFilePath)})$w.page.dataset.state.recorderManager_object.onError((err) => {console.error('recorder error', err);});}
4.
innerAudioContext
:通过 wx.createInnerAudioContext()
获取媒体-音频对象。
export default function ({ event, data }) {const innerAudioContext = wx.createInnerAudioContext();innerAudioContext.src = data.target; // 设置音频文件路径// 监听音频播放事件innerAudioContext.onPlay(() => {console.log('开始播放');});innerAudioContext.play() // 播放// innerAudioContext.pause() // 暂停// innerAudioContext.stop() // 停止// innerAudioContext.destroy() // 释放音频资源innerAudioContext.onError((res) => {console.error(res.errMsg);console.error(res.errCode);});}
5.
getTempFileURL
:wx.cloud.uploadFile()
用来上传临时文件到云储存, $w.cloud.getTempFileURL()
用来将云存储文件转化成 cdn 链接(可访问的 https 链接)。
export default function ({ event, data }) {wx.cloud.uploadFile({cloudPath: 'recorder/' + $w.Now(), // 对象存储路径,根路径直接填文件名,文件夹例子 test/文件名,不要 / 开头filePath: $w.page.dataset.state.wxFilePath, // 微信本地文件config: {env: 'lowcode-xxxxxxxxxxxxx' // 需要替换成自己的微搭环境ID},success: res => {console.log(res.fileID) // fileID云存储对应文件id$w.cloud.getTempFileURL(res.fileID).then((url) => console.log("录音文件cdn链接:", url));//转换成可访问的cdn链接},fail: err => {console.error(err)}})}
6. 按钮相关录音事件绑定介绍:
开始录音:执行方法
recorderManager_action
,传递参数“start”。
暂停录音:执行方法
recorderManager_action
,传递参数“pause”。
继续录音:执行方法
recorderManager_action
,传递参数“resume”。
结束录音:执行方法
recorderManager_action
,传递参数“stop”。
播放录音:执行方法
innerAudioContext
,传递参数录音临时路径 $w.page.dataset.state.wxFilePath
。
上传录音:执行方法
getTempFileURL
,将临时文件上传至云储存并转化成 cdn 链接。
真机预览
1. 在编辑器中,发布小程序,在真机环境下预览。
2. 用 vConsole 模式体验小程序。
3. 单击开始录音,首次录音,会有麦克风权限申请授权弹窗。
4. 按照开始录音 > 暂停录音 > 继续录音 > 结束录音 > 播放录音的流程进行测试,可以看到相应的打印日志,日志中的
wx-tempfile
即为生成的录音临时文件。
5. 单击上传录音,将生成的录音临时文件上传到云开发-云储存,并转化成 cdn 链接,可以看到日志中录音文件对应的云储存文件 ID 和 cdn 链接。
6. 前往云开发控制台,检查录音文件是否上传成功。
说明:
其他说明
上述录音功能实践只在小程序环境下生效,需要在真机环境下预览录音效果。
录音更多说明,请参见小程序开发文档 全局唯一的录音管理器。