Audio

The Audio Element has two types of setups, namely Embed and Player. In this article, we'll discuss both setups, and when each setup should be used over the other.

  1. Audio Embed Setup
  2. Audio Player Setup
  3. Audio Controls Setup
  4. Customize
  5. Demo
  6. Summary

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.

Audio Element

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

Audio Element Inspector

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:

Soundcloud Example

Then click the Embed tab on the modal:

Soundcloud Embed

Copy the Embed code:

Soundcloud Embed Code

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

Audio Element Setup Embed Code

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.

Audio Embed Example

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 Setup Width & Max Width

Audio Player Setup

Now the second setup option is Player.

Audio Setup 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.

Audio Setup Player Source

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 Setup Player Source

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

Audio 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:

Audio Display & Function
  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.

Audio Controls Colors

Controls Padding

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

Audio Controls Padding

Controls Border

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

Audio Controls Border

Controls Border Radius

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

Audio Controls Border Radius

Controls Box Shadow

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

Audio Controls Box Shadow

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.

Audio Time Rail Border Radius

Time Rail Box Shadow

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

Audio Time Rail Border

Customize

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

Audio Customize
  • 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.
Custom Attributes

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.

See something inaccurate? Let us know