Audio

To add the Audio Element, simply search for "audio" on the Elements search on your Cornerstone or any builder in Pro (Content, Header, Global Block, Footer) and drag the Audio element on the content pane.

Once you've added the element, you'll this on the settings pane:

Under Setup, you'll see Embed and Player. Let's discuss Embed first.

Audio Embed Setup

On the Embed setup, you'll see a field named Embed Code. Websites such as SoundCloud and TuneIn (just to name a few) allow you to display their audio entries to your website. So let's say you want to add this audio on SoundCloud on your website, just click the Share button:

Then click the Embed tab on the modal:

Copy the Embed code:

Then paste that code to the Audio Element's Embed Code field:

You'll then see that the audio has been added along with the designs and controls found on SoundCloud also. It's the same thing you do when embedding a Youtube video on your website, only that this one is for audio.

Note: Different websites have their own embed codes.

Lastly, you'll see the option to set the maximum width and the width of the player as well as set the margins.

Audio Player Setup

Now the second setup option is Player.

Basically, instead of using an embed code from an audio hosting website, you'll have to enter the URL of the actual audio file. If you host your audio files, whether it's in your website or on a CDN provider, this is the option you will choose.

You simply have to enter the URL of the file (e.g., example.com/audio/music.mp3) on the Sources field.

Now you'll notice that inside the parenthesis of the Sources field, there's a text that says "1 Per Line." Let me explain that.

Because there are so many devices and browsers that could be viewing your website and would want to listen to your audio file, it is recommended that you offer multiple file sources. Basically, a source is the same audio file offered in a different file format. So if you have an MP3 file format, it is recommended that you put an OGG version as well.

The purpose is that if a certain browser doesn't play one audio format (e.g., MP3), you'll have a backup format which the browser may support.

Here's how you will implement it:

Audio Controls Setup

If you select the Player setup, an additional set of options are added that allows you to customize the audio player controls. They are the following:

Controls Setup

There's a dropdown labeled Preload Content with three options:

1. None - Requests the browser not preload the audio file.

2. Audio - Requests that the browser download the audio file's metadata immediately on page load.

3. Metadata - Requests the browser to download the entire audio file, regardless of whether the user is going to play it or not.

Note: There's no 100% guarantee that the browser will follow this. Some browsers ignore this option.

You'll also see the Display & Function option with three checkboxes:

1. Advanced

2. Autoplay - When checked, the audio file will play automatically once the page is loaded.

3. Loop - If checked, the audio file will replay after it is finished.

Controls Colors

Use this group of settings to set the colors of the audio controls.

Controls Padding

Use this group of settings to set the padding of the audio controls.

Controls Border

Use this group of settings to set a border around the audio controls.

Controls Border Radius

Use this group of settings to set the curve of the audio controls border.

Controls Box Shadow

Use this group of settings to set a shadow around the audio controls box.

Time Rail Border Radius

Use this group of settings to set the curve of the time rail border. The time rail is the line which shows the time of the audio which is playing now.

Time Rail Box Shadow

Use this group of settings to add a shadow over the time rail box.

Customize

The customize section consists of controls to customize the element if you are into HTML, CSS, and Javascript.

• ID - Use this option to set an HTML ID for the element. The ID should be unique on the page.
• Class - Use this option to set an HTML Class for the element. You can use the class for your custom CSS code.
• Element CSS - Use this option to have better control over the element to access the inner tags of the element using $el as the CSS selection. Click here for more detailed information.
• Hide During Breakpoint - Use this option to hide the element on different device sizes. Click here for more information.
• Custom Attributes - Use this option to add a custom attributes to the wrapper HTML tag of the element. Such as data-info=123. You can use the option to inject custom information into the element to use on your customization code.

Demo

To see a live demo of the Audio Element click here.

Summary

In this article, you've learned how to add the Audio Element in Cornerstone or in any Builder in Pro. You've also learned the difference between the Embed and Player setup. Additionally, you've learned how to embed code from an audio-hosting website to your website using the Audio Element. Lastly, you learned how to add self-hosted audio files and how to customize how the controls look.