Audio Player Shortcode

Last Updated on

Share your sound with the website audience by simply adding an audio player shortcode.

Note that if you are looking for how to create an audio post, read the creating a blog post article.

In this article

Displaying an Audio Player

To add an audio player:

Add or edit an existing page.
In Visual Composer section, Click + button.

Audio player shortcode - visual composer section

In Add Element pop-up screen, search for Audio Player and click on it to be added to the page.

Audio player shortcode - add element

When the shortcode is added, a new pop-up screen called Audio Player Settings opens. It allows you to configure the shortcode settings.

Audio player shortcode - audio player settings

Note: In order to display a functional audio player on your page, proceed to the steps below.

Configuring the Shortcode

Audio player shortcode allows you to upload audio file in two formats; MP3 and OGG. Below we explain how to upload audio file and customize the player.

Uploading an Audio File

Access the Audio Player Settings pop-up.

Audio player shortcode - audio player settings pop-up

Depending on which file format you have, click on Upload.

Audio player shortcode - upload

Select an audio file from the media library or upload a new one and click on Insert Into Post.

Audio player shortcode - insert media

Click on Save Changes, Update the page and check the result.

Audio Player Look

There are some settings in audio player settings pop-up to customize the default styling.

ThumbnailDisplays a thumbnail for the audio player.
Sound authorDisplays an author of the sound.
Player backgroundChanges the background color.

Note: The thumbnail size should be approximately 150x150px, or bigger. It will be cropped automatically to the correct size needed for the container.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket