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.
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.
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.
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.
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.
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.
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.
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.