Thank you for purchase. If you have any questions that are beyond the scope of this help file, please feel free to send a message on the link. Thanks so much!
Copy all files from the js folder (inside the ZIP-Archiv) on your webserver in the js-folder.
Include the following javascript into HEAD section of the page:
<script src="/js/lunaradio.min.js"></script>
Copy player HTML code in BODY section of the page:
<div id="mylunaradio" style="width:100%; height:60px;"></div>
Initialize the plugin with settings (see configuration):
<script> lunaRadio("mylunaradio", { token: "mytoken", userinterface: "small", backgroundcolor: "#0e1015", fontcolor: "#ffffff", hightlightcolor: "#fa225b", fontname: "", googlefont: "", fontratio: "0.4", radioname: "My Radio Name", offlinetext: "Radio is offline", scroll: "true", scrollradioname: "left", scrolltitle: "right", scrollradionamespeed: "0.25", scrolltitlespeed: "0.25", coverimage: "", onlycoverimage: "false", coverstyle: "circle", usevisualizer: "fake", visualizertype: "", itunestoken: "1000lIPN", metadatatechnic: "fallback", ownmetadataurl: "", streamurl: "http://149.56.155.209:80", streamtype: "shoutcast2", icecastmountpoint: "", radionomyid: "", radionomyapikey: "", radiojarid: "", radiocoid: "", shoutcastpath: "/live", shoutcastid: "1", streamsuffix: "", metadatainterval: "20000", volume: "90", debug: "false", uselocalstorage: "false", usestreamcorsproxy: "false", corsproxy: "", autoplay: "false", displayliveicon: "true", displayvisualizericon: "true", multicolorvisualizer: "false", color1: "#e66c35", color2: "#d04345", color3: "#85a752", color4: "#067dcc", visualizeropacity: "0.4" visualizerghost: "0.0", visualizerblur: "0", visualizerghostblur: "0", }); </script>
Download the latest version here. If the installed major version is less than 6, the old plugin and the code must be removed completely. The code must now also be created again. The reason is the completely new programming with new parameters.
Download the latest version here. If the installed major version is less than 6, please make a upgrade. For update the same major version you must only overwrite all files with the new files.
To simplify the creation of the code, use this CODE GENERATOR.
Available player options:
(Please put all values in single quotes.)
Parameter | Value | Description |
---|---|---|
token | Where Is My TOKEN? CLICK HERE! | |
userinterface | small, big | set the type of userinterface size |
backgroundcolor | #rgb or rgba() | set the RGB or RGBA value for your background |
fontcolor | #rgb | set the RGB value for your Font |
hightlightcolor | #rgb | set the RGB value for highlighted elements |
fontname | (optional) | set the font family name. If the field is empty, the default font of the website is used. |
googlefont | (optional) | The loading google font name. Please check this out on Google Fonts. |
fontratio | 0.1 - 0.9 | The size ratio between the radio name and the artist - song title. |
radioname | Display name from your radio. | |
offlinetext | Displays this message when the stream is offline. | |
scroll | true, false | activate the scrolling from radioname & the artist - song title |
scrollradioname | left, right | set scroll direction from radio name |
scrolltitle | left, right | set scroll direction from song title |
scrollradionamespeed | 0.25 - 2.0 | set scroll speed from radio name |
scrolltitlespeed | 0.25 - 2.0 | set scroll speed from song title |
coverimage | url | Cover Image with your logo as placeholder for missing Covers |
onlycoverimage | true, false | If is true, does not load song cover images. |
coverstyle | circle, square | set the style from covers |
usevisualizer | fake, real | set the modus from visualizer. "real"-modus will works only with streaming urls included CORS-POLICY |
visualizertype | 0-8 | set type of animation from a audio visualizer. 0 is no animation |
multicolorvisualizer | true, false | true activate the multicolor mode from the visualizer |
color1 | #rgb | rgb color1 from multicolor visualizer |
color2 | #rgb | rgb color2 from multicolor visualizer |
color3 | #rgb | rgb color3 from multicolor visualizer |
color4 | #rgb | rgb color4 from multicolor visualizer |
visualizeropacity | 0.0-0.99 | opacity from the visualizer |
visualizerblur | 0-20 | blur from the visualizer |
visualizerghost | 0.0-0.99 | Ghost effect from the visualizer |
visualizerghostblur | 0-20 | blur from the visualizer ghost |
itunestoken | If you want use cover feature with iTunes Affiliate Program. If the field is empty, you can no longer click on the cover. | |
metadatatechnic | fallback, corsproxy, directly, stream-icy-meta, hls, ownmetadataurl | set the type for reading meta data (artist - song title) |
ownmetadataurl | url | if you have a special streaming server, you can here set the script or url to reading the meta data. The result from your script must be a text with artist - song title |
corsproxy | url | Use a CORS PROXY Server for missing CORS-POLICY to reading the Meta-Data |
streamurl | url | set the streaming URL |
streamtype | shoutcast2, icecast2, radionomy, radiojar, radioco, other | set the type of your stream |
icecastmountpoint | set the mountpoint from your icecast stream url | |
radionomyid | set the id from your radionomy stream | |
radionomyapikey | set the API KEY from your radionomy stream | |
radiojarid | set the id from your radiojar stream | |
radiocoid | set the id from your radio.co stream | |
shoutcastpath | set the path from your shoutcast stream | |
shoutcastid | set the id from your shoutcast stream | |
streamsuffix | (optional) | set the special suffix to read your special streaming url |
metadatainterval | in ms | set the interval in ms to reading the meta data (artist - song title) |
volume | 0-100 | set the volume control (is not work on iOS-devices) |
debug | true, false | developer option for debug messages in browser console |
uselocalstorage | true, false | save settings from user in local storage: volume, visualizer type. After reloading the page, the values are read from the local storage and the settings are thus overwritten. |
autoplay | true, false | This is a pseudo autoplay with required user interaction on the site and is not supported by mobile browsers. |
displayliveicon | true, false | Display the live icon. |
displayvisualizericon | true, false | Display the visualizer button on big user interface |
Minimal HTML markup needed for player to work is just one element. Please set the width and heigh of element.
<div id="mylunaradio" style="width:100%; height: 60px;"></div>
The player supported only the streaming types with standard configuration from: shoutcast2, icecast2, radionomy, radiojar, radio.co and HLS
So that all functions for streaming and reading the meta-data can be carried out correctly, certain standard functions must also be activated on the streaming server. More information you can find here in the article from your streaming type.
Please set the streamurl without path. The path must be set in parameter shoutcastpath. If you have multiply streams at the same streamurl, you must look for the streamid.
The player reads the data by default via the following URL: http://streamurl:port/currentsong?sid=shoutcastid
Please make sure that this option is activated in shoutcast2!
The cover image is be loaded ober the iTunes-API.
Example for required parameters:
lunaRadio("mylunaradio", { token: "yourtoken", radioname: "SmoothJazz.com Global", streamurl: "http://149.56.155.209:80", streamtype: "shoutcast2", shoutcastpath: "/live", shoutcastid: "1" });
Example for Meta Data URL:
http://149.56.155.209:80/currentsong?sid=1
Please set the streamurl without mountpoint. The mountpoint must be set in parameter icecastmountpoint.
The player reads the data by default via the following URL: http://streamurl:port/status-json.xsl
Please make sure that this option is activated in icecast2!
The cover image is be loaded ober the iTunes-API.
Example for required parameters:
lunaRadio("mylunaradio", { token: "yourtoken", radioname: "Sweet FM - Le Mans 94.8", streamurl: "http://stream.sweetfm.fr:8000", streamtype: "icecast2", icecastmountpoint: "/lms" });
Example for Meta Data URL:
http://stream.sweetfm.fr:8000/status-json.xsl
The player reads the data by default via the following URL: https://api.radionomy.com/currentsong.cfm?radiouid=radionomyid&apikey=radionomyapikey&callmeback=yes&type=xml&cover=yes&previous=yes
Please make sure that this option is activated in radionomy!
On radionomy will the player get the cover automaticaly over the meta data url. Radionomy don't use iTunes-API for reading Cover.
The metadatatechnic-parameter will be ignored. The Player read directly the meta data url.
Example for required parameters:
lunaRadio("mylunaradio", { token: "yourtoken", radioname: "RTFM", streamurl: "http://listen.radionomy.com/rtfm", streamtype: "radionomy", radionomyid: "8f255562-3f11-406b-8d98-f98cb23c84ec", radionomyapikey: "4842dc4c-d6e0-4ab3-986b-412fd7d6aeab" });
Example for Meta Data URL:
https://api.radionomy.com/currentsong.cfm?radiouid=8f255562-3f11-406b-8d98-f98cb23c84ec&apikey=4842dc4c-d6e0-4ab3-986b-412fd7d6aeab&callmeback=yes&type=xml&cover=yes&previous=yes
The player reads the data by default via the following URL: https://www.radiojar.com/api/stations/radiojarid/now_playing/?rand=12345
Please make sure that this option is activated in radiojar!
On radiojar will the player get the cover automaticaly over the meta data url. Radiojar don't use iTunes-API for reading Cover.
The metadatatechnic-parameter will be ignored. The Player read directly the meta data url.
Example for required parameters:
lunaRadio("mylunaradio", { token: "yourtoken", radioname: "My Radio Name", streamurl: "http://stream.radiojar.com/7n3s4124hrquv", streamtype: "radiojar", radiojarid: "7n3s4124hrquv" });
Example for Meta Data URL:
https://www.radiojar.com/api/stations/7n3s4124hrquv/now_playing/?rand=1234
The player reads the data by default via the following URL: https://public.radio.co/stations/radiocoid/status
Please make sure that this option is activated in Radio.co!
On Radio.co will the player get the cover automaticaly over the meta data url. Radio.co don't use iTunes-API for reading Cover.
The metadatatechnic-parameter will be ignored. The Player read directly the meta data url.
Example for required parameters:
lunaRadio("mylunaradio", { token: "yourtoken", radioname: "CMF Radio", streamurl: "https://streams.radio.co/sdef46f462/listen", streamtype: "radioco", radiocoid: "sdef46f462" });
Example for Meta Data URL:
https://public.radio.co/stations/sdef46f462/status
Please enter the complete URL from your m3u8-stream.
It is possible to read the song title directly from the stream. Please use here: metadatatechnic: "hls".
The cover image is be loaded ober the iTunes-API.
Example for required parameters:
lunaRadio("mylunaradio", { token: "yourtoken", radioname: "RamPower", streamurl: "https://stream.ram.radio/audio/ram.stream_aac/playlist.m3u8", streamtype: "hls", metadatatechnic: "hls" });
On special streaming servers the player can't read standard the meta data. For reading meta data from your stream you have to options.
1. Read the stream-icy-meta from the stream
2. Read the meta data over ownmetadataurl
The cover image is be loaded ober the iTunes-API.
Example for required parameters:
lunaRadio("mylunaradio", { token: "yourtoken", radioname: "My Radio Name", streamurl: "http://149.56.155.209:80/live", streamtype: "other", metadatatechnic: "stream-icy-meta", streamsuffix: "#" });
Parameter metadatatechnic have now much options to read the meta data (artist - song title): fallback, corsproxy, directly, stream-icy-meta and ownmetadataurl
The reason for so many possibilities are the different servers and the required CORS POLICY. In essence, Same-Origin policies prevent Cross-Origin requests – requests that do not come from the same origin as the hosted data will be rejected, protecting the origin source from a variety of complex attacks including cross-domain scripts, redirects, and more.
Because the streaming URL is a different URL than the web server URL, a CORS POLICY is required here. The CORS-POLICY must be activated/installed on your Streaming Server. If a suitable CORS POLICY is activated on the streaming server, the meta data can be received and read. Without a CORS POLICY you need a CORS PROXY server. This CORS PROXY server managed the access rights to the streaming server.
Testpage for CORS requests
Use this page to test CORS requests. You can either send the CORS request to a remote server (to test if CORS is supported), or send the CORS request to a test server (to explore certain features of CORS):
www.test-cors.org
metadatatechnic = fallback
This you can use, if you don't have a CORS POLICY on your streaming server. The player uses the fallback.php file. This file loaded the meta data from your streaming server.
But this script have also a requirement:
metadatatechnic = corsproxy
corsproxy = https://www.mycorsproxy.url/
This you can use, if you don't have a CORS POLICY on your streaming server. The player uses the CORS PROXY SERVER for loading the meta data from your streaming server.
metadatatechnic = directly
This can be used if the CORS POLICY exists.
metadatatechnic = stream-icy-meta
If you want to read the meta data directly from the stream, this variant is used. The script: stream-icy-meta.php is then used by the player to read the meta data.
There are a few disadvantages:
And this script have also a requirement:
metadatatechnic = hls
It is possible to read the song title directly from the HLS M3u8 stream.
metadatatechnic = ownmetadataurl
ownmetadataurl = https://www.mymetadata.url
This option can be used with all server variants. You need your own script or text file to output the finished meta data for Artist - song title. This option is used most often for special streaming servers that are not officially supported here.
For multiply instances you just need to change the id from you player-div-container. Put the code of the container in the desired places on the website. All player can have a different look & feel.
<div id="myshoutcastradio" style="width:100%; height: 60px;"></div> <div id="myicecastradio" style="width:100%; height: 75px;"></div> <div id="myradionomyradio" style="width:100%; height: 450px;"></div> <div id="myradiojarradio" style="width:100%; height: 40px;"></div> <div id="myradiocoradio" style="width:100%; height: 80px;"></div>
Each container can now be accessed with its own script:
$("#myshoutcastradio").lunaradio({ token: "yourtoken", radioname: "SmoothJazz.com Global", streamurl: "http://149.56.155.209:80", streamtype: "shoutcast2", shoutcastpath: "/live", shoutcastid: "1" }); $("#myicecastradio").lunaradio({ token: "yourtoken", radioname: "Sweet FM - Le Mans 94.8", streamurl: "http://stream.sweetfm.fr:8000", streamtype: "icecast2", icecastmountpoint: "/lms" }); $("#myradionomyradio").lunaradio({ token: "yourtoken", userinterface: "big", radioname: "RTFM", streamurl: "http://listen.radionomy.com/rtfm", streamtype: "radionomy", radionomyid: "8f255562-3f11-406b-8d98-f98cb23c84ec", radionomyapikey: "4842dc4c-d6e0-4ab3-986b-412fd7d6aeab" }); $("#myradiojarradio").lunaradio({ token: "yourtoken", radioname: "My Radio Name", streamurl: "http://stream.radiojar.com/7n3s4124hrquv", streamtype: "radiojar", radiojarid: "7n3s4124hrquv" }); $("#myradiocoradio").lunaradio({ token: "yourtoken", radioname: "CMF Radio", streamurl: "https://streams.radio.co/sdef46f462/listen", streamtype: "radioco", radiocoid: "sdef46f462" });
For fullsize you must set the website in fullsize. More you can read here.
This CSS is required in your webpage. If nested containers are used, all must be at 100% height with CSS.
<style> body, html { height: 100%; margin: 0; padding: 0; } </style>
Now you can set the player-div-container in fullsize
<div id="mylunaradio" style="width:100%; height: 100%;"></div>
In the JS you must set the userinterface to big:
lunaRadio("mylunaradio", { token: "yourtoken", userinterface: "big", radioname: "RTFM", streamurl: "http://listen.radionomy.com/rtfm", streamtype: "radionomy", radionomyid: "8f255562-3f11-406b-8d98-f98cb23c84ec", radionomyapikey: "4842dc4c-d6e0-4ab3-986b-412fd7d6aeab" });
Set the DIV-Container height to 0px and the player will automatically use following height: large display: 80px; medium display: 60px; small display: 40px
Or use this solution for the responsive height on mobile devices with the small user-interface.
Set this CSS in the body from your site:
<style> .lunaresponsive {/*Large Screen Height*/ height:80px; } @media only screen and (min-width: 600px) and (max-width:959px) { .lunaresponsive {/*Medium Screen Height*/ height:60px; } } @media only screen and (max-width:599px) { .lunaresponsive {/*Small Screen Height*/ height:40px; } } </style>
Now you can set the player-div-container without any height and give a own class-name: lunaresponsive
<div id="lunaradio" class="lunaresponsive" style="width:100%;>Luna Radio Player</div>
In the JS you must set the userinterface to small:
$("#lunaradio").lunaradio({ token: "yourtoken", userinterface: "small", radioname: "RTFM", streamurl: "http://listen.radionomy.com/rtfm", streamtype: "radionomy", radionomyid: "8f255562-3f11-406b-8d98-f98cb23c84ec", radionomyapikey: "4842dc4c-d6e0-4ab3-986b-412fd7d6aeab" });
API example is located in api.html demo.
Start Play:
window.luRadioModules["mylunaradio"].playMode();
Stop currently playing:
window.luRadioModules["mylunaradio"].pauseMode();
Change Visualizer:
window.luRadioModules["mylunaradio"].changeVisualizer();
Change Volume:
window.luRadioModules["mylunaradio"].animateVolume(50);
Software purchased from Envato/Codecanyon does not have installation support. However, you are welcome to inform us about bugs in the software, and we will fix them as soon as possible.
We would like to help a little bit here: FAQs