---
title: 视频主体突出方案 - 试听背景音乐
summary: 视频主体突出方案的试听背景音乐模块，提供 LocalMusicList 组件用于背景音乐列表展示和试听。基于 InnerAudioContext 实例实现音频控制（play/pause/stop/resume/seek），支持进度监听和手动销毁，含交互流程时序图及平台差异注意事项。
---

## 试听背景音乐

<div style="marginTop: 20px;">
<video controls width="250">
  <source src="https://images.tuyacn.com/rms-static/d2946980-0f99-11f0-9fb9-e1834df84344-1743581378584.mp4?tyName=play_bg_music.mp4" type="video/mp4">
  您的浏览器不支持视频标签
</video>
</div>

### 功能介绍

方案样例提供 `LocalMusicList` 组件，用于：

- 背景音乐列表展示
- 背景音乐试听功能

音乐试听功能基于 `InnerAudioContext` 实例实现，支持完整的音频控制能力,请参考 [详情](https://developer.tuya.com/cn/miniapp/develop/ray/api/media/audio/InnerAudioContext);

#### `InnerAudioContext` 实例核心功能

**基础控制**

- 【InnerAudioContext.paly】：播放音频
- 【InnerAudioContext.pause】：暂停音频
- 【InnerAudioContext.stop】：停止音频
- 【InnerAudioContext.resume】：恢复播放
- 【InnerAudioContext.seek】：跳转到指定时间点（单位：秒）

**事件监听**

- 【InnerAudioContext.onTimeUpdate】：实时获取播放进度更新（注：进度数据由系统返回，iOS/Android可能存在差异）

**资源管理**

- 【InnerAudioContext.destroyPlayer】：支持手动销毁音频实例（建议在组件卸载时主动销毁）

### 交互流程

```mermaid
sequenceDiagram
rect rgb(191, 223, 255)
    面板->>面板: 1.展示默认背景音乐列表并创建InnerAudioContext实例
    用户->>面板: 2.选中音乐
    面板->>InnerAudioContext: play(音频文件)
    InnerAudioContext-->>用户: 播放试听
    用户->>面板: 2.取消选中
    面板->>InnerAudioContext: pause()
    InnerAudioContext-->>用户: 停止播放
    面板->>面板: 3.用户退出面板
    面板->>InnerAudioContext: destroyPlayer()
end

rect rgb(200, 150, 255)
    Note right of 面板: 用户交互层
    Note left of InnerAudioContext: 音频播放服务
end
```

### 注意事项

- 1.单个页面建议复用同一个 `InnerAudioContext` 实例；

- 2.进度监听需考虑平台差异性；

- 3.及时销毁不再使用的实例；