Modern Radio Player Wordpress Plugin


Thank you for purchase. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form on the link above. Thanks so much!

Package when extracted contains the following:
1. plugin installable file that can be uploaded in wordpress admin plugins section
2. help documentation + changelog

How to install?
1. Go to Plugins menu
2. Add New
3. Upload file
4. Activate plugin
5. In the Wordpress menu there will be "Modern Radio Player" section

How to update when new plugin version has been released?
1. Delete old plugin files (through Wordpress admin or using FTP Client) and upload new plugin files.
2. Your previously created data is going to be saved.

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:

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)

How to use command prompt on Windows

How to use terminal on Mac

Watch video tutorail:

Download HEROKU

Video commands:

git clone
cd cors-anywhere
heroku login
heroku create YOUR_APP_NAME
heroku config:set -a YOUR_APP_NAME CORSANYWHERE_RATELIMIT="60 1"
git push heroku master

Use CORS in settings:

There are 2 ways to use this:
1. Create new player in Player Manager section and create new playlist in Playlist Manager section and get shortcode in Shortcode section for these created player:

2. Use direct shortcodes available in Shortcodes section to place player in page without creating it beforehand in Player Manager section:

Supported radio formats are the following:



Shoutcast version 1 example:;

Shoutcast version 2 example:;



Icecast example:



Radiojar example:


Link to m3u8

HLS example:

Additional settings


You can pass your own config parameters to hls in Edit player / General / HLS tab:

For example:

    maxFragLookUpTolerance: 0.25,
    liveSyncDurationCount: 3,
    liveMaxLatencyDurationCount: Infinity

Shortcode with one radio:

Shoutcast version 1:

Shoutcast version 2:



Shortcode with multiple radios:

(newlines added for readability)

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:

You can set these options in settings:

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.

Using query string parameters. Rules:

- must include mrp-query-instance=INSTANCE_NAME so player can be recognized (INSTANCE_NAME is from settings)
- all parameters begins with "mrp-"
- replace parameter camelCase with dash
use + instead of space
use comma for array values

Player settings example:

For parameters check configuration

How to create radio url from query string?;&mrp-radio-title=ROCK RADIO SI&mrp-radio-thumb=data/stations/ROCK RADIO SI.jpg

For parameters check media section (remove data- from parameter)

How to create radio url playlist from query string (multiple radios)?,shoutcast&mrp-radio-url=;,;&mrp-radio-title=ROCK RADIO SI,ORF Radio Wien&mrp-radio-thumb=data/stations/ROCK RADIO SI.jpg,data/stations/ORF Radio Wien.jpg

For parameters check media section (remove data- from parameter)

You need to have the same number of properties! (so for each radio in url same number of url, same number of title etc..)


If player_id is used in shortcode then INSTANCE_NAME is mrp_playerPLAYER_ID (or if instance_id is used in shortcode then its mrp_playerINSTANCE_ID)

[apmrp player_id="1" playlist_id="2"]

If anonymous shortcode is used INSTANCE_NAME is mrp_playerUNIQUE_ID

[apmrp preset="default" radio_url="RADIO_URL"]

UNIQUE_ID is generated dynamically starting from 0 for every new player in page. Which means first player in page is going to have UNIQUE_ID 0. 

How to hide playlist and use just player?

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

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.

If you use multiple players in the same page either:

1. Create new player for every instance you use:

Wrong: (2 same players cannot repeat in the same page!)
[apmrp player_id='4' playlist_id="1"]
[apmrp player_id='4' playlist_id="2"]
[apmrp player_id='3' playlist_id="1"]
[apmrp player_id='4' playlist_id="2"]

2. Use same player with different instance_id in shortcode:
[apmrp player_id='4' playlist_id="1" instance_id="0"]
[apmrp player_id='4' playlist_id="2" instance_id="1"]
(instance_id is just a unique number you choose for each player)

Player can use following embedding functionality in embed screen.

Embed code

You can generate embed code for whole playlist of for a single radio. This is controlled in Edit player / General settings / Embed tab:

Radio url link

Url link offers direct link to radio on your website.

To make the player automatically become fixed to page bottom if user scrolls down the page, use the following settings in Edit Player / General / 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 Edit Player / General / Options 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:

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

Settings for playback rate are available in Edit Player / General / Options 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

How to include visualizer into the player?

Activate visualizer in Player settings:

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:

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

How to create a selector above the player which offers ability to change playlist or load a new radio station directly in the page?

You can activate this option in Player manager / Playlist selector tab:

Plugin offers the option to design your own player skin (using php, html, css).

When plugin is installed and activated it will create following folder where you can place your own template files: wp-content\uploads\mrp-template-dir

Example of a template file (and its css) is located in plugin package / _documentation / samples / template example directory. For test, you can copy these files into wp-content\uploads\mrp-template-dir and create a custom template skin in Player manager / Add Player with the same name as these files (artwork_custom)

How to design your own skin?

Start by copying any of the skin code from wp-content/plugins/apmrp/includes/html_markup.html file.

Important notes when creating template:

- you have to retain classes which are already included on player buttons etc.. But you can add your own classes as well and your css.

- you need to have template php file and css file with the same name in wp-content\uploads\mrp-template-dir

