Adding playable audio to a page of your site is easy with the Audio component. To get started, open your site in the website editor, click Add Content, then drag the component to a page of your site. Next, click on the component to open the options panel to the side of the editor.
Audio
The first section you’ll see in options is where you’ll upload your audio file. We support most common audio formats. Click on Upload, then select your file. You will then see a progress bar that shows the progress of your upload. Once completed, you’ll see the name of your file listed under the Upload button. If you want to replace the file, click on the button again and upload a new file.
Playback
We provide two controls that affect the playback of the component: Autoplay and Loop. Both are toggled off by default, so toggle either on to enable each feature individually.
Size & Position
The options in this group control the overall size and positioning of the player within the component.
- Size - By default, the player will take up the full width of the component. You can choose a different, smaller proportion with this setting. You can also set it separately for different screen sizes by clicking the desktop/mobile icon.
- Align - If you select a size other than full, you can use this option to align the player to the left, right, or center.
Design
There are two options available for you to control the styling of the component:
- Border - With this option you can control the width, style, and color of a border around the player.
- Shape - Use this option to control the shape of the border around the player.
Spacing
The options here control spacing within the component. Margin controls the space around the player within the component. Padding controls the space between the player and the border around it. Both can be set separately for different screen sizes by clicking the desktop/mobile icon.
Hover
You can control the styling of the border when hovering over the player with a mouse by clicking the Hover button at the top of the options panel.