组件:录音机
录音机组件用于调用设备麦克风进行音频录制和播放,支持初始化、开始/停止录制、播放已录制的音频、获取音频数据(Blob 对象或 URL)以及释放资源等操作。它适用于语音消息、语音笔记、音频录制等需要采集声音的场景。注意: 该组件为不可视组件,不继承自 视图 类,因此不包含视图相关的属性和事件,仅提供一系列方法用于控制录音流程。
典型使用场景:
- 语音消息(即时通讯、聊天应用)
- 语音笔记(备忘录、录音记录)
- 语音输入(语音转文字的前置步骤)
- 音频录制工具(播客、采访录音)
快速索引
| 你想知道什么 | 直接看这里 |
|---|---|
| 如何初始化录音机 | 初始化(回调函数) |
| 如何开始录音 | 开始录制() |
| 如何停止录音 | 停止录制() |
| 如何播放录制的音频 | 播放音频() |
| 如何获取录音数据 | 获取音频() / 获取音频URL() |
| 如何检查是否正在录音 | 正在录制() |
| 如何释放资源 | 销毁() |
⚠️ 使用前提
- 用户授权:录音需要用户明确授权,浏览器会在首次调用
初始化时弹出权限请求弹窗。若用户拒绝授权,初始化回调会返回失败。 - HTTPS 环境:录音功能要求在安全上下文(HTTPS)或 localhost 下使用,否则可能无法正常工作。
- 设备支持:请确保设备具有麦克风硬件且驱动正常。
生命周期流程
录音机的使用通常遵循以下流程:
创建实例 → 初始化(请求权限)→ 开始录制 → 停止录制 → 播放/获取音频 → 销毁(释放资源)
基础示例
最简单的录音流程:初始化、开始录制、等待几秒后停止并播放。
变量 录音机1 = 创建 录音机()
' 1. 初始化(请求麦克风权限)
录音机1.初始化((初始化结果, 错误信息) => {
如果(初始化结果)
调试输出("初始化成功,开始录音...")
' 2. 开始录制
变量 开始结果 = 录音机1.开始录制()
如果(开始结果)
调试输出("录音已开始")
' 3. 模拟录制3秒后停止
延时执行(() => {
录音机1.停止录制()
调试输出("录音已停止")
' 4. 播放录音
录音机1.播放音频()
}, 3000)
否则
调试输出("开始录制失败")
结束 如果
否则
调试输出("初始化失败:" + 错误信息)
结束 如果
})
综合示例:语音消息录制器
本示例构建一个完整的语音消息录制界面,包含开始/停止录制、播放录音、显示录制时长以及获取音频数据等功能。
' ========== 创建UI控件 ==========
' 状态标签
变量 状态标签 = 创建 标签()
状态标签.左边 = 30
状态标签.顶边 = 30
状态标签.文本 = "⏹ 准备就绪"
状态标签.字体大小 = "16px"
状态标签.文本颜色 = "#666"
添加组件(状态标签)
' 计时标签
变量 计时标签 = 创建 标签()
计时标签.左边 = 30
计时标签.顶边 = 70
计时标签.文本 = "00:00"
计时标签.字体大小 = "24px"
计时标签.字体粗细 = "bold"
计时标签.文本颜色 = "#1890ff"
添加组件(计时标签)
' 开始录音按钮
变量 开始按钮 = 创建 按钮()
开始按钮.左边 = 30
开始按钮.顶边 = 120
开始按钮.宽度 = 100
开始按钮.高度 = 40
开始按钮.文本 = "🎤 开始录音"
开始按钮.背景颜色 = "#1890ff"
开始按钮.文本颜色 = "#ffffff"
开始按钮.边框圆角 = "6px"
开始按钮.字体大小 = "14px"
添加组件(开始按钮)
' 停止录音按钮
变量 停止按钮 = 创建 按钮()
停止按钮.左边 = 150
停止按钮.顶边 = 120
停止按钮.宽度 = 100
停止按钮.高度 = 40
停止按钮.文本 = "⏹ 停止录音"
停止按钮.背景颜色 = "#ff4d4f"
停止按钮.文本颜色 = "#ffffff"
停止按钮.边框圆角 = "6px"
停止按钮.字体大小 = "14px"
停止按钮.禁用 = 真 ' 初始禁用
添加组件(停止按钮)
' 播放录音按钮
变量 播放按钮 = 创建 按钮()
播放按钮.左边 = 270
播放按钮.顶边 = 120
播放按钮.宽度 = 100
播放按钮.高度 = 40
播放按钮.文本 = "▶ 播放"
播放按钮.背景颜色 = "#52c41a"
播放按钮.文本颜色 = "#ffffff"
播放按钮.边框圆角 = "6px"
播放按钮.字体大小 = "14px"
播放按钮.禁用 = 真 ' 初始禁用
添加组件(播放按钮)
' 获取音频按钮(演示获取Blob)
变量 获取按钮 = 创建 按钮()
获取按钮.左边 = 390
获取按钮.顶边 = 120
获取按钮.宽度 = 100
获取按钮.高度 = 40
获取按钮.文本 = "📥 获取数据"
获取按钮.背景颜色 = "#faad14"
获取按钮.文本颜色 = "#ffffff"
获取按钮.边框圆角 = "6px"
获取按钮.字体大小 = "14px"
获取按钮.禁用 = 真
添加组件(获取按钮)
' ========== 业务逻辑 ==========
变量 录音机 = 创建 录音机()
变量 计时秒数 = 0
变量 计时器ID = 空
' 更新计时器显示
函数 更新计时显示()
变量 分钟 = 向下取整(计时秒数 / 60)
变量 秒 = 计时秒数 - 分钟 * 60
变量 分钟文本 = 分钟 < 10 ? "0" + 分钟 : "" + 分钟
变量 秒文本 = 秒 < 10 ? "0" + 秒 : "" + 秒
计时标签.文本 = 分钟文本 + ":" + 秒文本
结束 函数
' 开始录音
开始按钮.置被单击回调((源对象, 事件对象) => {
' 初始化(如果尚未初始化)
录音机.初始化((初始化结果, 错误信息) => {
如果(初始化结果)
变量 开始结果 = 录音机.开始录制()
如果(开始结果)
状态标签.文本 = "🔴 录音中..."
状态标签.文本颜色 = "#ff4d4f"
开始按钮.禁用 = 真
停止按钮.禁用 = 假
播放按钮.禁用 = 真
获取按钮.禁用 = 真
计时秒数 = 0
更新计时显示()
' 启动计时器
如果(计时器ID != 空)
销毁时钟(计时器ID)
结束 如果
计时器ID = 创建时钟(() => {
计时秒数 = 计时秒数 + 1
更新计时显示()
}, 1000)
否则
状态标签.文本 = "❌ 开始录制失败"
结束 如果
否则
状态标签.文本 = "❌ 初始化失败:" + 错误信息
结束 如果
})
})
' 停止录音
停止按钮.置被单击回调((源对象, 事件对象) => {
' 停止计时
如果(计时器ID != 空)
销毁时钟(计时器ID)
计时器ID = 空
结束 如果
录音机.停止录制()
状态标签.文本 = "⏹ 录音已停止(" + 计时标签.文本 + ")"
状态标签.文本颜色 = "#666"
开始按钮.禁用 = 假
停止按钮.禁用 = 真
播放按钮.禁用 = 假
获取按钮.禁用 = 假
})
' 播放录音
播放按钮.置被单击回调((源对象, 事件对象) => {
变量 播放结果 = 录音机.播放音频()
如果(播放结果)
状态标签.文本 = "🔊 播放中..."
状态标签.文本颜色 = "#52c41a"
播放按钮.禁用 = 真
' 模拟播放结束(实际可通过播放完毕事件,但录音机未提供,故延时恢复)
延时执行(() => {
状态标签.文本 = "⏹ 播放完成"
状态标签.文本颜色 = "#666"
播放按钮.禁用 = 假
}, 3000) ' 假设录音不超过3秒,实际可根据时长动态调整
否则
状态标签.文本 = "❌ 播放失败"
结束 如果
})
' 获取音频数据
获取按钮.置被单击回调((源对象, 事件对象) => {
变量 音频Blob = 录音机.获取音频()
如果(音频Blob != 空)
变量 大小KB = 四舍五入(取数组成员数(音频Blob) / 1024, 0)
弹出提示("音频数据大小:" + 大小KB + " KB")
' 也可获取URL播放
变量 url = 录音机.获取音频URL()
调试输出("音频URL:" + url)
否则
弹出提示("未录制到音频数据")
结束 如果
})
' 销毁(可选,在页面关闭时调用)
事件 页面被关闭()
录音机.销毁()
结束 事件
函数详解
初始化(回调函数)
- 功能: 初始化录音机,请求麦克风权限。必须在调用
开始录制()前执行。 - 参数:
回调函数,格式为(初始化结果, 错误信息) => { ... }。初始化结果:逻辑型,真表示成功,假表示失败。错误信息:文本型,当失败时包含错误描述。
- 返回值: 无。
- 示例:
录音机1.初始化((成功, 错误) => { 如果(成功) 调试输出("初始化成功") 否则 调试输出("初始化失败:" + 错误) 结束 如果 })
开始录制()
- 功能: 开始录制音频。必须在
初始化成功后调用。 - 返回值: 逻辑型,
真表示开始成功,假表示失败(可能由于未初始化或设备繁忙)。 - 示例:
变量 结果 = 录音机1.开始录制()
停止录制()
- 功能: 停止当前正在进行的录制。停止后,录制的音频数据可被获取或播放。
- 返回值: 逻辑型,
真表示停止成功,假表示失败(如未在录制状态)。 - 示例:
变量 结果 = 录音机1.停止录制()
播放音频()
- 功能: 播放已录制的音频。如果未录制或录制未停止,可能导致播放失败。
- 返回值: 逻辑型,
真表示播放成功,假表示失败。 - 示例:
变量 结果 = 录音机1.播放音频()
获取音频()
- 功能: 获取已录制的音频数据,以 Blob 对象形式返回。可用于上传、保存等操作。
- 返回值: Blob 对象,若无录制音频则返回
空。 - 示例:
变量 音频Blob = 录音机1.获取音频()
获取音频URL()
- 功能: 获取已录制音频的临时 URL(可通过浏览器播放或下载)。该 URL 只在当前会话有效。
- 返回值: 文本型,URL 字符串,若无录制音频则返回
空。 - 示例:
变量 url = 录音机1.获取音频URL()
正在录制()
- 功能: 检查当前是否正在录制中。
- 返回值: 逻辑型,
真表示正在录制,假表示未录制。 - 示例:
如果(录音机1.正在录制()) 调试输出("正在录音")
销毁()
- 功能: 释放录音机占用的资源(如麦克风、音频上下文等)。建议在组件不再使用时调用,避免资源泄露。
- 返回值: 无。
- 示例:
录音机1.销毁()
⚠️ 注意事项
- 必须先初始化:任何录制操作前必须调用
初始化并等待成功回调,否则后续操作会失败。 - 用户授权:浏览器会在首次初始化时弹出权限请求,用户允许后方可录制。若用户拒绝,回调返回失败。
- HTTPS 要求:录音功能仅在安全上下文(HTTPS)或 localhost 下可用,非安全环境会报错。
- 录制状态管理:建议在 UI 中同步录制状态(如禁用/启用按钮),防止用户重复点击导致冲突。
- 音频数据大小:录制的音频数据存储在内存中,长时间录制可能导致内存占用过大,建议控制录制时长(如不超过 5 分钟)。
- 播放并发:录音机不支持同时播放和录制,需停止录制后才能播放。
- 资源释放:调用
销毁()后,录音机将不可再用,如需重新录音需重新创建实例。 - 浏览器兼容性:录音功能依赖
MediaRecorderAPI,现代浏览器(Chrome、Firefox、Edge)均支持,但部分旧浏览器可能不支持。 - 播放音频时的限制:播放音频需要浏览器允许自动播放策略,若首次播放被拦截,可先让用户点击触发播放。
- 获取音频URL:
获取音频URL()返回的 URL 是blob:协议的临时地址,可用于<audio>标签播放,但页面刷新后失效。
相关文档
- 文档
媒体类组件_音频播放器—— 播放音频文件 - 文档
媒体类组件_视频播放器—— 播放视频文件 - 文档
媒体类组件_相机—— 摄像头相关操作 - 文档
轻语言网站:轻语言语法速查—— 拉姆达表达式、延时执行等 - 文档
综合演示:语音消息录制器—— 实际应用示例