Audio Player Add Albums Or Playlists To Your Site Without
Audio Player Add Albums Or Playlists To Your Site Free
Audio Player Add Albums Or Playlists To Your Sites
Audio Player Add Albums Or Playlists To Your Site Youtube

Create and manage audio playlists with your personal music collection with this application. This application has two modes of operation: Automatic mode: This application will scan through your music collection and create a playlist in each of the folders you choose. Playlists created in a folder will have the songs from all its sub-folders. MP3 Music Player is an audio player plugin for WordPress. You can add audio tracks, albums, and playlists using shortcodes. Add the audio files to your site, and you will be able to use the audio/album using a shortcode. The plugin uses wavesurfer.js to display a waveform under the audio player. The easiest way to add audio to your website is with WordPress’ native audio player. Unless you have specific needs, there’s little reason to look elsewhere. You can add.mp3,.m4a,.ogg,.

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:

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:

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

Audio Player Add Albums Or Playlists To Your Site Without

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

Audio Player Add Albums Or Playlists To Your Site Free

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

Audio Player Add Albums Or Playlists To Your Sites

Where trackid:'0' would be the first tra

Audio Playeradd Albums Or Playlists To Your Site