- you have to provide css (you can start by coping css from some player skin)

- when choosing template name avoid current skin names already present (in wp-content\plugins\apmrp\includes\preset_config)

- name the function inside php template file: (example)

function mrp_template_{artwork_custom}($preset, $wrapper_id, $options){

To load custom template css file, use this option in Global settings (this will load all css files from this directory):

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.

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=""></script>
<ins class="adsbygoogle"
(adsbygoogle = window.adsbygoogle || []).push({});


Using audio adverts in player

Audio adverts are defined in Ad manager section:

Audio adverts ca also be added to any player using ad_id in shortcode. For example:

[apmrp player_id="1" playlist_id="2" ad_id="5"]

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).

Ad options can be adjusted in Player Manager / Edit Player / Audio adverts tab.

Following callbacks are supported:

mrp_playerID is constructed from mrp_player + ID which comes from shortcode ( [apmrp player_id='4'] ). If you are adding shortcode anonymously ( [apmrp type="shoutcast" type="shoutcastV1" radio_url=";"] ) then ID is generated dynamically starting from 0 for every new player in page.

mrp_playerID.addEventListener('setupDone', function(data){

    //called when plugin has been instantiated and is ready to use api, returns (instance, instanceName)


mrp_playerID.addEventListener('soundStart', function(data){

    //called on song start, returns (instance, instanceName, radioData)


mrp_playerID.addEventListener('soundPlay', function(data){

    //called on song play, returns (instance, instanceName, radioData)


mrp_playerID.addEventListener('soundPause', function(data){

    //called on song pause, returns (instance, instanceName, radioData)


mrp_playerID.addEventListener('soundError', function(data){

    //called on song error, returns (instance, instanceName, radioData)


mrp_playerID.addEventListener('radioStartLoad', function(data){

    //called when radio starts loading, returns (instance, instanceName)   

mrp_playerID.addEventListener('radioEndLoad', function(data){

    //called when radio ends loading, returns (instance, instanceName)         


mrp_playerID.addEventListener('clickPlaylistItem', function(data){

    //called when new radio is clicked in radio list, returns (instance, instanceName)         



How to use callbacks in wordpress text editor:

function addEvents(){
		mrp_playerID.addEventListener('mediaStart', function(data){

How to use returned parameters:

mrp_playerID.addEventListener('soundStart', function(data){
    //called on song start, returns (instance, instanceName, radioData)



Following api methods are included:

mrp_playerID is constructed from mrp_player + ID which comes from shortcode ( [apmrp player_id='4'] ). If you are adding shortcode anonymously ( [apmrp type="shoutcast" type="shoutcastV1" radio_url=";"] ) then ID is generated dynamically starting from 0 for every new player in page.

mrp_playerID.playMedia(); //Play current media

mrp_playerID.pauseMedia(); //Pause current media

mrp_playerID.togglePlayback(); //Toggle current media (pause/play)

/* set volume accept values 0-1 */
mrp_playerID.setVolume(0); //Set volume (0)
mrp_playerID.setVolume(0.5); //Set volume (0.5)
mrp_playerID.setVolume(1); //Set volume (1)

mrp_playerID.toggleMute(); //Toggle mute

mrp_playerID.setPlaybackRate(0.5); //Set playback rate (0.5)
mrp_playerID.setPlaybackRate(1); //Set playback rate (1)
mrp_playerID.setPlaybackRate(2); //Set playback rate (2)

mrp_playerID.loadPlaylist('.mrp-playlist-radio_ID'); //load radio station on demand  

    var data = {}
    obj.type = 'shoutcast';
    obj.radioUrl = 'radio_url';
    obj.metadataUrl = 'optional_metadata_url';
mrp_playerID.loadRadio(data)//load radio from data

mrp_playerID.destroyInstance(); //Destroy plugin instance

mrp_playerID.getRadioData(); //Get current playing radio data

mrp_playerID.openPopup(); //open player in popup window (Check popup section for more info)


How to use api methods in wordpress post?

Use following code examples in post area.

Toggle playback:

<a onclick="togglePlayback();return false;" href="#">Toggle playback </a>
    function togglePlayback(){   
        if(mrp_playerID)mrp_playerID.togglePlayback(); return false;  

Set volume:

<a onclick="setVolume(0.5);return false;" href="#">set volume </a>
    function setVolume(val){   
        if(mrp_playerID)mrp_playerID.setVolume(val); return false;  

Load radio station from active playlist:

<a onclick="loadPlaylist();return false;" href="#">load radio station</a>
    function loadPlaylist(val){   
        if(mrp_playerID)mrp_playerID.loadPlaylist('.mrp-playlist-RADIO_ID'); return false;  

Mixed content error

If you are getting mixed content error in browser console:

Mixed Content: The page at (your-domain) was loaded over HTTPS, but requested an insecure script http.....
 This request has been blocked; the content must be served over HTTPS.    

That mean that Chrome is blocking mixed content. Both your page and radio url your are using must have the same prefix (HTTP or HTTPS)


Autoplay is disabled since recent browser changes and requires user interaction with the page before (like a click or keypress) to start playback:

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 , 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.

How to contact us?

If you have any questions after purchase, send a message at, and provide your PURCHASE CODE.