bricks/docs/ai/audio.md
2025-11-19 10:44:49 +08:00

3.3 KiB
Raw Blame History

以下是根据你提供的源码,为其中定义的三个控件编写的符合要求的 Markdown 格式控件文档。每个控件均按照“一级标题为控件名称”、“包含控件功能、类型、父类”,以及“二级标题:初始化参数、主要事件”的格式编写。


AudioPlayer

控件功能:用于播放音频文件,支持本地 URL 或流式加载,具备播放、暂停、自动播放、播放队列和状态检测等功能。
类型:普通控件
父类控件bricks.JsWidget

初始化参数

参数名 类型 说明
url String 音频资源的 URL 地址,可选。构造时传入则立即加载。
autoplay Boolean 是否在音频可播放后自动开始播放,默认为 false

主要事件

事件名 触发条件
ended 当前音频播放结束且播放列表为空时触发。

AudioRecorder

控件功能:实现音频录制功能,基于浏览器麦克风权限进行 WAV 格式录音,提供开始/停止录音、实时时间显示、录音上传和下载功能。依赖第三方库 Recorder.jsWAV 格式)。
类型:容器控件(继承自 HBox包含按钮与文本
父类控件bricks.HBox

初始化参数

参数名 类型 说明
upload_url String 录音结束后自动上传的目标 URL 地址,可选。
start_icon String 开始录音按钮显示的 SVG 图标路径,默认使用内置资源。
stop_icon String 停止录音按钮显示的 SVG 图标路径,默认使用内置资源。
icon_rate Number SVG 图标缩放比例,传递给内部 Svg 控件。

主要事件

事件名 触发条件
record_started 用户点击开始录音,麦克风授权成功后触发。
record_ended 用户停止录音,生成 blob 数据后触发,携带 {data, url, duration} 参数。
uploaded 成功上传录音文件到服务器后触发,携带服务器返回结果。

⚠️ 注意:需引入外部库 Recorder.js 支持录音功能。


TextedAudioPlayer

控件功能:结合音频播放与文本展示的复合控件,适用于语音朗读+字幕同步场景。支持从流式响应中逐段加载音频与对应文本,并自动顺序播放。
类型:容器控件(垂直布局 VBox
父类控件bricks.VBox

初始化参数

无独立初始化参数,内部自动创建子控件:

  • AudioPlayer 实例用于播放音频。
  • Text 实例用于显示对应文本内容。
  • VScrollPanel 提供文本区域滚动能力。

主要事件

无直接对外暴露的自定义事件。其行为由内部 AudioPlayerended 事件驱动,自动调用 playnext() 播放下一段内容。

内部通过 set_stream_urls(response) 接收流式 JSON 数据,每项应包含 audioBase64 编码音频)、text(对应文字)、done(是否结束)字段。


所有控件均已通过 bricks.Factory.register 注册,可在模板或配置中通过字符串名称实例化。