Luna Radio Player with Audio-Visualizer

WordPress


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!

Example shortcode:

[lunaradio width='100%' height='70px' radiustopleft='0px' radiustopright='0px' radiusbottomleft='0px' radiusbottomright='0px' borderposition='none' bordercolor='#ffffff' bordersize='0px' token='mytoken' userinterface='small' backgroundcolor='#0e1015' fontcolor='#ffffff' hightlightcolor='#fa225b' fontname='' googlefont='' fontratio='0.4' radioname='My Radio Name' scroll='true' coverimage='' onlycoverimage='false' coverstyle='circle' usevisualizer='fake' visualizertype='4' itunestoken='1000lIPN' metadatatechnic='fallback' ownmetadataurl='' corsproxy='' usestreamcorsproxy='false' 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' ]	
                

If the installed major version is less than 5, the old plugin and the code must be removed completely. Then the new plugin can be installed and a new token must be generated. The code must now also be created again. The reason is the completely new programming with new parameters.

If the installed major version is less than 5, 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 SHORTCODE GENERATOR.

Available player options:
(Please put all values in single quotes.)

Parameter Value Description
width set the width for your player. You can use px or %.
height set the height for your player. You can use px or %.
radiustopleft set the radius from top left corner for your player. You can use px or %.
radiustopright set the radius from top right corner for your player. You can use px or %.
radiusbottomleft set the radius from bottom left corner for your player. You can use px or %.
radiusbottomright set the radius from bottom right corner for your player. You can use px or %.
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.
scroll true, false set the control of scrolling the radioname & the artist - 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 1,2,3,4,5,6,7,8 set type of animation from a audio visualizer. 8 is no animation
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, 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

Use the generated Shortcode at the place in your website you need.

[lunaradio width='100%' height='70px' radiustopleft='0px' radiustopright='0px' radiusbottomleft='0px' radiusbottomright='0px' borderposition='none' bordercolor='#ffffff' bordersize='0px' token='mytoken' userinterface='small' backgroundcolor='#0e1015' fontcolor='#ffffff' hightlightcolor='#fa225b' fontname='' googlefont='' fontratio='0.4' radioname='My Radio Name' scroll='true' coverimage='' coverstyle='circle' usevisualizer='fake' visualizertype='4' itunestoken='1000lIPN' metadatatechnic='fallback' ownmetadataurl='' corsproxy='' usestreamcorsproxy='false' 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' ]	
                

The player supported only the streaming types with standard configuration from: shoutcast2, icecast2, radionomy, radiojar and radio.co
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.

Shoutcast Directory

Example for required parameters:

[lunaradio width='100%' height='70px' 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.

Icecast Directory

Example for required parameters:

[lunaradio width='100%' height='70px' 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.

Radionomy Directory

Example for required parameters:

[lunaradio width='100%' height='70px' 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 width='100%' height='70px' 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.

Internet Radio Directories

Example for required parameters:

[lunaradio width='100%' height='70px' 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

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 width='100%' height='70px' 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.

Proxy Use Cases

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 = 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 put the shortcode in the desired places on the website. All player can have a different look & feel.

[lunaradio width='100%' height='70px' token: "yourtoken" radioname: "My Radio Name" streamurl: "http://149.56.155.209:80/live" streamtype: "other" metadatatechnic: "stream-icy-meta" streamsuffix: "#" ]

[lunaradio width='100%' height='70px' token: "yourtoken" radioname: "CMF Radio" streamurl: "https://streams.radio.co/sdef46f462/listen" streamtype: "radioco" radiocoid: "sdef46f462" ]

[lunaradio width='100%' height='70px' token: "yourtoken" radioname: "My Radio Name" streamurl: "http://stream.radiojar.com/7n3s4124hrquv" streamtype: "radiojar" radiojarid: "7n3s4124hrquv" ]	

[lunaradio width='100%' height='70px' token: "yourtoken" radioname: "RTFM" streamurl: "http://listen.radionomy.com/rtfm" streamtype: "radionomy" radionomyid: "8f255562-3f11-406b-8d98-f98cb23c84ec" radionomyapikey: "4842dc4c-d6e0-4ab3-986b-412fd7d6aeab" ]	

[lunaradio width='100%' height='70px' token: "yourtoken" radioname: "Sweet FM - Le Mans 94.8" streamurl: "http://stream.sweetfm.fr:8000" streamtype: "icecast2" icecastmountpoint: "/lms" ]	

[lunaradio width='100%' height='70px' token: "yourtoken" radioname: "SmoothJazz.com Global" streamurl: "http://149.56.155.209:80" streamtype: "shoutcast2" shoutcastpath: "/live" shoutcastid: "1" ]	
                

For fullsize you must set the WordPress Site 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>
                

In the SHORTCODE you must set the userinterface to big and height 100%:

[lunaradio width='100%' height='100%' token: "yourtoken" radioname: "SmoothJazz.com Global" streamurl: "http://149.56.155.209:80" streamtype: "shoutcast2" shoutcastpath: "/live" shoutcastid: "1" ]	
                

API example is located in api.html demo.

Start Play:

        $("#mylunaradio").data('lunaradio').play();
        

Stop currently playing:

        $("#mylunaradio").data('lunaradio').pause();
        

Mixed content

Mixed content occurs when initial HTML is loaded over a secure HTTPS connection, but other resources (such as images, videos, stylesheets, scripts) are loaded over an insecure HTTP connection. This is called mixed content because both HTTP and HTTPS content are being loaded to display the same page, and the initial request was secure over HTTPS. Modern browsers may block this content, or will display warnings about this type of content to indicate to the user that this page contains insecure resources. Browsers that block mixed content may first attempt to "upgrade" the connection to this content from HTTP to HTTPS.
Read more about mixed content





Audio 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





Volume on mobile

Volume cannot control the on Apple IOS with javascript, you have to use the physical button on the actual phone: Volume Control in JavaScript





Plugin does not work as expected

Send a message at http://codecanyon.net/user/sodah#contact with a link to your live page to illustrate the problem so we can have a look.