Modern Radio Player
Javascript
- by: Tean
- codecanyon.net/user/Tean
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.
Installation
Note: This installation example is based on default.html demo (which means it uses default.css file in head tag, and HTML markup for this player), but installation process is the same for all demos.
Include the following css and javascript code into HEAD section of the page:
<link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css" media="all" /><!-- playlist scroll -->
<link id="mrp-css" rel="stylesheet" type="text/css" href="css/default.css" /><!-- Include player css file! -->
<script type="text/javascript" src="js/new.js"></script>
Include player and playlist HTML into BODY section of the page:
<div id="mrp-wrapper">
...rest of player markup
</div>
<!-- PLAYLIST LIST -->
<div id="mrp-playlist-list">
<div class="playlist1">
<div class="mrp-playlist-item" data-type="shoutcast" data-radio-url="http://192.99.8.170:8098/;"></div>
</div>
</div>
Initialize the plugin:
<script type="text/javascript">
var player;
document.addEventListener("DOMContentLoaded", function(event) {
var settings = {
instanceName:"radio1",
sourcePath:"",
activePlaylist:".playlist1",
activeItem:0,
volume:0.5,
autoPlay:false,
usePlaylistScroll:true,
lastPlayedInterval:15000,
createHistoryList:true,
getHistoryArtwork:true,
defaultHistoryArtwork: "data/default_artwork/star_small.png",
getPlayerArtwork:true,
defaultPlayerArtwork: "data/default_artwork/star.png",
defaultSongArtist: "DATA NOT AVAILABLE",
defaultSongTitle: "DATA NOT AVAILABLE",
};
player = new mrp(document.getElementById("mrp-wrapper"), settings);
});
</script>
Configuration
All player options that can be set when initalizing plugin:
Parameters:
| Parameter | Value | description |
|---|---|---|
| sourcePath | Path to plugin root (optional) | |
| instanceName | Name of the player instance (String), can be used for api (no spacing or special chars) | |
| activePlaylist | active playlist on player start. Leave empty for none. Check working with playlist section for more info. | |
| activeItem | radio to load on start from active playlist (0 = first radio, 1 = second radio.. etc) | |
| volume | 0-1 | Media volume |
| autoPlay | true / false | Auto play media. Defaults to false on mobile. |
| preload | auto/metadata/none | Self hosted video preload attribute. |
| useKeyboardNavigationForPlayback | true,false | Use keyboard navigation for controling playback. By default keyboard controls are only active when mouse is above the player. Supports multiple players per page. (spacebar = pause, m = toggle mute, up arrow = volume up, down arrow = volume down) |
| useGlobalKeyboardControls | true,false | If true, keyboard controls are always active. Supports only single player per page. This method may interfere with other keyboard inputs on the page. Use with caution. |
| togglePlaybackOnMultipleInstances | true / false | Pause / play multiple instances interchangeably (needs to be set on any instance that needs this feature). |
| usePlaylistScroll | true / false | Use playlist scroll for history and radio list. |
| playlistScrollType | perfect-scrollbar / browser | Choose which playlist scroll to use. You can choose between PerfectScrollbar and default browser scroll |
| getPlayerArtwork | true / false | Fetch player artwork cover. Set this to false and you can manually set player artwork. |
| artworkSource | itunes / audiodb | Choose from which provider to fetch cover artwork. |
| audiodbApk | Audio db api key.
If you use audiodb you will need a private api key: https://www.theaudiodb.com/api_apply.php |
|
| defaultPlayerArtwork | url to image | Default player artwork cover when artwork cover is not available. |
| defaultSongArtist | string | Default song artist when current playing song in not available. |
| defaultSongTitle | string | Default song title when current playing song in not available. |
| useFullTitle | true / false | Display full title instead of splitting song to artist - title. This may help if you song title contains dash (-) characters so it does not get split wrong. |
| useServerStats | true / false | Get Shoutcast server statistics (title, listeners, url etc...) |
| loadingRadioMessage | Loading radio station.. | Message displayed when radio is loading. |
| offlineRadioMessage | Radio station is currently offline. | Message displayed when radio is offline. |
| radioMetadataNotAvailableMessage | Radio stream metadata in not available. | Message displayed when radio metadata is not available. |
| playlistTitleArtistSeparator | Separator between title and artist in playlist. | |
| playerArtworkSize | 96x96bb / 128x128bb / 192x192bb / 256x256bb / 384x384bb | Available player artwork sizes from iTunes. |
| createHistoryList | true / false | Get last played song history list. |
| createHistoryListAsItPlays | true / false | With this enabled, each last played song thumbnail will be created after current playing radio song finishes. Use this if you have many players in page to save search limit restrictions from iTunes for image artwork. Note: this is an option for Shoutcast, it always works like that when Icecast is used! |
| getHistoryArtwork | true / false | Get artwork for the last played song history list. |
| defaultHistoryArtwork | url to image | Default history thumbnail for history list when artwork is not available. |
| closeStationListOnSelectStation | true / false | Close station list and open history list when you select new station. |
| fixRadioUrl | true / false | This will add a semicolon to the end of the radio url (for playback). Some radio stream require this while others may not. For example: http://some-radio-url/; |
| createRadioList | true / false | Create radio list from all radio stations inside a playlist which enables to load a new radio station when player is opened. |
| lastPlayedInterval | number | Last played interval at which current playing song and song history is retrieved (miliseconds). It is advised not to set this below 10000 miliseconds! |
| enableCors | true / false | Enable cors. |
| cors | https://cors-anywhere.herokuapp.com/ | cors proxy server |
| useCorsForAudio | true / false | This will prefix cors infront radio url. You can use this option for example if you have SSL website with HTTPS cors. |
CORS
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)
How to use command prompt on WindowsHow to use terminal on Mac
Watch 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:
| Parameter | Value | description |
|---|---|---|
| enableCors | true / false | Enable cors. |
| cors | https://cors-anywhere.herokuapp.com/ | cors proxy server |
| useCorsForAudio | true / false | This will prefix cors infront radio url. You can use this option for example if you have SSL website with HTTPS cors. |
Working with playlist
This section explains how to load a playlist on start.
Below player markup in the page we have playlist markup which contains list of one or more playlists:
<!-- PLAYLIST LIST -->
<div id="mrp-playlist-list">
<div class="playlist1">
<div class="mrp-playlist-item" data-type="shoutcast" data-radio-url="http://stream.rockradio.si:9034/;"></div>
<div class="mrp-playlist-item" data-type="shoutcast" data-radio-url="http://s10.voscast.com:9942/;"></div>
<div class="mrp-playlist-item" data-type="shoutcast" data-radio-url="http://46.252.154.133:8080/;" data-version="1"></div>
</div>
<div class="playlist2">
<div class="mrp-playlist-item" data-type="icecast" data-radio-url="https://radio.martiproduccions.com/capitalhd" data-radio-title="Ràdio Capital en HD" data-radio-thumb="https://www.radiocapital.cat/wp-content/uploads/2014/09/logo_tune_in.png" data-metadata-url="https://radio.martiproduccions.com/status-json.xsl"></div>
</div>
</div>
To load a specific playlist from this list (mrp-playlist-list) use element class attribute in settings, for example:
var settings = {
activePlaylist:".playlist1"
...
}
This will load playlist1 (first playlist in our example)
Shoutcast
Required format
- SHOUTCAST LINK http://[domain]:[port]/; OR http://[ip]:[port]/;
Note: for Shoutcast make sure radio url ends in '/;'
Shoutcast version 1 example (note required data-version="1" attribute):
<div class="mrp-playlist-item" data-type="shoutcast" data-radio-url="http://46.252.154.133:8080/;" data-version="1"></div>
Shoutcast version 2 example (data-version is not required for Shoutcast version 2 because this is default):
<div class="mrp-playlist-item playlist3" data-type="shoutcast" data-radio-url="http://stream.rockradio.si:9034/;"></div>
Icecast
Required format
- ICECAST LINK http://[domain]:[port]/mountpoint
Icecast example:
<div class="mrp-playlist-item" data-type="icecast" data-radio-url="http://149.56.195.94:8416/autodj"></div>
<div class="mrp-playlist-item" data-type="icecast" data-radio-url="http://play.global.audio:80/nova.aac"></div>
Radiojar
Required format
- RADIOJAR LINK http://[domain]:[port]/mountpoint
Radiojar example:
<div class="mrp-playlist-item" data-type="radiojar" data-radio-url="http://link.radiojar.com/radio-apopsi"></div>
HLS
Hls example:
<div class="mrp-playlist-item" data-type="hls" data-radio-url="http://a.files.bbci.co.uk/media/live/manifesto/audio/simulcast/hls/nonuk/sbr_low/ak/bbc_radio_two.m3u8" data-title="BBC Radio 2"></div>
Additional settings
You can pass your own config parameters to hls using following settings:
hlsConfig:{...}
For example:
hlsConfig:{
maxFragLookUpTolerance: 0.25,
liveSyncDurationCount: 3,
liveMaxLatencyDurationCount: Infinity
}
Possible Radio parameters:
| Parameter | Required | Value |
|---|---|---|
| data-type | yes | shoutcast / icecast / radiojar / hls |
| data-radio-url | yes | radio url |
| data-version | For Shoutcast, version 1 or 2 (default) | |
| data-metadata-url | Optional url for radio metadata. Use this if you know direct url to your radio metadata. | |
| data-history-url | Optional url for radio history. Use this if you know direct url to your radio history. | |
| data-sid | Shoutcast stream SID (optional, default 1) | |
| data-radio-title | Radio station title for radio station list | |
| data-radio-thumb | Radio station thumbnail for radio station list | |
| data-playback-rate | media playback speed: http://www.w3schools.com/tags/av_prop_playbackrate.asp |
Artwork source
When you want to retrieve player artwork using getPlayerArtwork, and artwork for the history list (if you use history) using getHistoryArtwork you can choose between the following artworkSource
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 these options in settings:
getHistoryArtwork:true, getPlayerArtwork:true, artworkSource:'audiodb',//or itunes audiodbApk:'audio db api key', lastPlayedInterval:10000
Note that both may be limited and you should carefully use lastPlayedInterval settings! The bigger the number, the less frequently artwork will be requested.
Query string parameters
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
How to create radio url from query string?
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)
How to create radio url playlist from query string (multiple radios)?
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..)
Hide playlist
How to hide playlist and use just player?
If you want to hide playlist and use just player part, use these settings:
1. In settings:
createRadioList:false, createHistoryList:false, getHistoryArtwork:false, usePlaylistScroll:false,
2. In HTML, detete this element:
<div class="mrp-playlist-holder"> </div>
Depending on the skin, playlist may contain some buttons like open share or similar, then you can move this buttons somewhere into player if you need them.
Multiple Players in page
To use multiple players in the sam epage, just duplicate player settings and player HTML.
Example, HTML part in page BODY:
<div id="mrp-wrapper">
...rest of player markup
</div>
<div id="mrp-wrapper2">
...rest of player markup
</div>
<!-- PLAYLIST LIST -->
<div id="mrp-playlist-list">
<div class="playlist1">
<div class="mrp-playlist-item" data-type="shoutcast" data-radio-url="http://192.99.8.170:8098/;"></div>
</div>
</div>
Javascript part:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
var settings1 = {
instanceName:"player1",
sourcePath:"",
activePlaylist:".playlist1",
activeItem:0,
volume:0.5,
autoPlay:false
...
};
new mrp(document.getElementById("mrp-wrapper"), settings);
var settings2 = {
instanceName:"player2",
sourcePath:"",
activePlaylist:".playlist1",
activeItem:0,
volume:0.5,
autoPlay:false
...
};
new mrp(document.getElementById("mrp-wrapper2"), settings2);
});
</script>
Demo multiple_players.html has multiple players implemented.
Search field in playlist
To use search field, add this markup in the player:
<input class="mrp-search-filter" type="text" placeholder="Search.." title="Search">
Also add required css, if not preset in player css file.
Search field works as follows: when history list is opened it searches history, when radio station list is opened, it search radio stations.
Embedding
To use embed, add this markup in the player:
Embed toggle button:
<div class="mrp-embed-toggle mrp-contr-btn" data-tooltip="Embed">
<svg aria-hidden="true" focusable="false" role="img"viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg>
</div>
Embed holder:
<div class="mrp-embed-holder">
<div class="mrp-embed-holder-inner">
<div class="mrp-embed-data">
<div class="mrp-embed-title">Embed this radio:</div>
<div class="mrp-embed-box">
<div class="mrp-embed-field-wrap mrp-audio-embed">Embed url goes here</div>
<div class="mrp-embed-copy">Copy</div>
</div>
<div class="mrp-embed-title">Copy radio link:</div>
<div class="mrp-embed-box">
<div class="mrp-embed-field-wrap mrp-audio-link">Embed url goes here</div>
<div class="mrp-embed-copy">Copy</div>
</div>
</div>
</div>
<div class="mrp-embed-close mrp-contr-btn" data-tooltip="Close">
<svg role="img" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>
</div>
</div>
Also add required css, if not preset in player css file.
Embed code
You can set embed url in settings with embedSrc
Radio url link
Url link offers direct link to radio on your website. This is set internally by the player.
Available settings:
| Parameter | Required | Value |
|---|---|---|
| embedSrc | Url on your website which holds the player you want to use as embed, for example: http://your-domain.com/some-folder/player-embed.html. Then you make this player-embed.html load videos. This url will be added to iframe: <iframe width="100%" height="100%" src="'+embedSrc+'" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
Minimize on scroll
To make the player automatically become fixed to page bottom if user scrolls down the page, use the following settings:
Settings available:
| Parameter | Required | Value |
|---|---|---|
| minimizeOnScroll | true / false | Minimize on page scroll when player gets out of visible area. Example demo minimize_on_scroll.html Works for all layouts except outer and wall. |
| minimizeOnScrollOnlyIfPlaying | true / false | Minimize on page scroll when player gets out of visible area only if video is playing. minimizeOnScroll needs to be true as well for this to work. |
| minimizeClass | class name | Add class which will be attached to player on minimize. (mvp-minimize-bl / mvp-minimize-br) |
| hidePlaylistOnMinimize | true / false | Hide playlist on minimize (if opened). |
| useMinimizeCloseBtn | true / false | Use button to close player when minimized and end minimize on scroll. |
Demo which has this implemented in minimize.html
Mini player
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 selected, there will be no mini player available! Also, mini player is not available in popup window.
Requires button to toggle mini player version:
<div class="mrp-player-collapse mrp-contr-btn" data-tooltip="Close">
<svg aria-hidden="true" role="img" viewBox="0 0 512 512"><path d="M256 0C114.6 0 0 114.6 0 256S114.6 512 256 512s256-114.6 256-256S397.4 0 256 0zM244.7 395.3l-112-112c-4.6-4.6-5.9-11.5-3.5-17.4s8.3-9.9 14.8-9.9l64 0 0-96c0-17.7 14.3-32 32-32l32 0c17.7 0 32 14.3 32 32l0 96 64 0c6.5 0 12.3 3.9 14.8 9.9s1.1 12.9-3.5 17.4l-112 112c-6.2 6.2-16.4 6.2-22.6 0z"/></svg>
</div>
Requires mini player:
<div class="mrp-mini">
<div class="mrp-playback-toggle mrp-contr-btn">
<div class="mrp-pause-icon">
<svg role="img" area-hidden="true" viewBox="0 0 448 512"><path d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z"></path></svg>
</div>
<div class="mrp-play-icon">
<svg role="img" area-hidden="true" viewBox="0 0 448 512"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"></path></svg>
</div>
</div>
<div class="mrp-mini-info">
<div class="mrp-player-title"></div>
<div class="mrp-player-artist"></div>
</div>
<div class="mrp-volume-toggle">
<div class="mrp-volume-icon mrp-contr-btn" data-tooltip="Volume">
<svg role="img" area-hidden="true" viewBox="0 0 576 512"><path d="M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zm233.32-51.08c-11.17-7.33-26.18-4.24-33.51 6.95-7.34 11.17-4.22 26.18 6.95 33.51 66.27 43.49 105.82 116.6 105.82 195.58 0 78.98-39.55 152.09-105.82 195.58-11.17 7.32-14.29 22.34-6.95 33.5 7.04 10.71 21.93 14.56 33.51 6.95C528.27 439.58 576 351.33 576 256S528.27 72.43 448.35 19.97zM480 256c0-63.53-32.06-121.94-85.77-156.24-11.19-7.14-26.03-3.82-33.12 7.46s-3.78 26.21 7.41 33.36C408.27 165.97 432 209.11 432 256s-23.73 90.03-63.48 115.42c-11.19 7.14-14.5 22.07-7.41 33.36 6.51 10.36 21.12 15.14 33.12 7.46C447.94 377.94 480 319.54 480 256zm-141.77-76.87c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 228.28 336 241.63 336 256c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.86z"></path></svg>
</div>
<div class="mrp-mute-icon mrp-contr-btn" data-tooltip="Volume">
<svg role="img" area-hidden="true" viewBox="0 0 640 512"><path d="M633.82 458.1l-69-53.33C592.42 360.8 608 309.68 608 256c0-95.33-47.73-183.58-127.65-236.03-11.17-7.33-26.18-4.24-33.51 6.95-7.34 11.17-4.22 26.18 6.95 33.51 66.27 43.49 105.82 116.6 105.82 195.58 0 42.78-11.96 83.59-33.22 119.06l-38.12-29.46C503.49 318.68 512 288.06 512 256c0-63.09-32.06-122.09-85.77-156.16-11.19-7.09-26.03-3.8-33.12 7.41-7.09 11.2-3.78 26.03 7.41 33.13C440.27 165.59 464 209.44 464 256c0 21.21-5.03 41.57-14.2 59.88l-39.56-30.58c3.38-9.35 5.76-19.07 5.76-29.3 0-31.88-17.53-61.33-45.77-76.88-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61 11.76 6.46 19.12 18.18 20.4 31.06L288 190.82V88.02c0-21.46-25.96-31.98-40.97-16.97l-49.71 49.7L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.36 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.41-6.97 4.16-17.02-2.82-22.45zM32 184v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V352.6L43.76 163.84C36.86 168.05 32 175.32 32 184z"></path></svg>
</div>
</div>
<div class="mrp-player-expand mrp-contr-btn" data-tooltip="Open">
<svg role="img" area-hidden="true" viewBox="0 0 512 512"><path d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"/></svg>
</div>
<div class="mrp-tooltip-mini"></div>
</div>
Autoplay in viewport
To make the player autoplay when user scroll the page and video player enters into view use the following settings:
Settings available:
| Parameter | Required | Value |
|---|---|---|
| autoPlayInViewport | true / false | Start playing media when player is visible on the page by user scrolling. |
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
Demo which has this implemented in autoplay_in_viewport.html
Open in Popup window
Note: when using player in popup, its restricted to one player per page.
Any demo can be opened in popup window. Player in popup window can also be opened using api method player.openPopup();
Using popup feature requires
popup.html file in the same directory where player folders are located (js, css, includes..)
In popup.html file in head tag set link to CSS file of the skin you want to use, for example:
<link rel="stylesheet" type="text/css" href="css/default.css"/>
In player HTML, button to open popup:
<div class="mrp-popup-toggle mrp-contr-btn" data-tooltip="Expand">
<svg role="img" area-hidden="true" viewBox="0 0 448 512"><path d="M448 344v112a23.94 23.94 0 0 1-24 24H312c-21.39 0-32.09-25.9-17-41l36.2-36.2L224 295.6 116.77 402.9 153 439c15.09 15.1 4.39 41-17 41H24a23.94 23.94 0 0 1-24-24V344c0-21.4 25.89-32.1 41-17l36.19 36.2L184.46 256 77.18 148.7 41 185c-15.1 15.1-41 4.4-41-17V56a23.94 23.94 0 0 1 24-24h112c21.39 0 32.09 25.9 17 41l-36.2 36.2L224 216.4l107.23-107.3L295 73c-15.09-15.1-4.39-41 17-41h112a23.94 23.94 0 0 1 24 24v112c0 21.4-25.89 32.1-41 17l-36.19-36.2L263.54 256l107.28 107.3L407 327.1c15.1-15.2 41-4.5 41 16.9z"></path></svg>
</div>
To open player in popup on start (automatically or by clicking DOM element) without initializing the player in page beforehand use these settings:
settings.popupWidth =320;//choose popup size
settings.popupHeight = 590;
mrp_player_auto_instance = {};
mrp_player_auto_instance.settings = settings;//add settings
mrp_player_auto_instance.wrapper = document.getElementById("mrp-wrapper");//add player wrapper element
mrpOpenPopup(settings);//call open popup
Audio visualizer
How to include visualizer into the player?
Add script tag into the HEAD:
<script src="js/wave.js"></script>
Add canvas element somewhere where you want visualizer to appear (visualizer can be placed inside or outside of the player):
<canvas class="mrp-canvas"></canvas>
Add folowing settings:
useVisualizer: true, visualizerType: 'wave', visualizerWidth: '100%', visualizerHeight: '200', visualizerStroke: 1, visualizerColors: ['#333','#ff2a67','#7ee8fa']
Settings:
| Parameter | Required | Value |
|---|---|---|
| visualizerType | string | "bars", "bars blocks", "big bars", "cubes", "dualbars", "dualbars blocks", "fireworks", "flower","flower blocks", "orbs", "ring", "rings", "round wave", "shine", "shine rings", "shockwave", "star","static", "stitches", "web", "wave"
You can see demos at https://foobar404.github.io/Wave.js/?wave=bars#/ |
| visualizerWidth | Enter number or percent (100%, for example, if you want visualizer to be 100% wide as some container in which visualizer is placed) | |
| visualizerHeight | Enter number or percent (100%, for example, if you want visualizer to be 100% high as some container in which visualizer is placed) | |
| visualizerStroke | number | The thickness of the lines that are drawn. Default is 2. |
| visualizerColors | array of colors | An array of colors used in the visual. Any valid css color is legal. Some visualizers require multiple colors, while some only one. You can see demos at https://foobar404.github.io/Wave.js/?wave=bars#/ and how many colors they use. |
| visualizerParent | DOM selector (ID or classname) | Use this if you want to place visualizer in custom element on your page (outside of player). VisualizerParent would be a div for example. |
Playback rate
Playback rate button in player enables changing audio playback rate on the fly.
Requires button to toggle mini playback rate:
<div class="mrp-playback-rate-toggle" data-tooltip="Speed">
<div class="mrp-playback-rate-toggle-inner">1X</div>
</div>
Settings:
playbackRateArr:[0.5,1,1.2,1.5,2]
Comma separated list of playback rate values. Only enter valid playback rates!
Note that you can also set playback rate on the individual radio station using data-playback-rate
Callbacks
Following callbacks are supported:
player.addEventListener('setupDone', function(data){
//called when plugin has been instantiated and is ready to use api, returns (instance, instanceName)
})
player.addEventListener('soundStart', function(data){
//called on song start, returns (instance, instanceName, radioData)
})
player.addEventListener('soundPlay', function(data){
//called on song play, returns (instance, instanceName, radioData)
})
player.addEventListener('soundPause', function(data){
//called on song pause, returns (instance, instanceName, radioData)
})
player.addEventListener('soundError', function(data){
//called on song error, returns (instance, instanceName, radioData)
})
player.addEventListener('radioStartLoad', function(data){
//called when radio starts loading, returns (instance, instanceName)
})
player.addEventListener('radioEndLoad', function(data){
//called when radio ends loading, returns (instance, instanceName)
})
player.addEventListener('clickPlaylistItem', function(data){
//called when new radio is clicked in radio list, returns (instance, instanceName)
})
How to use returned parameters:
player.addEventListener('soundStart', function(data){
//called on song start, returns (instance, instanceName, counter)
console.log(data.instance);
console.log(data.instanceName);
//some api methods
//pause / play radio
data.instance.togglePlayback();
//set playback rate
data.instance.setPlaybackRate(1.5);
});
API methods
Following api methods are included:
player.playMedia(); //Play current media player.pauseMedia(); //Pause current media player.togglePlayback(); //Toggle current media (pause/play) /* set volume accept values 0-1 */ ---------------------------------- player.setVolume(0); //Set volume (0) player.setVolume(0.5); //Set volume (0.5) player.setVolume(1); //Set volume (1) player.toggleMute(); //Toggle mute player.setPlaybackRate(0.5); //Set playback rate (0.5) player.setPlaybackRate(1); //Set playback rate (1) player.setPlaybackRate(2); //Set playback rate (2) player.loadPlaylist(playlist class attribute here, same as from activePlaylist); //load new playlist on demand example: <a href="#" onclick="player.loadPlaylist('.playlist6');return false;">load playlist 6</a> //load new radio station var data = {} obj.type = 'shoutcast'; obj.radioUrl = 'radio_url'; obj.metadataUrl = 'optional_metadata_url'; player.loadRadio(data) player.destroyInstance(); //Destroy plugin instance player.getRadioData(); //Get current playing radio data player.openPopup(); //open player in popup window (Check popup section for more info)
Creating radio list
To create list of radio stations in player with ability to load new radio station while player is opened the following is required:
1. In settings: createRadioList
createRadioList:true
2. In player following HTML markup: (note mrp-station-title and mrp-playlist-inner elements!)
<div class="mrp-playlist-holder">
<div class="mrp-playlist-bar">
<div class="mrp-history-title mrp-title-active">History</div>
<div class="mrp-station-title">Stations</div>
</div>
<div class="mrp-history-inner">
<div class="mrp-history-content"></div>
</div>
<div class="mrp-playlist-inner">
<div class="mrp-playlist-content"></div>
</div>
</div>
2. In playlist: (note data-radio-title and data-radio-thumb attributes!)
<!-- PLAYLIST LIST -->
<div id="mrp-playlist-list">
<div class="playlist1">
<div class="mrp-playlist-item" data-type="shoutcast" data-radio-url="http://stream.rockradio.si:9034/;" data-radio-title="ROCK RADIO SI" data-radio-thumb="data/stations/ROCK RADIO SI.jpg"></div>
<div class="mrp-playlist-item" data-type="shoutcast" data-radio-url="http://s10.voscast.com:9942/;" data-radio-title="Velvet 96.8" data-radio-thumb="data/stations/Velvet 96.8.jpg"></div>
<div class="mrp-playlist-item" data-type="shoutcast" data-radio-url="http://46.252.154.133:8080/;" data-radio-title="Radio 2.0 - Valli di Bergamo" data-version="1" data-radio-thumb="data/stations/Radio 2.0 - Valli di Bergamo.jpg"></div>
<div class="mrp-playlist-item" data-type="shoutcast" data-radio-url="http://185.85.28.149:8000/;" data-radio-title="ORF Radio Wien" data-radio-thumb="data/stations/ORF Radio Wien.jpg"></div>
<div class="mrp-playlist-item" data-type="shoutcast" data-radio-url="http://74.208.71.58:8000/;" data-radio-title="Radio Dismuke" data-radio-thumb="data/stations/Radio Dismuke.jpg"></div>
<div class="mrp-playlist-item" data-type="shoutcast" data-radio-url="http://192.99.8.170:8098/;" data-radio-title="Live Streaming Radiocast" data-radio-thumb="data/stations/Live Streaming Radiocast.jpg"></div>
<div class="mrp-playlist-item" data-type="shoutcast" data-radio-url="http://192.240.102.133:12430/;" data-radio-title="Yammat FM" data-radio-thumb="data/stations/Yammat FM.jpg"></div>
</div>
</div>
Audio adverts
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).
Ads are defined inside mrp-playlist-options div and they apply for every radio station inside that playlist. The following example has both ad pre and ad mid defined:
<div class="playlist1">
<div class="mrp-playlist-options" data-ad-pre="media/audio_ads/human2.mp3,media/audio_ads/human1.mp3" data-ad-mid="media/audio_ads/human3.mp3,media/audio_ads/human7.mp3" data-ad-mid-interval="5000"></div>
<div class="mrp-playlist-item" data-type="shoutcast" data-radio-url="RADIO_URL"></div>
...
</div>
Parameters:
| Parameter | Value |
|---|---|
| data-ad-pre | ad pre audio url. Multiple are supported, separated by comma. |
| data-ad-mid | ad mid audio url. Multiple are supported, separated by comma. |
| data-ad-mid-interval | interval in which ad plays (miliseconds) |
| data-shuffle-ads | Add thid attribute if you want to shuffle ads. For example, if you have multiple ad-pre, it will shuffle them before each playback. |
Available settings for ads:
| Parameter | Value | |
|---|---|---|
| pauseAudioDuringAds | true,false | Pause main audio while audio ad mid plays. |
| disableControlsInAdvert | true,false | By default, user cannot change radio station while ad is playing. By using disableControlsInAdvert you can also disable any control buttons such as share, embed, mini player etc. |
Troubleshooting
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)
https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content
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
Contact
How to contact us?
If you have any questions after purchase, send a message at http://codecanyon.net/user/Tean#contact, and provide your PURCHASE CODE.
Social sharing
Included sharing sites are Facebook, Twitter, Tumblr, Whatsapp:
To add new sharing site add share-item class and data-type attribute, for example:
<div class="mrp-share-item mrp-contr-btn" data-type="pinterest" data-tooltip="Pinterest"> ... svg icon here ... </div>Then add sharing javascript code for pinterest in new.js file in the share section.