## Preview Background Music

<div style="marginTop: 20px;">
<video controls width="250">
  <source src="https://images.tuyacn.com/rms-static/bc4e3970-0fd1-11f0-9fb9-e1834df84344-1743605393031.mp4?tyName=play_bg_music.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
</div>

### Function Introduction

The solution sample provides the `LocalMusicList` component for:

- Displaying the list of background music
- Background music preview functionality

The music preview function is implemented based on the `InnerAudioContext` instance, supporting complete audio control capabilities. Please refer to the [details](https://developer.tuya.com/en/miniapp/develop/ray/api/media/audio/InnerAudioContext);

#### Core Functions of the `InnerAudioContext` Instance

**Basic Control**

- [InnerAudioContext.play]: Play audio
- [InnerAudioContext.pause]: Pause audio
- [InnerAudioContext.stop]: Stop audio
- [InnerAudioContext.resume]: Resume playback
- [InnerAudioContext.seek]: Jump to a specified time point (unit: seconds)

**Event Listening**

- [InnerAudioContext.onTimeUpdate]: Real-time updates of playback progress (Note: Progress data is returned by the system, and there may be differences between iOS/Android)

**Resource Management**

- [InnerAudioContext.destroyPlayer]: Supports manually destroying the audio instance (it is recommended to actively destroy it when the component is unmounted)

### Interaction Process

```mermaid
sequenceDiagram
rect rgb(191, 223, 255)
    Panel->>Panel: 1. Display default background music list and create InnerAudioContext instance
    User->>Panel: 2. Select music
    Panel->>InnerAudioContext: play(audio file)
    InnerAudioContext-->>User: Play preview
    User->>Panel: 2. Deselect
    Panel->>InnerAudioContext: pause()
    InnerAudioContext-->>User: Stop playback
    Panel->>Panel: 3. User exits panel
    Panel->>InnerAudioContext: destroyPlayer()
end

rect rgb(200, 150, 255)
    Note right of Panel: User Interaction Layer
    Note left of InnerAudioContext: Audio Playback Service
end
```

### Considerations

- 1. It is recommended to reuse the same `InnerAudioContext` instance on a single page.

- 2. Consider platform differences in progress monitoring.

- 3. Destroy instances that are no longer in use promptly.