Audio
容器属性
所有组件配置的第一层均支持容器属性
组件属性 componentsProps
| Name | Type | Default | 是否支持 Variable Pattern | Description |
|---|---|---|---|---|
| src | string | ✔️ | 音频的播放地址。当只需要提供单一音频源时使用该字段。 | |
| sources | Array<{ src: string, type: string }> | 多音频源配置,用于兼容不同浏览器(如 mp3 / ogg / wav)。浏览器会自动选择第一个可播放的音频源。 | ||
| markers | Array<{ time: number, label: string }> | string | ✔️ | 音频播放轨道上的标记点数组,用于展示关键时间点。示例:[{ time: 10, label: "Intro" }]。当为字符串时,通常配合 Variable Pattern 或数据表达式使用。 | |
| markersDataSource | object | 标记点的数据源配置,用于通过接口或表单实体动态获取 markers 数据。 | ||
| markersUseDataSource | bool | false | 是否启用 markersDataSource 作为标记点来源。为 true 时将忽略 markers 字段。 | |
| appearance | 'light' | 'dark' | 'light' | 播放器外观风格:light(浅色)或 dark(深色),用于适配不同背景。 | |
| autoPlay | bool | false | 是否自动播放音频。⚠️ 受浏览器策略限制,通常需要用户交互后才能生效。 | |
| loop | bool | false | 是否循环播放音频。 | |
| muted | bool | false | 是否默认静音。常与 autoPlay 一起使用以提高自动播放成功率。 | |
| showVolumeControl | bool | true | 是否显示音量调节控件。 | |
| showTrack | bool | true | 是否显示音频播放进度轨道(时间轴)。 |
所有其余 componentsProps 将会被传给组件根元素(audio)。
markersDataSource
markersDataSource只有在markersUseDataSource=true时才生效。
这时可以通过界面配置dataSource, dataFilters, sortModel等数据源相关属性。
而以下属性需要配置在 markersDataSource.componentProps.dataSource 里面方可生效。
| Name | Type | Default | 是否支持 Variable Pattern | Description |
|---|---|---|---|---|
| token | string | FormEntity token. | ||
| pbcToken | string | PBC token. | ||
| dataUrl | string | 获取数据的url。 |