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
| Attribute | Description |
|---|---|
| player_layout | Choose the player layout. Value: skin_float_tracklist, skin_boxed_tracklist or skin_button Default is skin_float_tracklist. eg: player_layout="skin_boxed_tracklist" |
| albums | The 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" |
| spectro | [STARTER PLAN] Add an Animated Audio Spectrum to your player. This attribute contains multiple values, each separated by a ‘|’ character. spectroStyle: bars, bricks, shockwave, string, selectors color1: hexa value color2: hexa value. When set, gradient will be displayed gradientDirection: vertical, horizontal shadow: true or false. Will add a shadow FX on the bars reflectFx: true or false. Will add a vertical reflection of the bars sharpFx: true or false. Used for ‘bricks’ spectroStyle barCount: number which specify the number of bars barWidth: number which specify the widht of each bar barGap: number which specify the distance between each bar canvasHeight: the height of the canvas in pixel. halign: Horizontal alignment of the spectrum: left, center, right valign: from where the bars are coming from: top, middle, bottom enableOnTracklist: true or false. Will display the spectro beside each of your track in the playlist bounceClass: When specified, we will make your selector bounce! Add your custom class with the dot or # for ID. Separated by commas for multiple selectors e.g: .my-class, #myid bounceVibrance: number from 0 to 1000 for the vibrance amplitude. Default is 100. bounceBlur: true or false. Add blur fx on the bounce. eg: spectro="color1:#FF0064|color2:#0073FF|shadow:|barCount:200|barWidth:5|barGap:1|canvasHeight:100|halign:center|valign:bottom|spectroStyle:bars|sharpFx:|reflectFx:|gradientDirection:vertical|enableOnTracklist:|bounceClass:|bounceVibrance:58|bounceBlur:true" |
| 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_playlist | Display the tracklist or not. Value: true or false. eg: show_playlist="true" |
| tracklist_layout | If 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" |
| rss_feed | You can automatically feed the player with your RSS feed URL. eg: rss_feed="https://yourpodcastprovider.com/feed/" |
| rss_item_title | If you are using rss_feed attribute and you want to fetch specific episode(s) in the player, you can do so by using rss_item_title="My episode title" If you want to list all episode titles that contain for example Season 02, you can simply use rss_item_title=”Season 02″ and all your episode containing season 02 will be displayed. |
| rss_items | If you want to list the lastest 5 (or any number) episodes from your RSS feed, use rss_items="5" |
| 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. |
| 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="Title 01 || Title 02" |
| feed_img | If 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" |
| import_file | You can use a CSV file in the shortcode to create your playlist automatically. Here is the CSV template you can use to get started. eg: import_file="https://yoururl.com/yourfile.csv" |
| 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-latest | When 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_artwork | Display play buttons in the playlist artwork image. Value: true or false. eg: display_control_artwork="true" |
| hide_artwork | Hide your album cover image. Value: true or false. eg: hide_artwork="true" |
| hide_timeline | For 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_under | Remove 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_market | Display 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" |
| force_cta_dl | [STARTER PLAN] Add a download button to each of your tracks in the playlist. Make sure that show_track_market is true (see above). The download file will be the played track. eg: force_cta_dl="true" You can set the button text label in MP3 Player > Settings |
| force_cta_singlepost | [STARTER PLAN] Add a button to each of your tracks in the playlist that will redirect the user to the playlist single post. Make sure that show_track_market is true (see above). eg: force_cta_singlepost="true" You can set the button text label in MP3 Player > Settings |
| show_album_market | Display your playlist’s store icons below your playlist. Value: true or false. eg: show_album_market="true" |
| store_title_text | Change Available Now by any string. Value: String. Default: “Available Now”. eg: store_title_text="Listen On" |
| wave_color | Specify the color of your waveform to bypass the plugin setting’s color. Value: hexa color. eg: wave_color="#E81538" |
| wave_progress_color | Specify 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_color | Set textual play label color. Apply only to the boxed and button layout. Value: hexa color. eg: play_bt_text_color="#FFFFFF" |
| play_bt_bg_color | Set textual play label background color. Apply only to the boxed and button layout. Value: hexa color. eg: play_bt_bg_color="#000000" |
| titletag_playlist | Heading tag above the playlist for SEO purposes. Value: h1, h2, h3, h4, h5, h6, div, span, p. eg: titletag_playlist="h3" |
| titletag_soundwave | Heading 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" |
| inline | Set multiple players on the same row according to the space available. Value: true or false. eg: inline="true" |
| id | Optional 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 tracklist | Description |
|---|---|
| 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 srmp3_cf_description : Track description 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 playlist-tag : Playlist/Episofde tags 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_heading | Display 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
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
Look at bottom of the screen for Karaoke Lyrics
1X
Sorry, no results.
Please try another keyword
[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.
| Attribute | Description |
|---|---|
| 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.
| Attribute | Description |
|---|---|
| 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.
| Attribute | Description |
|---|---|
| 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:
| Attribute | Description |
|---|---|
| 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[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 playerLyrics 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"
