fbpx
MP3 Audio Player
Documentation
Search for articles about the Audio Player and WordPress Theme

Add Audio Player with Shortcode

An easy way to display or control the audio player on your website is by using a shortcode.

First, you will need to create a playlist post that will contain your audio. Create a playlist post in WP-Admin > MP3 Player.

We have different shortcodes with many attributes for each of them.

Player Widget Shortcode #

[sonaar_audioplayer]

This is our main shortcode. It’s used to display an audio player on your page. To add this shortcode, whether you manually copy/paste it into your text content, or generate it with our shortcode generator tool. 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 ), select ‘Predefined playlist‘ in the dropdown, then select the playlist you want.

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”.

Shortcode Attributes

AttributeDescription
player_layoutChoose the player layout. Value: skin_float_tracklistskin_boxed_tracklist or skin_button
Default is skin_float_tracklist. eg: player_layout="skin_boxed_tracklist"
albumsThe Post ID of your playlist post you want to assign to the player. Value: IDs separated by a comma or “all” for all posts. To find out your album ID, see screenshot: https://d.pr/i/KH79f2 eg: albums="55" or albums="all"
category[STARTER PLAN] Specify the category ID of your post category. Value: category IDs separated by a comma or ‘all’ for all posts. eg: category="57, 60" or category="all"
adaptive_colors[STARTER PLAN] Automatically match the skin of the audio player with your image artwork in real-time. Accepted value must be 1, 2, 3, 4 or random eg: adaptive_colors="1"
Try different number to find the best fit!
In addition, you can use adaptive_colors_freeze="true" to lock the skin colors to the first loaded image. This prevents the color palette to change every time you switch to another track.
show_playlistDisplay the tracklist or not. Value: true or false. eg: show_playlist="true"
tracklist_layoutIf show_playlist is true, you can display track items in a grid format instead of a list format. Value: list or grid. eg: tracklist_layout="grid"
grid_column_number[STARTER PLAN] If tracklist_layout is set to grid format, set the number of columns for desktop, tablet and mobile. eg: grid_column_number="4,3,2"
This will display 4 columns on desktop, 3 columns on tablet and 2 columns on mobile.
artist_wrap[STARTER PLAN] When using a tracklist, display the Artist Name below Track Title by using artist_wrap="true"
searchbar[BUSINESS PLAN] Add a search bar directly within your tracklist. Make sure show_playlist=”true” is set. Value: true or false. Default: false.
eg: searchbar="true"
A specific shortcode to display a search bar is also available. See below.
audio_meta_field[STARTER PLAN] If you are using a custom field for your audio URL (eg: you are using JetEngine, ACF, Metabox, etc…), specify the metakey ID of your audio URL. eg: audio_meta_field="my_audio_url_metakey_id"
repeater_meta_field[STARTER PLAN] If you are using a dynamic repeater group to generate multiple tracks in a post, specify the metakey ID of your repeater group. You must also use audio_meta_field attribute to specify your audio URL (see above). eg: repeater_meta_field="my_repeater_group_metakey_id" audio_meta_field="my_audio_url_metakey_id"
feedSet audio URLs delimited by || character. Eg: feed="https://yourdomain.com/01.mp3 || https://yourdomain.com/02.mp3"  -–  See this article for supported streaming providers.
feed_titleIf 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="Title 01 || Title 02"
feed_imgIf you have used the feed attribute, you may want to use feed_img to set your image covers. Delimited by || character. Eg: feed_img="https://yourdomain.com/img1.jpg || https://yourdomain.com/img2.jpg"
posts_per_page[STARTER PLAN] Specify the number of posts to load in the player. If you have 2 tracks per post and set the value to 5, it will show 10 tracks total. Remember that this value is the number of playlist posts, and not the number of tracks. Value: integer. eg: posts_per_page="5"
play-latestWhen set to true, the player will automatically take the latest published playlist posts in WP-Admin > MP3 Player > All Playlists. Value: true or false. eg: play-latest="true"
display_control_artworkDisplay play buttons in the playlist artwork image. Value: true or false. eg: display_control_artwork="true"
hide_artworkHide your album cover image. Value: true or false. eg: hide_artwork="true"
hide_timelineFor Floated Layout only. Remove the progress bar and controls. Value: true or false. eg: hide_timeline="true"
hide_progressbar[STARTER PLAN] Remove the progress bar, and keep controls. Value: true or false. eg: hide_progressbar="true"
hide_control_underRemove controls but keep the progress bar. Value: true or false. eg: hide_control_under="true"
reverse_tracklist[STARTER PLAN] Reverse the tracklist order. eg: reverse_tracklist=”true”. Value: true or false. eg: reverse_tracklist="true"
hide_times[STARTER PLAN] Remove time and durations beside the progress bar. Value: true or false. eg: hide_times="true"
hide_album_title[STARTER PLAN] Remove the album title in the TRACKLIST. Apply only to Floated Players. Value true or false. eg: hide_album_title="true"
hide_player_title[STARTER PLAN] Remove album title ABOVE the Soundwave Bar in the player. Value true or false. eg: hide_player_title="true"
hide_track_title[STARTER PLAN] Remove Track Title above the Soundwave Bar. Value: true or false. eg: hide_track_title="true"
progressbar_inline[STARTER PLAN] Display Prev/Play/Next button inline with the progress bar. Value: true or false. eg: progressbar_inline="true"
show_meta_duration[STARTER PLAN] we will calculate the sum of each track’s duration and will display the total amount of duration in the player. Value: true or false. eg: show_meta_duration="true"
show_publish_date[STARTER PLAN] We will display the published date of the current Playlist/Episode that is being played within the player. Value: true or false. eg: show_publish_date="true"
show_tracks_count[STARTER PLAN] Sometimes it’s useful to let your visitor knows how many tracks contain the playlist. We will show this label in the player. Value: true or false. eg: show_tracks_count="true"
show_skip_bt[STARTER PLAN] A listener just missed something in your track? Add a 15 seconds backward button so he can quickly catch up. Same thing if he wants to quickly skip a segment or two. Value: true or false. eg: show_skip_bt="true"
show_shuffle_bt[STARTER PLAN] Allow the ability to shuffle the tracks randomly within the Playlist. Value: true or false. eg: show_shuffle_bt="true"
show_speed_bt[STARTER PLAN] A speed rate button gives your user the ability to change the playback speed from 0.5x, 1x, 1.2x, 1.5x, and 2x. Value: true or false. eg: show_speed_bt="true"
show_volume_bt[STARTER PLAN] We will add a volume control in the player so the user may adjust the volume level. The volume level is retained in its browser session. Value: true or false. eg: show_volume_bt="true"
strip_html_track_desc[STARTER PLAN] We will remove HTML tags in your track description to prevent unwanted styling. Value: true or false. eg: strip_html_track_desc="true"
track_desc_lenght[STARTER PLAN] Specify the number of words a track description can contain. We will display […] once it reaches this max amount. Value: integer. Default is 55. eg: track_desc_lenght="55"
hide_trackdesc[STARTER PLAN] We will hide the description in the tracklist but we will keep an info icon so people can reach it. Value: true or false. eg: hide_trackdesc="true"
show_cat_description[STARTER PLAN] We will show the category description set in MP3 Player > Podcast Show. Apply to Podcast only. Value: true or false. eg: show_cat_description="true"
album_store_position[STARTER PLAN] Apply to the boxed player only. Show external link buttons directly in the boxed player instead of below the playlist. Value: “top”. eg: album_store_position="top"
show_track_marketDisplay your track’s call-to-action buttons (aka CTA) beside each of your tracks. Value: true or false. eg: show_track_market="true"
track_market_inline[STARTER PLAN] Show the CTA without the 3 dots hover. Default: False. Value: true or false. eg: track_market_inline="true"
show_album_marketDisplay your playlist’s store icons below your playlist. Value: true or false. eg: show_album_market="true"
store_title_textChange Available Now by any string. Value: String. Default: “Available Now”. eg: store_title_text="Listen On"
wave_colorSpecify the color of your waveform to bypass the plugin setting’s color. Value: hexa color. eg: wave_color="#E81538"
wave_progress_colorSpecify the color of your progress bar over your waveform to bypass the plugin setting’s color. Value: hexa color. eg: wave_progress_color="#FFBCC6"
use_play_label_with_icon[STARTER PLAN] Show textual “play” label along with a play icon for your play button. Apply only to the boxed and button layout. eg: use_play_label_with_icon="true"
hide_play_icon[STARTER PLAN] Remove the Play Icon and keep the textual “play” label only. eg.: hide_play_icon="true"
play_text[STARTER PLAN] Set the textual “play” string. Apply only to the boxed and button layout. eg: play_text="Play The Track Now"
pause_text[STARTER PLAN] Set the textual “pause” string. Apply only to the boxed and button layout. eg: pause_text="Pause Current Track"
play_bt_text_colorSet textual play label color. Apply only to the boxed and button layout. Value: hexa color. eg: play_bt_text_color="#FFFFFF"
play_bt_bg_colorSet textual play label background color. Apply only to the boxed and button layout. Value: hexa color. eg: play_bt_bg_color="#000000"
titletag_playlistHeading tag above the playlist for SEO purposes. Value: h1, h2, h3, h4, h5, h6, div, span, p. eg: titletag_playlist="h3"
titletag_soundwaveHeading tag of the title above the soundwave for SEO purposes. Value: h1, h2, h3, h4, h5, h6, div, span, p. eg: titletag_soundwave="h4"
sticky_player[STARTER PLAN] Enable sticky player. Value: true or false. eg: sticky_player="true"
track_artwork[STARTER PLAN] Display thumbnail images beside each of your tracks in the playlist. Value: true or false. eg: track_artwork="true"
scrollbar[STARTER PLAN] Enable scrollbar within tracklist. Value: true or false. eg: scrollbar="true"
tracks_per_page[BUSINESS PLAN] Add pagination to your tracklist. The value represents the number of tracks per page. eg: tracks_per_page="5"
shuffle[STARTER PLAN] Enable shuffle. Value: true or false. eg: shuffle="true"
notrackskip[STARTER PLAN] If set to true, the player will stop when the current track has been completed to prevent playing the next track automatically. Value: true or false. Default false. eg: notrackskip="true"
no_loop_tracklist[STARTER PLAN] If set to true, the player will stop when the current playlist has been completed preventing the playlist to restart automatically. Value: true or false. Default false. eg: no_loop_tracklist="true"
inlineSet multiple players on the same row according to the space available. Value: true or false. eg: inline="true"
idOptional attribute used to set unique ID so we can target this player for the sonaar_ts shortcode. View shortcode sonaar_ts below for usage. Value: Alphanumeric value, no special character, no space. eg: id="my_featured_player".
Add custom fields columns to your tracklistDescription
custom_fields_columns[BUSINESS PLAN] To add a custom field column(s) to your tracklist, use this attribute. Eg:
custom_fields_columns="My Column Heading::playlist-cat::100px"

