The Audio module allows you to embed an audio file onto your web page, from a URL or from a local drive.
Before we begin: Have you checked out the Focus feature? Focus saves you time and effort by putting together some of the most common page sections, like About Us, price table, quote box, five styles of content layout and much more. It’s all customizable, so you can tweak it to your liking.
There is no specific Audio Focus, but the Video Focus can be easily customized to showcase your audio selection in place of the video.
Here’s how to add an audio module to your page.
Step 1: Open the target page
In the website builder, open the page of your site that you want to add audio to.
Step 2: Open the Modules tab
In the left sidebar menu, click on Modules:
Step 3: Locate the audio module icon
In the Modules sidebar, you will see the Audio module icon.
Step 4: Click and drag the audio module icon onto your page
Point your mouse at the audio module, click and drag it onto your page to where you want the audio player to be located. Then drop it.
As you drag it around the page, you will see black lines appear, indicating the edges of the existing elements on the page. Use these lines as guides help you drop your audio module in the right place. You can add spacers or other elements later to adjust its position if desired.
For this example, we will add an audio module to the Projects page in the Nathan Clark template, between the sample projects in the template.
Below you can see the audio module before it was dropped, hovering over the page. The black line indicates the top edge of the spacer element. If the audio module is dropped now, it will insert directly above the spacer.
Step 5: Link to your audio content
Your new audio module is added to your page. The source window will open. You can either link to the audio’s URL, for example, on Soundcloud, or you can click the Browse button to add a file you’ve previously uploaded to My Drive.
For this example, we entered the URL of a song on Soundcloud, and then clicked Save.
Step 6: Audio module formatting options bar
Click anywhere on the audio module to open the options bar beneath it. If you want to move or remove the audio module, click the thick black grab bar in the center top, and then drag it.
Here’s a closer look at the options bar:
Here’s a brief description of each of these options:
Clicking this icon opens the audio source box:
Enter the URL of your audio clip or click the Browse button to use an audio file that you have stored in My Drive.
Padding is the amount of white space around your audio module.
Your padding options are: None, Small, Medium or Large.
Step 7: Saving the changes
Once you have finished with your audio module, remember to click the Save button at the bottom center of the modules sidebar to save and protect your changes.
This concludes our guide How to add audio with the audio module.
Other guides you might be interested in:
Adding Focus to your Bookmark Website
How do I move or re-size modules that are already on my page?
How do I remove a module from my page?
Ask An Expert: Get sound advice from our community, ask questions and get answers quickly and easily.
Bookmark Pro: Members get premium support from our dedicated success team - Chat with us one-on-one by clicking the chat icon inside Bookmark.