How to use the MP3 Music Player Plugin + Shortcodes
VIDEO TUTORIAL OVERVIEW
This video will teach you how to use the plugin in 9 quick chapters:
1) 00:00 Create new playlist and upload your track
2) 01:48 Display the player on any post or page
3) 02:33 Change colors and settings
4) 03:13 Shortcode Parameters (Read below for list of attributes)
5) 04:17 Use Elementor to display the playlist
6) 05:55 PRO version: Some examples
7) 08:02 PRO version: Sticky Audio Player with waveform
8) 08:26 PRO version: Volume Control, Shuffle Mode
9) 08:41 PRO version: Statistic Reports!
DISPLAYING THE PLAYER ON A WORDPRESS PAGE
You have 2 different ways to display the player on a WordPress page.
1) You can use Elementor Page Builder. We have developed a special MP3 Music Player widget that you can find in the Elementor Widget panel. You can learn more and download Elementor here
2) You can use Shortcode.
If you want to embed the player via Shortcode, here are the shortcode and attributes available:
albums – The post ID of your playlist you want to display. Attribute is required. Value: IDs separated by a comma
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”
hide_artwork – Will hide your album cover. Value: true or false.
remove_player – Will disable and remove the waveform below your player. Value: true or false.
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.
show_playlist – Will either or not display the playlist above your player control. Value: true or false.
sticky_player - PRO ONLY. Will enable sticky player. 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]
MANAGE OVERALL COLORS AND SETTINGS:
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. 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