Brona Audio Player With Playlist Elementor Widget


Thank you for purchase of this plugin. If you have any questions that are beyond the scope of this help file, please feel free to send a detailed message on the following link.

How to install?

Make sure you extract downloaded plugin file from Envato, inside you will find file named: 'elementor_widget_brona.zip'. This is the plugin file you upload in WordPress panel when you want to install the plugin!

1. In WordPress panel go to Plugins menu
2. Under Plugins menu click "Add New"
3. Select "Upload", choose the archive elementor_widget_brona.zip that you downloaded and click "Install Now"
4. After the plugin is installed click "Activate Plugin"



How to update when new plugin version has been released?
1. Using FTP client, delete old plugin files and upload new ones. Clear browser cache.
2. Your previously created playlists and other data is going to be saved.





Video tutorial
General Settings
Parameter Value Description
Auto play true / false Autoplay audio on player start
Auto play after first true / false Auto play media after first media has been manually started.
Active song to start with Active song to start with on player load (-1 = none, 0 = first song, 1 = second song...)
Volume 0-1 Audio volume
preload auto, metadata, none Preload media attribute
Loop state playlist, single, off Loop playlist, loop current audio, or off (on playlist end no loop).
Randomise playback in playlist true,false Random play. Requires at least 3 songs in playlist for this to work.
Playback rate Audio playback rate
Default skip time in seconds seconds Default seek time value for seek backward / seek forward commands (seconds).
Toggle playback between multiple players true,false For multiple players in page, pause other players when one player is started.
Save playing track and progress true,false Save playing song and song progress on page reload (resume song when you come back to the player again)
Auto open lyrics dialog on song start true / false View Using song lyrics section for more details.
Auto scroll lyrics container true / false Auto scroll lyrics text as song plays
Use keyboard to toggle player actions true,false Use keyboard navigation for controling playback.

Supported keyboard controls:

Left arrow = skip backward
Right arrow = skip forward
Up arrow = increase volume
Down arrow = descrease volume
m = toggle mute
Page Up = previous song
Page Down = next song
Space = toggle playback (pause / play)
r = restart
Limit description text number Limit amount of text in song description in playlist. Useful for Soundcloud, Podcast, Youtube which can have large description.
Playlist maximum height pixels Increase of decrease playlist height to show more songs without scrolling
Download icon in playlist Material design icons are used: https://material.io/resources/icons/
Link icon in playlist Material design icons are used: https://material.io/resources/icons/
Player elements
Parameter Value Description
Use player artwork Use large artwork cover in player
Use playlist If false, only player will be visible
Playlist scroll theme Scroll themes from here: http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html
Playlist opened on start Choose to show playlist opened or closed on player start.
Use numbers in front of titles in playlist true, false Use numbers in front of playlist title.
Show thumbnails in playlist true, false
Use go to next song button true, false
Use go to previous song button true, false
Use skip backward button (X seconds) true, false
Use skip forward button (X seconds) true, false
Use shuffle button true, false Button to shuffle playback in playlist
Use loop state button true, false Playlist loop button
Use playback rate true, false Playback rate slider
Use AB loop true, false Time range slider, play song between 2 selected times
Use button to open popup window true, false Open player in new window so you can listen to music without interuption when browsing diffent pages in website.
Use search songs in playlist field true, false
Use social sharing buttons true, false
Credentials
Parameter Value Description
Use Google analytics true,false View Google Analytics section for more details.
Google analytics tracking ID Example of code: UA-1235674-1 https://analyticshelp.io/blog/google-analytics-property-tracking-id/
Facebook API key for social sharing
SoundCloud API key Required if you want to listen to SoundCloud music. Register here: http://soundcloud.com/you/apps/new and enter Client ID|Client secret in Settings (Soundcloud Application ID).
Google Drive API key Required if you want to load song from Google Drive Folder. https://developers.google.com/drive/api/v3/about-sdk
Youtube API key Required if you want to listen to Youtube music. https://developers.google.com/youtube/registering_an_application
Translation
Parameter Value Description
Choose language Choose between several available languages in player. You can also edit langauge by clicking EDIT LANGUAGE button.
Colors
Parameter Value Description
Choose skin Choose between several available skins for the player colors.

