Modern Radio Player 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.

• codecanyon.net/user/Tean

How to install

Make sure you extract downloaded file from codecanyon, inside you will find file named: 'elementor_modern_radio_player.zip'. This is the plugin file you upload in WordPress panel!

Activate plugin

After you install plugin you will have to activate your license to start using the plugin.

To activate license you need to create account on the following link, where you will provide your PURCHASE CODE, and get TOKEN in return which you will then enter in plugin section to activate the plugin.

Instructions how to register

Access control panel here

This is made to make sure customers use the license on a single project (as per Envato rules) and to help customers owning many licenses to easily track on which server licenses are being used.

How to update

How to add player in page?

1. Search for Modern Radio Player in Elementor widgets:

2. In Radio sources tab Add item, choose Radio type and add your radio url.

Supported radio formats are the following:

Shoutcast:

- SHOUTCAST LINK
http://[domain]:[port]/;
OR
http://[ip]:[port]/;

Icecast:

- ICECAST LINK
http://[domain]:[port]/mountpoint

Icecast example: http://149.56.195.94:8416/autodj

Radiojar:

- RADIOJAR LINK
http://[domain]:[port]/mountpoint

Radiojar example: http://link.radiojar.com/radio-apopsi

HLS:

HLS URL
Link to m3u8

HLS example: http://a.files.bbci.co.uk/media/live/manifesto/audio/simulcast/hls/nonuk/sbr_low/ak/bbc_radio_two.m3u8

Adding radio to player

Radio stations can be added in Radio Sources tab:

You can add one or more radio stations per player. If you want to add more than single radio station per player, then make sure the skin you use has playlist support and you choose to create Radio list (which will show list of all your radio stations in player).

When you want to retrieve player artwork, and artwork for the history list (if you use history) you can choose between the following:

1. Itunes

Get artwork from Itunes.

2. Audiodb

Get artwork from Audiodb.

If you use audiodb you will need a private api key: https://www.theaudiodb.com/api_apply.php

You can set artwork source in General tab:

Note that both may be limited and you should carefully use Last played interval settings! The bigger the number, the less frequently artwork will be requested.

How to hide playlist and use just player?

If you want to hide playlist and use just player part, use these settings in Plalyist tab:

Depending on the skin, playlist may contain some buttons like open share or similar, if you need these buttons you can move them manually in apmrp/includes/html_markup.php file somewhere in the player (requires some developer knowledge). Note that this is a temporary change currently and this file will get overwritten on plugin update.

What is CORS?

Cors is required to read some radio stations, including radio metadata and artwork. You can try if you radio works without CORS, but in many cases, CORS will be required.

Read more here: What is CORS?

Free CORS servers

You can use free cost servers, NOTE however that they are limited and unreliable (may fail sometimes).

Some free cors servers:

https://cors-anywhere.herokuapp.com/

Create your own CORS

Best way is the create your own CORS

Fof this you need to be able to use command prompt (or terminal on Mac)

Watch video tutorail:

Download HEROKU

Video commands:

git clone https://github.com/Rob--W/cors-anywhere
cd cors-anywhere
heroku login
heroku create YOUR_APP_NAME
heroku config:set -a YOUR_APP_NAME CORSANYWHERE_RATELIMIT="60 1"
heroku config:set -a YOUR_APP_NAME CORSANYWHERE_WHITELIST=https://your-domain.net
git push heroku master

Use CORS in settings:

To make the player automatically become fixed to page bottom if user scrolls down the page, use the following settings in Minimize on Scroll tab:

Mini player version allows to switch between normal and mini player fixed to page bottom. Only available for skin default, modern, artwork. Not compatible with minimize on scroll player option! If you have minimize on scroll on scroll selected, there will be no mini player available! Also, mini player is not available in popup window.

Set mini player in General tab:

To make the player autoplay when user scroll the page and video player enters into view use the following settings in Edit Player / General / Playback tab:

Note that for autoplay to work, user needs to interact with the page beforehand (mouse click, use keyboard or use browser scroll), so if this action has not happened and the player is already in viewport, autoplay might not be possible since browsers prevent autoplay without user interaction: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Note: when using player in popup, its restricted to one player per page.

You can edit popup window settings in Popup window tab:

Popup window can be opened on 2 ways:

1. Manually by clicking popup button icon in player.

2. Automatically on player start.

Activate keyboard controls in Keyboard tab:

Keyboard controls only work when mouse is over player area and player has focus! If you set Use global keyboard controls, then keyboard will work anywhere on the page.

You need to test player in live page (not in Elementor editor) for this feature to work!

Playback rate button in player enables changing audio playback rate on the fly.

Settings for playback rate are available in General tag:

Note that you can also set playback rate on the individual radio station When adding radio station to playlist in Edit Playlist / Add new radio station

Using visualizer into the player

Activate visualizer in Visualizer tab:

Visualizer is by default placed in the player, but you can change this with Visualizer container option. If you put canvas element somewhere in the page and specify "Visualizer container" classname.

<canvas class="mrp-canvas"></canvas>

For example maybe you can put canvas in page background, add this css to make visualizer play as fullscreen background in your website:

.mrp-canvas{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Insert advertising content into the gallery (Adsense, Amazon Affiliates, Commission Junction etc...). Basically any HTML is allowed. Make sure its properly formatted so it doesnt break the layout.

Set Ad content in Visualizer tab:

You can add ad content and choose position of the content inside the player. If you set custom position this will take precedence. Example of custom position ("#my-div", ".my-other-div")

Example how to add AdSense code:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="AD_CLIENT_HERE"
data-ad-slot="AD_SLOT_HERE"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Enter AD_CLIENT_HERE and AD_SLOT_HERE data.

Using audio adverts in player

2 types of audio ads exist. Ads before new radio station starts (ad pre), ads during radio playback in specified interval (ad mid). Multiple ads are supported (meaning you can have multiple ad pre, ad mid).

Audio adverts are defined in Audio adverts tab:

Changing player icons

Icons in the gallery are SVG. Adjust settings for Player icons in Player icons tab:

Using SVG for icons

To get SVG code, for example, go to Font Awesome page, choose icon and copy SVG code. Of course you can get SVG code from different websites.

You can translate gallery strings inside Translation tab:

Other translate options are available in relevant tabs, like Social sharing or Youtube player custom skin tab.

Using Share feature

Sharing can use using default method or browser native share method (where supported).

Default method uses social sharing icons (Facebook, Twitter etc). Native share does not require these icons.

If both default and native share are used, player will first try to use native share, then if this is not supported, will fallback to default share.

Adjust social sharing settings in Social sharing tab.

Always test player in real page, not in Elementor editor

Make sure you test player in the real page on the frontend, not in Elementor editor, because some features might not work correctly in editor! Like for example when you change player skin and its colors.

Autoplay

The only way to autoplay is to start video muted, so if auto play is chosen, video will start muted.

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 KEY and a link to your live page so we can have a look.