Anatomy
Audio player is a container for embedding sound into a web page.
Usage
Users can play, pause, and download audio files with this component. Counters display the total duration of the file and the elapsed time of the playback. Users can adjust the volume of the playback for their device and visually track its progress.
Note: The styling of audio player is dependent upon the browser, so it’s appearance changes based on the browser rendering the component.
Configurations
Learn how to customize audio player by configuring the available properties.
Sound controls
You can configure audio player to remain silent when loaded. The clip will play, but the sound is muted. By default, the sound is on.
Playback options
You can configure audio player to start play automatically when loaded, with the sound muted or with the sound on. You can also configure the audio content to repeat automaticaly (loop) at the end. By default, autoplay, muting, and looping are disabled.
Design recommendations
Learn how to apply audio player in your design.
Keep the audio player size at a useful width.
Avoid making the audio player too large or too small. This makes it difficult for user to interact with the progress bar and volume bar .
Alignment and positioning
Place the audio player inline and in context. Provide useful information, such as person, date, and time. For better accessibility support, you can add a transcript of the audio.
