The Audio Element lets you add self-hosted audio files directly into your content. It is a simple way to include music tracks, podcast clips, spoken messages, interviews, product audio, or any other playable sound file inside a page layout.

The element uses the HTML5 audio player, making it compatible with widely used formats such as .mp3, .wav, and .m4a. Once the file is selected, you can fine-tune playback behavior and adjust the design to better suit the surrounding layout.

How To Use The Audio Element

Add the Audio Element to any column in the Builder. In the first option, choose your audio file by selecting one from the media library or uploading a new one directly.

After the file has been added, continue adjusting the remaining options to control playback and appearance. The audio player can be styled on its own, and its presentation can also be influenced by the surrounding column and layout settings.

General

Heading Description
Audio Upload an audio file.
Playback Speed Controls Enable this option to show playback speed controls in the audio player.
Loop Enable this option to have the audio restart automatically after it finishes.
Autoplay Enable this option to start playback automatically when the page loads, if the browser allows it.
Preload Choose how the audio should load when the page opens. Use None to prevent loading on page load, Auto to load the full file immediately, or Metadata to load only file information first.
Margin Set the outer spacing around the audio element using any valid CSS unit.
Element Visibility Show or hide the element on small, medium, or large screens. Multiple screen sizes can be selected at the same time.
CSS Class Add a custom class to the wrapping HTML element.
CSS ID Add a custom ID to the wrapping HTML element.

Design

Heading Description
Background Color Controls the background color of the audio player.
Controls Color Scheme Choose a light or dark control style depending on the selected background color so the player remains clearly visible.
Audio Progress Color Select the color used for the progress bar.
Maximum Width Set the maximum width of the player using any valid CSS value.
Alignment Choose how the audio element is aligned within its container.
Border Size Set the border thickness in pixels.
Border Color Controls the border color of the audio player.
Border Radius Round the corners of the player using any valid CSS unit.
Box Shadow Enable or disable a shadow around the audio player.
Box Shadow Position Set the horizontal and vertical position of the shadow. Positive values move it down and to the right, while negative values move it up and to the left.
Box Shadow Blur Radius Adjust the softness of the box shadow in pixels.
Box Shadow Spread Radius Control the overall size of the shadow. Positive values expand it, while negative values reduce it.
Box Shadow Color Choose the color used for the box shadow.

Additional

Heading Description
Conditional Rendering Add conditional logic to control whether the element is included on the page. Server-side cache may affect the result.
Animation Type Select the animation style used when the element appears.
Direction of Animation Choose the direction from which the animation enters.
Animation Color Select the color used for the animation effect.
Speed of Animation Set how fast the animation runs, in seconds.
Animation Delay Set how long the element waits before the animation begins.
Offset of Animation Control when the animation starts as the element enters view.

Example