72 lines
3.0 KiB
Markdown
72 lines
3.0 KiB
Markdown
# AudioPlayer
|
||
|
||
**控件功能**：用于播放音频文件，支持本地 URL 或流式加载，具备播放、暂停、自动播放、播放队列和状态检测等功能。
|
||
**类型**：普通控件
|
||
**父类控件**：`bricks.JsWidget`
|
||
|
||
## 初始化参数
|
||
|
||
| 参数名 | 类型 | 说明 |
|
||
|----------|--------|------|
|
||
| `url` | String | 音频资源的 URL 地址，可选。构造时传入则立即加载。 |
|
||
| `autoplay`| Boolean| 是否在音频可播放后自动开始播放，默认为 `false`。 |
|
||
|
||
## 主要事件
|
||
|
||
| 事件名 | 触发条件 |
|
||
|--------|---------|
|
||
| `ended` | 当前音频播放结束且播放列表为空时触发。 |
|
||
|
||
---
|
||
|
||
# AudioRecorder
|
||
|
||
**控件功能**：实现音频录制功能，基于浏览器麦克风权限进行 WAV 格式录音，提供开始/停止录音、实时时间显示、录音上传和下载功能。依赖第三方库 Recorder.js（WAV 格式）。
|
||
**类型**：容器控件（继承自 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](https://gitee.com/xiangyuecn/Recorder) 支持录音功能。
|
||
|
||
---
|
||
|
||
# TextedAudioPlayer
|
||
|
||
**控件功能**：结合音频播放与文本展示的复合控件，适用于语音朗读+字幕同步场景。支持从流式响应中逐段加载音频与对应文本，并自动顺序播放。
|
||
**类型**：容器控件（垂直布局 VBox）
|
||
**父类控件**：`bricks.VBox`
|
||
|
||
## 初始化参数
|
||
|
||
无独立初始化参数，内部自动创建子控件：
|
||
|
||
- `AudioPlayer` 实例用于播放音频。
|
||
- `Text` 实例用于显示对应文本内容。
|
||
- `VScrollPanel` 提供文本区域滚动能力。
|
||
|
||
## 主要事件
|
||
|
||
无直接对外暴露的自定义事件。其行为由内部 `AudioPlayer` 的 `ended` 事件驱动，自动调用 `playnext()` 播放下一段内容。
|
||
|
||
> 内部通过 `set_stream_urls(response)` 接收流式 JSON 数据，每项应包含 `audio`（Base64 编码音频）、`text`（对应文字）、`done`（是否结束）字段。
|
||
|
||
---
|
||
|
||
> ✅ 所有控件均已通过 `bricks.Factory.register` 注册，可在模板或配置中通过字符串名称实例化。
|