This example displays the playlist categories using meta-key ‘playlist-cat’, assigned to each of your tracks in the tracklist. The column heading label is “My Column Heading”, and the column size will be 100px. As you see, there are 3 arguments to pass and they are separated by ::

Multiple columns:
To display multiple columns, separate your arguments by a semicolon (;) eg:
custom_fields_columns="Category::playlist-cat::100px;Artist Name::srmp3_cf_artist::100px"

This will display 2 values in the tracklist. The first one will be your playlist categories, and the second one will display your track’s artist name. As you can see, they are separated by a semicolon (;).

Supported metakey:
Any custom field’s metakey should work (created within ACF, JetEngine, Metabox, etc.). In addition, we have predefined metakey available which are:
srmp3_cf_album_img : Track image
srmp3_cf_length : Track duration
srmp3_cf_audio_title : Track title
srmp3_cf_artist : Track artist name
post_title : Playlist/Episode post title
post_id : Playlist/Episode id
post_date : Playlist/Episode published date
post_modified : Playlist/Episode modified date
playlist-cat : Playlist/Episode categories
podcast-show : Podcast show categories
product_cat : Product categories
product_tag : Product tags
post_tags : Post tags

Things to know:
* We automatically hide columns (starting with the last one) if the tracklist doesn’t have enough space. Make sure the tracklist is wide enough to contain all your columns. On mobile devices, we won’t display custom fields because we don’t have enough space.
custom_fields_headingDisplay column heading or not. Default true. Value: true or false.
eg: custom_fields_heading="false"

