With the help of the “Audio” element you can easily add audio files, such as a custom audio file, or songs from SoundCloud/Spotify to your page.

In order to use the “Audio” element, you have to add it to the page. Click on the plus sign from the right sidebar to open the list of elements.

Look for the “Audio” element and when you found it, drag & drop it to the desired place on the page:

Once, the element is added to the page, you will see the options you can use to customize it, in the left sidebar. The first step is to select the source you want to add the audio file from, then add the file and use the options to customize it.

Note: Please keep in mind that if you have previously set up an "Audio" type of custom field, using the "Advanced Custom Fields" plugin, and you have assigned an audio file as its value for the page you are editing, then you will have the possibility to use that custom field with this "Audio" element.

In such cases the section with the "Element Type" options will be the first one from the "Main Options" of the "Audio" element:

Here, if you choose "Dynamic", you will be able to use the audio file that you have chosen when setting up the custom audio field.

If you need more information about this, make sure to check out this article, which provides more in-depth details about setting up an "Audio" type of custom field for an "Audio" element.

Keep in mind that the section with the "Element Type" options will be available only if you have followed the steps presented here, in order to set up the custom fields.

If you want to add a custom audio file, make sure the “Custom” option is selected from the “Source” field drop down. This is also the default setting that will appear after you add the “Audio” element:

Then, click on the “Choose audio” button to open the Media Library you can choose the file from:

After the Media Library is opened, look for the audio file you want to add to the page. When you find it, click on it to select it and then click on the “Insert into post” button to add it to the page:

Note: If you do not have any audio files added to your library yet, then you will have to upload the file first, using the “Upload Files” option from the Media Library.

After you insert the file, you will see it displayed in the “Audio” element on the page.

If you want to change the file that you have previously uploaded to this element, simply click on the "Change" option (two arrows icon) next to it:

This will open the Media Library again and you can choose another file, instead of the one that is currently displayed on the page.

There are three further options that you can use, after adding your custom audio file. In order to use these, first click on the “Advanced” tab from the “Main Options” section:

This will open a drop down with the available options (the “Autoplay”, the “Loop” and the "Allow Users to Download" options):

In order to activate either of these options, you just have to click on the checkbox next to them.

In order to add an audio file from SoundCloud, click on the field from the “Source” section:

Then choose “SoundCloud” from the drop-down that opens:

Once you have selected “SoundCloud”, you will have to paste in the link of the SoundCloud audio file in the URL field that appeared:

Tip: You can get the URL needed here, if you click on the “Share” option of the song you want to add from SoundCloud. Then, a pop-up will be opened and you can copy the URL from it.

After you insert the URL in the field, the SoundCloud audio will be displayed on your page.

If you click on the “Advanced” tab, a drop-down will be opened with three other options that you can use when adding a SoundCloud audio file to your page:

All you have to do to use these options is to check the checkbox next to them.

You can easily add an audio from Spotify doing the following:

First, click on the field with the current source from the “Source” section:

Then select “Spotify” from the drop down list that appears:

The "URL" section will appear. Complete the field from the URL section with the link of the Spotify song you want to add to your page:

Tip: In order to get the necessary URL, click on the “More” options (three dots icon) when viewing the Spotify song and then, on the “Copy link” option.

That’s it! Once you have inserted the URL in the appropriate field, the Spotify audio will be displayed on your page.

Note: If the visitor, who views the "Audio element" with the Spotify audio in it, is logged in to Spotify in the same browser, then, he/she will be able to listen to the whole audio file from the element.

However, if he/she is not logged in to Spotify, then, only a preview of the audio file will be available in the element and the visitor will have to log in to Spotify, to be able to listen to the whole audio.

After you are done with adding the “Audio” element to your page, you can save the page and preview it, to see how the audio will be displayed for the visitors of your website and how they can listen to it.

In order to do this, first click on the green “Save Work” option from the bottom left part of the editor to save the changes you have:

After that, use the “Preview” button from the bottom center part of the editor to see how the "Audio" element is displayed on your page:

This is an example of how the three different audio files will look like on your page:

If you are interested in other ways of using the"Audio" element, check out this blog post about displaying podcast episodes on your website with the help of this element.

If you want to find out more about how the other Thrive Architect elements work, please consult our knowledge base.

Hopefully, this article was useful for you. If so, please give it a smile below :)