Links

Audio Player

The Audio Player is also available as an Experience Cloud Component.

Overview

The Audio Player component is a flexible and robust element for incorporating audio content. This component offers numerous customizable properties, enabling you to precisely control audio sources, playback options, volume settings, visual appearance, and more. Below is a detailed overview of each property.

Component Properties

Name
Description

Source

This property sets the audio content to be played. It can take the URL of an audio file, or users have the option to upload an audio file directly.

Autoplay

When the Autoplay property is enabled, the audio content will automatically begin to play as soon as it's loaded. It's crucial to bear in mind that the audio will start automatically, so it should be used considerately to ensure a user-friendly experience.

Volume

The Volume property adjusts the audio level of the player. It takes a number between 0 (mute) and 100 (maximum volume), giving users control over the audio loudness to fit their environments and preferences.

Hide Controls

Activating the Hide Controls property will make the audio controls invisible. This creates a clean listening experience, particularly useful when the audio is designed to autoplay and/or loop, and user interaction is not required.

Loop

The Loop property, when enabled, causes the audio content to start over from the beginning once it's finished. This can be ideal for sound loops, background audio, or any situation where continuous audio playback is desired.

Playback Rate

The Playback Rate property adjusts the speed of the audio playback. Values can be set to 0.5 (half speed), 1 (normal speed, default), or 2 (double speed), enabling users to adjust their listening pace according to their needs.

Style Panel

The Style Panel property allows visual customization of the audio player's dimensions. Users can modify the height and width of the player to fit perfectly into different design layouts and user interfaces.
Last modified 3mo ago