AudioPlayer 音频播放器
xy-audio-player 用来承接语音播报、录音回放和轻量音频内容展示。
基础用法
适合在详情页、工单面板和消息回放区内直接展示音频内容。
0s0s
音量
带元信息的音频卡片
track 可以统一承接封面、标题、作者和音源，适合消息回放和媒体详情卡片。
0s0s
音量
外部控制与切换音源
通过 expose 和响应式 track，可以把播放器接进播放列表、录音切换和外部音量控制场景。
外部音量
0s0s
音量
质检回放台
这个场景更接近后台语音质检、客服录音回放和回访记录核对的真实布局。
语音质检回放台
录音列表
0s0s
音量
质检备注
情绪波动需要回访
建议重点复核第 18 秒到第 35 秒的沟通内容，确认是否需要补充解释说明。
与增强层组合
在详情链路里，更常见的接法是把 AudioPlayer 放进 DetailPage 的某个业务 section 中承接回放。
售后工单详情
DetailPage 负责承接详情结构，AudioPlayer 放在业务 section 里承接录音回放。
基础信息
工单编号
A-2048
客户
杭州云仓
当前状态
待复核
负责人
小叶
沟通录音
把 AudioPlayer 直接放进 DetailPage 的 section 中。
0s0s
音量
重点复核 18s-35s疑似承诺超时补发
操作日志
提交录音复核
与 DetailPage 组合
当录音回放进入正式详情页时，通常由 DetailPage 承接摘要、附件和日志，AudioPlayer 负责播放区。
客服回访详情
DetailPage 负责详情页骨架，AudioPlayer 负责录音回放能力。
回访摘要
客户
深圳南山门店
责任人
客服一组
问题类型
售后咨询
当前状态
待复核
录音回放
0s0s
音量
操作日志
提交复核
使用约定
src适合单个音源；需要同时带标题、作者、封面时优先使用track。- 当前组件不内置播放列表，只承接单条音轨播放；列表切换由外部更换
track或src。 volume使用0 ~ 1的浮点值；playbackRates用来定义右上角倍速切换序列。- 需要与外部页面状态联动时，优先监听
play / pause / end / time-update / update:volume。
API
AudioPlayerTrack
| 字段 | 说明 | 类型 |
|---|---|---|
src | 音频源地址，支持单个或多个候选源 | string | string[] |
title | 音频标题 | string |
artist | 作者或播报来源 | string |
cover | 封面图地址 | string |
AudioPlayer Attributes
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
src | 音频源地址 | AudioPlayerTrack["src"] | — |
track | 带元信息的音轨对象，优先级高于 src / title / artist | AudioPlayerTrack | — |
title | 音频标题 | string | '' |
artist | 作者或来源说明 | string | '' |
autoplay | 是否自动播放 | boolean | false |
loop | 是否循环播放 | boolean | false |
muted | 是否静音 | boolean | false |
volume | 当前音量，范围 0 ~ 1 | number | 1 |
playback-rates | 倍速切换序列 | number[] | [0.75, 1, 1.25, 1.5, 2] |
AudioPlayer Events
| 事件 | 说明 | 参数 |
|---|---|---|
init | 音频实例初始化后触发 | AudioPlayerHowlHandler |
ready | 音频加载完成后触发 | AudioPlayerHowlHandler |
play | 开始播放时触发 | AudioPlayerStateChangeHandler |
pause | 暂停播放时触发 | AudioPlayerStateChangeHandler |
end | 播放结束时触发 | AudioPlayerStateChangeHandler |
update:volume | 内部音量变化时触发 | AudioPlayerVolumeUpdateHandler |
time-update | 播放进度更新时触发 | AudioPlayerTimeUpdateHandler |
AudioPlayer Exposes
| 暴露项 | 说明 | 类型 |
|---|---|---|
howl | 当前 Howler 实例引用 | AudioPlayerInstance["howl"] |
play | 开始播放 | AudioPlayerInstance["play"] |
pause | 暂停播放 | AudioPlayerInstance["pause"] |
stop | 停止播放并回到起点 | AudioPlayerInstance["stop"] |
seek | 跳转到指定秒数 | AudioPlayerInstance["seek"] |
setVolume | 设置音量 | AudioPlayerInstance["setVolume"] |