Okay
  Print

How to use the MP3 Music Player Plugin + Shortcodes

VIDEO TUTORIAL OVERVIEW

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

DISPLAYING THE PLAYER ON A WORDPRESS PAGE

There are 3 different ways to display the player on a page.

1) Elementor 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


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



2) 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.
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"
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.
show_playlist Will either display the tracklist or not. Value: true or false.
hide_artwork Will hide your album cover. Value: true or false.
hide_timeline Will disable and remove the waveform timeline. 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 Will 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 ONLY]. Will enable sticky player. Value: true or false.
scrollbar [PRO ONLY]. Will enable scrollbar within tracklist. Value: true or 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]


3) Gutenburg

Use Gutenburg block if you use Gutenburg editor. The gutenburg block is called MP3 Player by Sonaar.

MANAGE OVERALL SETTINGS AND COLORS:

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

USING SAME LAYOUTS AS THE DEMO PAGE

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


JAVASCRIPT LIBRARY

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.play()
IRON.sonaar.player.pause()
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" );