Audio Player Shortcode

Updated on November 23, 2017

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.

Displaying an Audio Player

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

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

Fancy Title Shortcode - visual composer section

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

Audio player shortcode - add element

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

5Click 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 Title Use this option to set a title for the Audio Player.
Upload MP3 file format Use this option to upload your audio in MP3 format. You need to provide the OGG format too for cross-browser compatibility.
Upload OGG file format Use 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 Name This 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
Did this answer your question?