Use audio URL instead of creating playlist:

There is also a more advanced way to add a player without having to create a playlist and by specifying the audio source URL directly. To build a playlist on the fly without creating a playlist, select Audio URL Inputs (Advanced) in the Playlist type dropdown (see screenshot: https://d.pr/i/iLjqnz) You will have the ability to add multiple audio URLs with their track titles directly in the shortcode. Just remember to separate the URL or track titles by || character which is used as a delimiter. See the feed attribute above to learn more.

If you want to build something dynamic with custom fields, see our audio_meta_key attributes above.

Example of Shortcode

Example 001

album-art

Look at bottom of the screen for Karaoke Lyrics
Sorry, no results.
Please try another keyword
[sonaar_audioplayer albums="6" sticky_player="true" hide_artwork="false" show_playlist="true" show_track_market="true" show_album_market="false" wave_color="#000000" wave_progress_color="#CCCCCC"][/sonaar_audioplayer]

Example 002

[sonaar_audioplayer albums="723185" player_layout="skin_boxed_tracklist" sticky_player="true" hide_artwork="false" show_playlist="true" show_track_market="true" show_album_market="false" show_volume_bt="true" show_speed_bt="true" show_shuffle_bt="true" show_skip_bt="true"  ][/sonaar_audioplayer]

Search Bar Widget Shortcode #

[sonaar_search]

Use this shortcode if you want to add a search bar on any page. This shortcode is available with the Business plan and higher. It’s also available as an Elementor Widget.

AttributeDescription
player_id[BUSINESS PLAN] Specify the targeted player whom you want the search to happen. If you have multiple players on your page, you must specify a player_id so we know which player’s tracklist to search. The ID must be set on your Audio player widget. Value: player id attribute without spaces and no special character. eg: player_id="myplayer"
url[BUSINESS PLAN] If you want to display a search bar on your homepage, and the targeted player is displayed on a different page, then specify the URL of that player. When users hit enter, they will be redirected to the URL. eg: url="https://youdomain.com/beats"
placeholder[BUSINESS PLAN] Set your own placeholder value. You can set a default value in WP-Admin > MP3 Player > Settings > Widget Player, or overwrite the default value using this attribute.
eg.: placeholder="Search track title and hit enter"

Filter Dropdowns & Tags Shortcode #

[sonaar_filters]

Use this shortcode if you want to display a dropdown filter or tag button filter. Users will be able to filter the tracklist according to the filter selected. This shortcode is available with the Business plan and higher. It’s also available as an Elementor Widget.

AttributeDescription
filter[BUSINESS PLAN] To add a filter, use this attribute. Eg:
filter="My Filter::playlist-cat::multiselect"

This will display a filter labeled My Filter showing all your playlist categories. Users will be able to select multiple choices. If you want the user to select 1 option at a time, use singleselect instead of multiselect.

The playlist-cat is the metakey corresponding to the playlist taxonomy.

Multiple filters:
To display multiple filter side by side, separate your arguments by a semicolon (;). eg:
filter="My Filter 1::playlist-cat::singleselect;My Filter 2::podcast-show::multiselect;"

Supported metakey
You can use any metakey that outputs an array (containing multiple choices). You can create them into ACF, JetEngine, Metabox, etc…
playlist-cat : Playlist/Episode categories
podcast-show : Podcast show categories
product_cat : Product categories
product_tag : Product tags
post_tags : Post tags
filtertype[BUSINESS PLAN] Which type of filter do you want to use? Dropdowns or tags button style? Default: dropdown Value: dropdowns or tags.
eg: filtertype="tags"
player_id[BUSINESS PLAN] Specify the targeted player you want to filter results. If you have multiple players on your page, you must specify a player_id so we know which player’s tracklist to search. The ID must be set on your Audio player widget as well. Value: player id attribute without spaces and no special character. eg: player_id="myplayer"

A complete shortcode example would be something like this:

Chips Active Filters Shortcode #

[sonaar_chips player_id="yourplayer_id"]

When people use the search or filter widgets, you can display “chips” buttons in order to display active filters on your tracklist. This shortcode is available with the Business plan and higher. It’s also available as an Elementor Widget.

AttributeDescription
player_id[BUSINESS PLAN] Specify the targeted player id where your filters are set. If you have multiple players on your page, you must specify a player_id so we know which player’s tracklist is filtered. The ID must be set on your Audio player widget as well. Value: player id attribute without spaces and no special character. eg: player_id="myplayer"

Chapters & Textual Play Shortcode #

[sonaar_ts]Play Now[/sonaar_ts]

When using this shortcode, the text within the shortcode will be converted into a clickable action link. This shortcode is available with the Starter plan and higher.

If you don’t specify any attribute just like in the example above, we will try to play the first audio player widget found above this shortcode. If there is no player found on the page, we will try to play the tracks set in our tracklist custom fields set for the current page.

You can also use the following attributes:

AttributeDescription
widget_id[STARTER PLAN] Specify the player widget id to be targeted. eg: widget_id="my_featured_player". To set a player ID on your player’s instance when using sonaar_audioplayer shortcode, use the id attribute (see above)
post_id[STARTER PLAN] Specify the playlist post ID to be targeted. This will launch the sticky player, eg: post_id="55"
track_id[STARTER PLAN] Specify the track number to be targeted. eg: track_id="4"
time[STARTER PLAN] Specify the starting time stamp. Useful to create chapters and table of content. eg: time="2:27". this will start the player at time 2:27.
button[STARTER PLAN] Set to true if you want to transform the link to look like a button. eg: button="true"
play_icon[STARTER PLAN] Set to true if you want to add a play icon. eg: play_icon="true"
text[STARTER PLAN] Place text content in your button for the play state. eg: text="Play Episode 01"
text_pause[STARTER PLAN] Place text content in your button for the pause state. eg: text_pause="Pause Episode"
color[STARTER PLAN] Set the font-color. eg: color="#fff"
background_color[STARTER PLAN] Set the background-color: eg: background_color="#000"
font_size[STARTER PLAN] Set the font-size: eg: font_size="32px"
block[STARTER PLAN] Set to true if you want your link displayed as a block and not inline. eg: block="true"

Here are the final examples and how it would look like:

Play Now
[sonaar_ts]Play Now[/sonaar_ts]

// shall play in the sticky player, the first audio player widget found above this shortcode. If no player found on your page, we will try to play the tracks set in our tracklist custom fields set for the current page.

Chapter 01: About this session #1 (00:30)
Chapter 02: Learn something cool (01:43)
Chapter 03: Mastermind is tricky (02:00)
Chapter 04: Find your ways always (02:15)

Chapter 01: [sonaar_ts time="0:30"]About this session #1 (00:30)[/sonaar_ts]
Chapter 02: [sonaar_ts time="1:43"]Learn something cool (01:43)[/sonaar_ts]
Chapter 03: [sonaar_ts time="2:00"]Mastermind is tricky (02:00)[/sonaar_ts]
Chapter 04: [sonaar_ts time="2:15"]Find your ways always (02:15)[/sonaar_ts]

// shall tranform the times into clickable links and will play in the sticky player, the first audio player widget found above the shortcodes at the specified times. If no player found on your page, we will try to play the tracks set in our tracklist custom fields set for the current page.

Play the Epigram at 01 minute in the Sticky Player

Play the [sonaar_ts post_id="590318" time="1:00"]Epigram at 01 minute[/sonaar_ts] in the Sticky Player

// shall transform 'Episode 02' text content into a clickable link and will play the playlist ID 55 starting at 2 minutes 27 seconds in the sticky player
Play Epigram
[sonaar_ts post_id="55" button="true" play_icon="true" text="Play Episode" color="#fff" background_color="#000" font-size="32px" block="true"]

// add a very simple 'Play Episode' button with a play icon. It will play the playlist id #55 in the sticky player

Lyrics Placeholder Shortcode #

[sonaar_lyrics_placeholder]

If you are using lyrics for your song, you can add a lyrics placeholder anywhere in your content. We will display the current playing song’s lyrics in this placeholder. No attribute is required.

Example:

[sonaar_lyrics_placeholder]

License Preview Shortcode #

If you are selling music with WooCommerce, chances are you are providing music license agreements. If not, make sure to check our MP3 Audio Player Pro with WooCommerce edition which gives you the ability to sell audio licenses, and provide contracts and agreements in PDF format to download.

You can learn more about how to use our license feature here.

Here is a shortcode to display license preview anywhere on your site

[sonaar_license post_id="772" column="true" show_preview_button="true"]

post_id: Specify the post_id of the Music Licenses & Contracts post you want to display. See screenshot: https://d.pr/i/KCb0Gp Leave blank if you are using this shortcode in a single product template so it will automatically get the licenses attached to the current product.

column: Display the license in a column format instead of inline. Eg: column="true"

show_preview_button: Display a Preview License button under the license’s bullet points. The button will display a preview of the license agreement. Eg: show_preview_button="true"

Was this article helpful?
Still Stuck?
How can we help?