Audio Player Shortcode

Last Updated on

Audio Player shortcode is one of the shortcodes available in The Ken theme which you can take advantage of. It allows you to add a stylish Audio Player. To see a live demo of this feature please click here.

In this article, we’ll explain how to display the Audio Player shortcode and configure the settings.

In this article


Displaying an Audio Player

To add the audio player shortcode to a page or post, follow the steps below:

1
Add or edit an existing page.
2
In the Visual Composer section, click on the + button.

Fancy Title Shortcode - visual composer section

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

Audio player shortcode - add element

4
When the shortcode is added, a new pop-up screen called Audio Player Settings will open. Configure the settings as required.

5
Click on Save Changes and publish or update the page to check the result.

Configuring the Audio Player Settings

After you add the shortcode, a pop-up window will appear which you can set options for this shortcode that you can set to fine tune your shortcode and add it to the page. Followed is a detailed description of each option for Audio Player shortcode:

Setting Description
Audio TitleUse this option to set a title for the Audio Player.
Upload MP3 file formatUse this option to upload your audio in MP3 format. You need to provide the OGG format too for cross-browser compatibility.
Upload OGG file formatUse this option to upload your audio in OGG format. You need to provide the MP3 format too for cross-browser compatibility.
For small container?Enable this option if you have small free space on the container. This option will force player controls to go below the progress indicator for the Audio Player.
Extra Class NameThis is an option which is common among most of the shortcodes. If you wish to style particular content element differently, then use this field to add a class name and then refer to it in Custom CSS settings inside Theme Settings -> Custom CSS
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket