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 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 in 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[PRO] 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”
audio_meta_field[PRO] 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[PRO] 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”
posts_per_page[PRO] Specify the number of posts to load in the player. Value: integer. eg: posts_per_page=”5″
play-latestWhen set to true, the player will automatically takes the latest published playlist posts in WP-Admin > MP3 Player > All Playlists. Value: true or false. eg: play-latest=”true”
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”
show_playlistDisplay the tracklist or not. Value: true or false. eg: show_playlist=”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 progress bar and controls. Value: true or false. eg: hide_timeline=”true”
hide_progressbar[PRO] Remove progress bar, keep controls. Value: true or false. eg: hide_progressbar=”true”
hide_control_underRemove controls but keep progress bar. Value: true or false. eg: hide_control_under=”true”
reverse_tracklist[PRO] Reverse the tracklist order. eg: reverse_tracklist=”true”. Value: true or false. eg: reverse_tracklist=”true”
hide_times[PRO] Remove time and durations beside the progress bar. Value: true or false. eg: hide_times=”true”
hide_album_title[PRO] Remove album title in the TRACKLIST. Apply only to Floated Player. Value true or false. eg: hide_album_title=”true”
hide_player_title[PRO] Remove album title ABOVE the Soundwave Bar in the player. Value true or false. eg: hide_player_title=”true”
hide_track_title[PRO] Remove Track Title above the Soundwave Bar. Value: true or false. eg: hide_track_title=”true”
progressbar_inline[PRO] Display Prev/Play/Next button inline with the progress bar. Value: true or false. eg: progressbar_inline=”true”
show_meta_duration[PRO] we will calculate the sum of each track’s duration and will display the total amount of the duration in the player. Value: true or false. eg: show_meta_duration=”true”
show_publish_date[PRO] 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[PRO] Sometimes its useful to let your visitor knows how many tracks contains the playlist. We will show this label in the player. Value: true or false. eg: show_tracks_count=”true”
show_skip_bt[PRO] A listener just missed something in your track? Add a 15 seconds backward button so he can quickly catch-up. Same thing if he want to quickly skip a segment or two. Value: true or false. eg: show_skip_bt=”true”
show_shuffle_bt[PRO] Allow the ability to shuffle the tracks randomly within the Playlist. Value: true or false. eg: show_shuffle_bt=”true”
show_speed_bt[PRO] 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[PRO] 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
strip_html_track_desc[PRO] 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[PRO] Specify the amount of words a track description can contains. We will display […] once it reaches this max amount. Value: integer. Default is 55. eg: track_desc_lenght=”55″
hide_trackdesc[PRO] 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[PRO] 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[PRO] Apply to boxed player only. Show external link buttons direcly in the boxed player instead of below the playlist. Value: “top”. eg: album_store_position=”top”
show_track_marketDisplay your track’s store icons beside each of your track. Value: true or false. eg: show_track_market=”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[PRO] Show textual “play” label along with a play icon for your play button. Apply only to the boxed and button layout.
hide_play_icon[PRO] Remove the Play Icon and keep the textual “play” label only. eg.: hide_play_icon=”true”
play_text[PRO] Set the textual “play” string. Apply only to the boxed and button layout. eg: play_text=”Play The Track Now”
pause_text[PRO] 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 purpose. Value: h1, h2, h3, h4, h5, h6, div, span, p. eg: titletag_soundwave=”h3″
titletag_soundwaveHeading tag of the title above the soundwave for SEO purpose. Value: h1, h2, h3, h4, h5, h6, div, span, p. eg: titletag_soundwave=”h4″
sticky_player[PRO] Enable sticky player. Value: true or false. eg: sticky_player=”true”
track_artwork[PRO] Display thumbnail images beside each of your track in the playlist. Value: true or false. eg: track_artwork=”true”
scrollbar[PRO] Enable scrollbar within tracklist. Value: true or false. eg: scrollbar=”true”
shuffle[PRO] Enable shuffle. Value: true or false. eg: shuffle=”true”
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.
no_loop_tracklist[PRO] If set to true, player will stop when current playlist has completed to prevent 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”.

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

Exemple 001

album-art

Look at bottom of the screen for Karaoke Lyrics
[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]

Exemple 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]

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.

If you don’t specify any attribute just like 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_idSpecify 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_idSpecify the playlist post ID to be targeted. This will launch the sticky player, eg: post_id=”55″
track_idSpecify the track number to be targeted. eg: track_id=”4″
timeSpecify 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.
buttonSet to true if you want to transform the link to look like a button. eg: button=”true”
play_iconSet to true if you want to add a play icon. eg: play_icon=”true”
textPlace text content in your button for the play state. eg: text=”Play Episode 01″
text_pausePlace text content in your button for the pause state. eg: text_pause=”Pause Episode”
colorSet the font-color. eg: color=”#fff”
background_colorSet the background-color: eg: background_color=”#000″
font_sizeSet the font-size: eg: font_size=”32px”
blockSet to true if you want your link display as a block and not inline. eg: block=”true”

Here are final examples and how it would looks 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 into 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 that gives you the ability to sell audio licenses, provide contracts and agreement in PDF format to download.

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

Here 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’

Updated on May 31, 2022
Was this article helpful?
Still Stuck?
How can we help?