6. Audio

Learn to add and customize audio on your webpage using the audio element feature, allowing use of SoundCloud or custom audio files. Modify settings for time, duration, progress, volume, and aesthetics as per your preference.


Adding an audio element to your website can add a unique layer of engagement for your visitors, whether it's a background track, podcast episode, or audio version of your blog. This guide will walk you through the process of adding audio to your webpage with the audio element feature.

You can source your audio from SoundCloud or use a custom audio file. To add the audio element, navigate to the 'Add elements' option, go to 'Media,' and then drag and drop the audio file to your desired location on the page. The system is set by default to work with SoundCloud. To customize your audio file, click on it and then on the audio icon in the options toolbar.

From here, you can select between SoundCloud and 'Custom.' The latter allows you to upload a file of your choice. You can also adjust the audio icons and enable the loop option. Adding a custom cover or thumbnail for your audio further personalizes your content. Under 'Advanced,' you can select options like time, duration, progress, and volume, depending on what you want to display.

For larger audio files, you can use the 'Audio' option under SoundCloud, which allows you to bring in the necessary link by sharing it on SoundCloud. You can choose from two styles—a longer bar or a thumbnail view—and also have the option to enable auto-play. The 'Advanced' settings offer a range of options you can deselect if you prefer not to display them with the SoundCloud option.

Beyond audio-specific settings, you can also alter the width of the audio element on a percentage or pixel basis. This adjustment can be made directly by clicking on the element and dragging the handlebars to your desired size. For a centered audio element, you can adjust the alignment or keep it at 100% for full-width.

The final touches to your audio element include adjustments for padding, margins, and adding a corner effect if desired. Entrance and scroll animations can also be set, giving your website an added visual appeal. By following these steps, you can effectively enrich your website's visitor experience with the power of sound.

👆 You’re all caught up