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 post that will contain your audio tracks. Create a post by going to WP-Admin > MP3 Player > 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

Audio Source attributes

Specify where your audio track are located. This can be from a specific post, a category, a RSS feed, a CSV file, etc.

Parameter attributes

We have multiple parameters to customize your 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 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

• Music

  Charlotte Cardin

  Acoustic Guitar, Heavy Bass, Piano, Strings

  Classic, Cold, Dark, Sexy

  Value 1
• Music

  Charlotte Cardin

  Acoustic Guitar, Heavy Bass, Piano, Strings

  Classic, Cold, Dark, Sexy

  Value 1
• Music

  Charlotte Cardin

  Acoustic Guitar, Heavy Bass, Piano, Strings

  Classic, Cold, Dark, Sexy

  Value 1
• Music

  Charlotte Cardin

  Acoustic Guitar, Heavy Bass, Piano, Strings

  Classic, Cold, Dark, Sexy

  Value 1

00:00

[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

00:00

1X

Sorry, no results.

Please try another keyword

• Music

  Charlotte Cardin

  Acoustic Guitar, Heavy Bass, Piano, Strings

  Classic, Cold, Dark, Sexy

  Value 1
• Music

  Charlotte Cardin

  Acoustic Guitar, Heavy Bass, Piano, Strings

  Classic, Cold, Dark, Sexy

  Value 1
• Music

  Charlotte Cardin

  Acoustic Guitar, Heavy Bass, Piano, Strings

  Classic, Cold, Dark, Sexy

  Value 1
• Music

  Charlotte Cardin

  Acoustic Guitar, Heavy Bass, Piano, Strings

  Classic, Cold, Dark, Sexy

  Value 1

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

Example 003

[sonaar_audioplayer feed="https://sonaar.io/wp-content/uploads/2022/02/Frank-AB-Rural-Alberta-Advantage.mp3" feed_title="Track Title" player_layout="skin_button" play_text="Play The Track Now" pause_text="Pause Current Track" play_bt_bg_color="#000000" play_bt_text_color="#FFFFFF" use_play_label_with_icon="true"][/sonaar_audioplayer]

Example 004 – Carousel Slider

[sonaar_audioplayer albums="all" hide_artwork="true" show_playlist="false" show_album_market="false" hide_timeline="true" sticky_player="true"  player_layout="skin_float_tracklist" show_track_market="false" slider_param="{effect:'coverflow',slidesPerView:3,loop:true,spaceBetween:5, coverflowEffect:{rotate: 15, slideShadows: true,depth:200, stretch:50},navigation:true,centeredSlides:true}" slider_play_on_hover="true" slide_source="track"][/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.

Filter Dropdowns, Range Slider & 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.

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.

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:

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

[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 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"

You can also create your own Preview button and use this Javascript to launch the preview modal:

$(document.body).on('click', '#your-button-id', function (event) {

  var post_id = 647;

  var data = {
    'action': 'load_license_preview_ajax',
    'licenseId': post_id,
    'security': srp_vars.ajax.security
  };

  sr_setPopUp();
  srp_wc_loadspinner($(event.target));
  $.post(srp_vars.ajax.ajaxurl, data, function (response) {
    $('#sonaar-modal .sr_popup-body').html(response);
    sr_openPopUp();
    srp_wc_unloadspinner($(event.target));
  })
});

post_id: Specify the post_id of the Music Licenses & Contracts post you want to display. See screenshot: https://d.pr/i/KCb0Gp