#Preview Background Music

#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;

#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

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.