腾讯云微搭低代码微搭应用实现录音功能-实践教程-文档中心-腾讯云

需求背景
录音可以帮助用户快速捕捉语音信息，由于微搭官方组件库中暂时没有提供实现录音的组件，本篇实践主要介绍微搭结合小程序 API 实现录制语音的流程。
实现流程
利用小程序 API 中的 RecorderManager 对象（全局唯一的录音管理器）以及相关的录音事件来实现整个录音流程。
﻿
﻿
﻿
实践思路
方法介绍
涉及小程序相关 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.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);
  });
﻿
}
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. 前往云开发控制台，检查录音文件是否上传成功。
﻿
﻿
﻿
说明：
云储存文件，请前往云开发-云存储控制台查看。
其他说明
上述录音功能实践只在小程序环境下生效，需要在真机环境下预览录音效果。
录音更多说明，请参见小程序开发文档 全局唯一的录音管理器。

名称	方法	说明
录音管理器（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 链接）

微搭应用实现录音功能

本页目录：

需求背景

实现流程

实践思路

方法介绍

实现步骤

真机预览

其他说明