How to use the MP3 Music Player Plugin + Shortcodes


This video will teach you how to use the plugin in 7 quick chapters:
1) 00:12 Install the Plugin
2) 00:32 Create a Playlist & Uploads Tracks
3) 03:44 Add Player using Shortcode
4) 06:57 Add Player using Elementor
5) 10:41 Add Player using Gutenburg
6) 11:27 Customize Color & Settings
7) 12:57 Difference between Free vs Pro


There are multiple ways to display the player on a page.

1) Elementor : MP3 Music Player Widget

If you use Elementor Page Builder, you can use Elementor Widget called Sonaar MP3 Music Player. We have developed a custom Elementor widget called Sonaar MP3 Music Player that you can find in the Elementor Widget panel. That is the best recommend way to use our player. You can learn more and download Elementor here

2) Elementor : Button Widget

If you use MP3 Audio Pro & Elementor, you can also use the native Elementor Button widget to launch the sticky audio player:

3) Gutenburg Block

Use Gutenburg block editor. The gutenburg block is called MP3 Player by Sonaar. The Pro version adds all the styling options you need to customize the look and feel of your player without any custom CSS code.

4) Shortcode

Use Shortcode with attributes.

An easy way to display the audio player on your website is by using a shortcode. Add or edit any page or post where you would like to add a player. To generate the shortcode, make sure you are using the classic editor and click the music note icon.

If you have previously created a playlist post in WP-Admin > MP3 Player > Add Playlist, select 'Predefined playlist' in the Playlist type dropdown then select the playlist you want to assign to the player along with some attributes and click Insert Shortcode.

Once the shortcode has been generated, you can always change the attributes directly in the shortcode text without having to generate a new shortcode. For example, if you want to show the playlist, use show_playlist="true". If you want to remove the soundwave timeline, set hide_timeline="true".

For a complete list of shortcode attributes available, see the Shortcode attribute sections below. 

There is also a more advanced way to quickly add a player without having to create a playlist. That is good to know if you want to build a player with your own dynamic shortcode or build something more complex. To built a playlist on-the-fly, select Audio URL Inputs (Advanced) in the Playlist type dropdown (see screenshot: https://d.pr/i/iLjqnz) You will have the ability to add mutliple audio URLs with their track titles directly in the shortcode. Just remember to separates the URL or track titles by || character which is used as a delimiter.

Main Shortcode: 

[sonaar_audioplayer albums="YOUR_PLAYLIST_ID"]

Shortcode Attributes:

albums The Post ID of your playlist post you want to assign to the player. Value: IDs separated by a comma. To find out your album ID, see screenshot: https://d.pr/i/KH79f2
play-latest When set to true, the player will automatically takes the latest published playlist posts in WP-Admin > MP3 Player > All Playlists. Value: true or false
feed Set audio URLs delimited by || character. Eg: feed="https://yourdomain.com/01.mp3 || https://yourdomain.com/02.mp3"  --  See this article for supported streaming providers. ACF supported
feed_title If you have used the feed attribute, you will want to use feed_title to set your track title names. Delimited by || character. Eg: feed_title="Track 01 || Track 02" . ACF supported
feed_img If you have used the feed attribute, you might want to set unique audio image URLs for each of your tracks. Delimited by || character. ACF supported
show_playlist Display the tracklist or not. Value: true or false
display_control_artwork Display play buttons in the playlist artwork image. Value: true or false.
hide_artwork Hide your album cover. Value: true or false
hide_timeline Remove progress bar and controls. Value: true or false
hide_control_under Remove controls but keep progress bar. Value: true or false
hide_progress [PRO] Remove progress bar, keep controls. Value: true or false
hide_times [PRO] Remove time and durations beside the progress bar. Value: true or false
hide_track_title [PRO] Remove Track Title above the Soundwave Bar. Value: true or false
progressbar_inline [PRO] Display Prev/Play/Next button inline with the progress bar. Value: true or false
show_track_market Display your track’s store icons beside each of your track. Value: true or false
show_album_market Display your playlist’s store icons below your playlist. Value: true or false
store_title_text Change Available Now by any string. Value: String. Default: “Available Now”
wave_color Specify the color of your waveform to bypass the plugin setting’s color: Value. hexa color.
wave_progress_color Specify the color of your progress bar over your waveform to bypass the plugin setting’s color. Value: hexa color.
titletag_playlist Heading tag above the playlist for SEO purpose. Value: h1, h2, h3, h4, h5, h6, div, span, p
titletag_soundwave Heading tag of the title above the soundwave for SEO purpose. Value: h1, h2, h3, h4, h5, h6, div, span, p
sticky_player [PRO] Enable sticky player. Value: true or false
track_artwork [PRO] Display thumbnail images beside each of your track in the playlist. Value: true or false
scrollbar [PRO] Enable scrollbar within tracklist. Value: true or false
shuffle [PRO] Enable shuffle. Value: true or false
notrackskip [PRO] If set to true, player will stop when current track has completed to prevent play next track automatically. Value: true or false. Default false.

A final example would be something like this:

[sonaar_audioplayer albums="6" sticky_player="true" hide_artwork="false" show_playlist="true" show_track_market="true" show_album_market="true" wave_color="#000000" wave_progress_color="#CCCCCC"][/sonaar_audioplayer]

5) Using Javascript

You can use some javascript code to call the STICKY Footer player and its functions. The code below only belong to the STICKY player.

IRON.sonaar.player.setPlayerAndPlay({ id:"1218"})
IRON.sonaar.player.setPlayerAndPlay({ id:"1218", trackid:"0"})

Where id is the post ID of your playlist post type you want to play. To find out your post ID, see screenshot: https://d.pr/i/KH79f2

Where trackid:"0" would be the first track of the playlist, trackid:"1" the second track, trackid:"2" the third track.

Here is a list of all attributes parameters: "id", "trackid", "shuffle","soundwave" and "notrackskip".


If you want to trigger click on the NON sticky player (aka free player), you can use this JS code:

jQuery('[data-albums="75"]').find('li:nth-child(2) .audio-track').trigger( "click" );


To manage the color and font settings, go to WP-Admin > MP3 Player > Settings.


The player's layouts you see in the examples of our demo page is a Sonaar's pro feature and are styled with Elementor. You must use Elementor in order to skin them exactly like this along with our Pro Version. Elementor plugin is free.

To use the same design than in our examples:

1. Make sure Elementor Page Builder plugin is installed and activated. To install it, go to WP-Admin > Plugins > Add New and search for Elementor.

2. Go to Templates > Saved Templates and click the Import Templates button. See screenshot: https://d.pr/i/saZbBO

3. Import the file called "elementor-templates-for-mp3-audio-player-pro.zip". You can download it here

4. Your imported template will now be displayed in your Templates list.

5. To use and insert templates into the page builder, read this article from Elementor Documentation: https://docs.elementor.com/article/60-library