组件:录音机

录音机组件用于调用设备麦克风进行音频录制和播放,支持初始化、开始/停止录制、播放已录制的音频、获取音频数据(Blob 对象或 URL)以及释放资源等操作。它适用于语音消息、语音笔记、音频录制等需要采集声音的场景。注意: 该组件为不可视组件,不继承自 视图 类,因此不包含视图相关的属性和事件,仅提供一系列方法用于控制录音流程。

典型使用场景:

  • 语音消息(即时通讯、聊天应用)
  • 语音笔记(备忘录、录音记录)
  • 语音输入(语音转文字的前置步骤)
  • 音频录制工具(播客、采访录音)

快速索引

你想知道什么直接看这里
如何初始化录音机初始化(回调函数)
如何开始录音开始录制()
如何停止录音停止录制()
如何播放录制的音频播放音频()
如何获取录音数据获取音频() / 获取音频URL()
如何检查是否正在录音正在录制()
如何释放资源销毁()

⚠️ 使用前提

  1. 用户授权:录音需要用户明确授权,浏览器会在首次调用 初始化 时弹出权限请求弹窗。若用户拒绝授权,初始化回调会返回失败。
  2. HTTPS 环境:录音功能要求在安全上下文(HTTPS)或 localhost 下使用,否则可能无法正常工作。
  3. 设备支持:请确保设备具有麦克风硬件且驱动正常。

生命周期流程

录音机的使用通常遵循以下流程:

创建实例 → 初始化(请求权限)→ 开始录制 → 停止录制 → 播放/获取音频 → 销毁(释放资源)

基础示例

最简单的录音流程:初始化、开始录制、等待几秒后停止并播放。

变量 录音机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.销毁()

⚠️ 注意事项

  1. 必须先初始化:任何录制操作前必须调用 初始化 并等待成功回调,否则后续操作会失败。
  2. 用户授权:浏览器会在首次初始化时弹出权限请求,用户允许后方可录制。若用户拒绝,回调返回失败。
  3. HTTPS 要求:录音功能仅在安全上下文(HTTPS)或 localhost 下可用,非安全环境会报错。
  4. 录制状态管理:建议在 UI 中同步录制状态(如禁用/启用按钮),防止用户重复点击导致冲突。
  5. 音频数据大小:录制的音频数据存储在内存中,长时间录制可能导致内存占用过大,建议控制录制时长(如不超过 5 分钟)。
  6. 播放并发:录音机不支持同时播放和录制,需停止录制后才能播放。
  7. 资源释放:调用 销毁() 后,录音机将不可再用,如需重新录音需重新创建实例。
  8. 浏览器兼容性:录音功能依赖 MediaRecorder API,现代浏览器(Chrome、Firefox、Edge)均支持,但部分旧浏览器可能不支持。
  9. 播放音频时的限制:播放音频需要浏览器允许自动播放策略,若首次播放被拦截,可先让用户点击触发播放。
  10. 获取音频URL获取音频URL() 返回的 URL 是 blob: 协议的临时地址,可用于 <audio> 标签播放,但页面刷新后失效。

相关文档

  • 文档媒体类组件_音频播放器 —— 播放音频文件
  • 文档媒体类组件_视频播放器 —— 播放视频文件
  • 文档媒体类组件_相机 —— 摄像头相关操作
  • 文档轻语言网站:轻语言语法速查 —— 拉姆达表达式、延时执行等
  • 文档综合演示:语音消息录制器 —— 实际应用示例