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!
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?
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/
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 WindowsWatch video tutorail:
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:
Shoutcast:
- SHOUTCAST LINK http://[domain]:[port]/; OR http://[ip]:[port]/;
Shoutcast version 1 example: http://46.252.154.133:8080/;
Shoutcast version 2 example: http://212.18.63.135:9034/;
- ICECAST LINK http://[domain]:[port]/mountpoint
Icecast example: http://149.56.195.94:8416/autodj
- RADIOJAR LINK http://[domain]:[port]/mountpoint
Radiojar example: http://link.radiojar.com/radio-apopsi
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
You can pass your own config parameters to hls in Edit player / General / HLS tab:
For example:
hlsConfig:{
maxFragLookUpTolerance: 0.25,
liveSyncDurationCount: 3,
liveMaxLatencyDurationCount: Infinity
}
Shoutcast version 1:
Shoutcast version 2:
Icecast:
Radiojar:
(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:
Get artwork from Itunes.
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 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 valuesPlayer settings example:
www.domain.com/some-page?mrp-query-instance=INSTANCE_NAME&mrp-preset=default&mrp-active-item=5&mrp-use-share=1&mrp-create-history-list=1
For parameters check configuration
www.domain.com/some-page?mrp-query-instance=INSTANCE_NAME&mrp-type=shoutcast&mrp-radio-url=http://stream.rockradio.si:9034/;&mrp-radio-title=ROCK RADIO SI&mrp-radio-thumb=data/stations/ROCK RADIO SI.jpg
For parameters check media section (remove data- from parameter)
www.domain.com/some-page?mrp-query-instance=INSTANCE_NAME&mrp-type=shoutcast,shoutcast&mrp-radio-url=http://stream.rockradio.si:9034/;,http://185.85.28.149:8000/;&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..)
INSTANCE_NAME: 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.
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.
[apmrp player_id='4' playlist_id="1"] [apmrp player_id='4' playlist_id="2"]Correct:
[apmrp player_id='3' playlist_id="1"] [apmrp player_id='4' playlist_id="2"]
[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.
You can generate embed code for whole playlist of for a single radio. This is controlled in Edit player / General settings / Embed tab:
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: 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 Edit Player / General / 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.
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
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:
.mrp-canvas{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
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)
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")
<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.
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="http://209.236.126.18:8002/;"] ) 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:
<script>
addEvents();
function addEvents(){
if(!window.mrp_playerID){
setTimeout(addEvents,100);
}else{
mrp_playerID.addEventListener('mediaStart', function(data){
});
}
}
</script>
How to use returned parameters:
mrp_playerID.addEventListener('soundStart', function(data){
//called on song start, returns (instance, instanceName, radioData)
console.log(data.instance);
console.log(data.instanceName);
console.log(data.counter);
});
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="http://209.236.126.18:8002/;"] ) 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)
Use following code examples in post area.
Toggle playback:
<a onclick="togglePlayback();return false;" href="#">Toggle playback </a>
<script>
function togglePlayback(){
if(mrp_playerID)mrp_playerID.togglePlayback(); return false;
};
</script>
Set volume:
<a onclick="setVolume(0.5);return false;" href="#">set volume </a>
<script>
function setVolume(val){
if(mrp_playerID)mrp_playerID.setVolume(val); return false;
};
</script>
Load radio station from active playlist:
<a onclick="loadPlaylist();return false;" href="#">load radio station</a>
<script>
function loadPlaylist(val){
if(mrp_playerID)mrp_playerID.loadPlaylist('.mrp-playlist-RADIO_ID'); return false;
};
</script>
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)
https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content
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
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.
If you have any questions after purchase, send a message at http://codecanyon.net/user/Tean#contact, and provide your PURCHASE CODE.