腾讯云微搭低代码 微搭应用实现录音功能

一、实现流程

利用小程序 API 中的 RecorderManager 对象（全局唯一的录音管理器）以及相关的录音事件来实现整个录音流程。

二、方法介绍

涉及小程序相关 API 如下：

三、操作步骤

1. 请前往 微搭控制台 创建空白应用。

2. 应用创建后，在应用编辑器中创建多个按钮组件构建录音场景，包含录音器的基本功能，例如开始录音、暂停录音、继续录音、结束录音等。

3. 在代码区新建相关变量和 javascript 方法。

编辑器-代码区创建的相关变量和方法功能介绍。

·recorderManager_get：js 方法，获取录音器示例。

·recorderManager_object：对象型变量，用来存储录音器示例的变量。

·recorderManager_action：js 方法，执行和监听录音的相关事件，例如监听开始录音、暂停录音、继续录音、结束录音、播放录音。

·innerAudioContext：js 方法，获取媒体-音频对象，主要是用来播放录音。

·wxFilePath：文本类型变量，用来存储结束录音时生成的录音临时文件。

·getTempFileURL：js 方法，上传临时录音文件到云储存并转化成可访问的 cdn 链接。

4. 在创建的 JS 方法编辑执行方法代码，选择刚创建的 JS 方法，按照下述内容复制示例代码至 JS 方法代码块内（示例仅供参考，你可按照需求自行编辑），单击右上角保存即可。

注意：说明：

注意：以下内容在页面生命周期加载事件中调用。

·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.target const options = { duration: 60000, // 录音时长，单位：毫秒 sampleRate: 16000, // 采样率，单位：Hz numberOfChannels: 1, // 声道数 encodeBitRate: 48000, // 编码位速，单位：bps format: 'mp3', // 音频格式，支持 'mp3'、'aac'、'wav' frameSize: 50, // 指定帧大小，单位：ms } //录音事件 switch (action) { case "start": //开始 $w.page.dataset.state.recorderManager_object.start(options) break case "pause": //暂停 $w.page.dataset.state.recorderManager_object.pause() break case "resume": //继续 $w.page.dataset.state.recorderManager_object.resume() break case "stop": //停止 $w.page.dataset.state.recorderManager_object.stop() break default: } //监听录音事件 $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 //将临时文件路径存储到变量wxFilePath console.log("wx-tempfile:" + $w.page.dataset.state.wxFilePath) }) $w.page.dataset.state.recorderManager_object.onError((err) => { console.error('recorder error', err); });}

·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); });}

·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) } })}

5. 请按照以下内容绑定录音事件：

·开始录音：执行方法 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. 前往 云开发控制台，检查录音文件是否上传成功。

注意：说明：

注意：云储存文件，请前往 云开发-云存储 控制台查看。

五、其他说明

·上述录音功能实践只在小程序环境下生效，需要在真机环境下预览录音效果。

·录音更多说明，请参见小程序开发文档 全局唯一的录音管理器。