Playlist songs
Parameter Value Description
Choose audio source Choose what audio sources to play. For more details view audio section


Audio source

Provide audio url (mp3, wav, aac, flac...) Mp3 format is supported on all browsers and its recommended cross-browser format.



You can add single audio song or upload multiple songs at once. Its recommended that your songs have metadata set (title, artist, artwork cover image) so when you upload audio using upload button this metadata will automatically be retrieved by the player.




You can add any audio url that is public and plays when opened directly in the browser (for example Dropbox, Amazon S3 etc).




Using Soundcloud requires API key. Register here: http://soundcloud.com/you/apps/new and enter Client ID|Client secret in Credentails in Settings (Soundcloud Application ID).

Example of Soundcloud url:

http://soundcloud.com/astateoftrance




Player supports podcast (rss).

Example of podcast rss url:

http://www.kingola.com/feed/podcast/





Plugin creates brona-file-dir folder inside WordPress uploads directory which will be used for reading audio files.

Place your folder with audio files in wp-content/uploads/brona-file-dir directory and enter folder name in field:




Google Drive requires API key, go to: https://console.developers.google.com and create New project, enable Drive API, go to Credentials, create Browser key and enter in Credentails.

Google drive folder needs to be public. Example of google drive folder: https://drive.google.com/drive/folders/0ByzcNpNrQNpWbjJGY19NSFF0R3M

Its not possible to read song metadata from Google Drive so its recommended to have following setup for songs in Google Drive:

Inside Google Drive directory equivalent audio and thumbnail files need to be named the same!

    song1.mp3
    song1.jpg
    song2.mp3
    song2.jpg
    ...

Supported formats for audio files are mp3, wav, aac, flac. Supported formats for image thumbnails is jpg/png.






If you want to use single files from google drive, use the following method:

Go to Disc – My drive:

https://drive.google.com/drive/my-drive
right click on file, Get shareable link and you get something like this:

https://drive.google.com/open?id=0ByzcNpNrQNpWZUlJVjZQVHoxWnM

use that file ID to create google drive file URL:

https://drive.google.com/uc?export=view&id=videoID
This is final URL how google drive file URL should look:

https://drive.google.com/uc?export=view&id=0ByzcNpNrQNpWZUlJVjZQVHoxWnM – use this link in player as type normal audio source:



Youtube requires API key which needs to be entered in Credentails.

Go here for the API key: https://console.developers.google.com and create new project, enable YouTube Data API, go to Credentials, create API key.

Tutorial on how to create Youtube API key: https://www.youtube.com/watch?v=pJSkp719HeE

Supported is Youtube playlist.

Example:

Youtube playlist:

https://www.youtube.com/playlist?list=PLMC9KNkIncKvYin_USF1qoJQnIyMAfRxl





Using song lyrics

Supported lyrics extensions are lrc, vtt, srt. If you have trouble uploading these extensions into WordPress, rename lyrics file to .txt extension.

To add lyrics to song, upload lyrics file in lyrics field:


Activate analytics in Credentials tab:



Following events will be displayed inside your Google Analytics panel / REAL-TIME / Events section:


Song played 
Song paused
Song ended
Song downloaded


Autoplay
Autoplay is disabled since recent browser changes and requires user interaction with the page before (like a click or keypress) to start playback: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes



Volume on mobile

Volume cannot control the on Apple IOS with javascript, you have to use the physical button on the actual phone: Volume Control in JavaScript





Plugin does not work as expected

If the plugin does not work as expected, try the following tests to see if it makes a difference and what could be causing an issue:

1. Update to latest plugin files available on Codecanyon

2. Switch to default Wordpress theme

3. Check for errors in browser developer console (Chrome F12 key, Console tab)

4. Try to deactivate any 3rd party plugins (the ones that not come with Wordpress)

5. If you still have issues after you have done all changes above, you can send a message at http://codecanyon.net/user/Tean#contact , provide your PURCHASE CODE, provide a link to your live page, and a temporary user and password for your WordPress admin panel so we can have a look.