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!
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.
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.
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.php 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.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)
})
mrp_playerID is constructed from mrp_player + ID.
ID is generated automatically starting from 0 for every new player you place in page. For example, if you add one player in page, ID will be 0 (so it becomes mrp_player0).
You can also manually add instance_id in shortcode (then the plugin will use this as ID), example (This player will have ID 1):
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.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)
mrp_playerID is constructed from mrp_player + ID.
ID is generated automatically starting from 0 for every new player you place in page. For example, if you add one player in page, ID will be 0 (so it becomes mrp_player0).
You can also manually add instance_id in shortcode (then the plugin will use this as ID), example (This player will have ID 1):
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>
Schedule AddOn is available on the following link
First make sure addOn is activated together with main Radio player plugin.
Also, make sure you have the latest version of main Radio player plugin.
You can add schedule to player in any timeframe or in general.
Which opens add schedule modal window
Sometimes some schedule you create may overlap with another schedule in which case you may get a warning. Having mutiple schedules for the same date and time period will not neccessarily cause an error in the player, but only first schedule will actually be shown (played) in the player.
Once you set up a schedule it is ready to be displayed in the player on the front page. Schedule requires a player shortcode to exist in the page. For example:
[apmrp player_id="X"]
Note that playlist_id in shortcode is not required for player with schedule set, because player will play what is set on schedule, not what is set with playlist_id
When the schedule is set on the player, if the schedule is not active at any given time, player will not be displayed. So if you add a schedule to a player, expect a player to be hidden until the schedule becomes active.
Aside from setting schedule on the player, you can also display schedule calendar in the page using the following shortcode.
[apmrp_schedule_table player_id="X" calendar_type="week"] calendar_type= week / month
This will display the same calendar which is shown in the schedule tab. This calendar is shown all the time and its not related the the player itself (except for showing player schedule times).
Clicking the event in calendar can open info dialog (more info about the event).
Dialog info can be enabled in Schedule / General tab:
Clicking search can open search dialog in calendar
Search can be enabled in Schedule / General tab:
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.
Social sharing
Using Share feature
Sharing can use using default method or browser native share method (where supported).
This is controlled in Edit player / General settings / Social sharing tab.
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.