Embedded HTML5 SSL Secure Web Player with Centova Cast Widgets

Since modern web browsers have stopped allowing non secure elements in web pages we must start using Secure Proxy Links (SSL https) streams in our web players. We provide an SSL proxy for all our radio servers but unfortunately the streams metadata (now playing / song title) doesn't get passed along with this so most web players won't show this data. In order to get around this issue we recommend using a simple HTML5 player for the audio and a Centova Cast widget for the metadata. Here's how:

Firstly copy the Secure Proxy links from your control panel's "Quick Links" section here:

 

It's looks something like this but will differ for your station: https://sh.fl-us.audio-stream.com/proxy/demo123?mp=/stream


Add this Secure proxy link to the following simple HTML5 Audio tag:

HTML:
<audio controls="true" preload="none">
<source src="https://sh.fl-us.audio-stream.com/proxy/demo123?mp=/stream" type="audio/mp3">Your browser does not support the audio element.
</audio>

This produces the audio player portion:


 

Next we complement this with the Centova Cast "Stream details" widget for in the control panel:

Copy and paste the code as instructed either above or below the audio html code earlier and you'll something similar to the following code:

HTML:

<script language="javascript" type="text/javascript" src="https://sh.fl-us.audio-stream.com:2199/system/streaminfo.js"></script>
Current song: <a href="https://sh.fl-us.audio-stream.com:2199/tunein/demo123.pls" class="cc_streaminfo" data-type="song" data-username="demo123">Loading ...</a><br />
Stream title: <span class="cc_streaminfo" data-type="title" data-username="demo123"></span><br />
Bit rate: <span class="cc_streaminfo" data-type="bitrate" data-username="demo123"></span><br />
Current listeners: <span class="cc_streaminfo" data-type="listeners" data-username="demo123"></span><br />
Maximum listeners: <span class="cc_streaminfo" data-type="maxlisteners" data-username="demo123"></span><br />
Server status: <span class="cc_streaminfo" data-type="server" data-username="demo123"></span><br />
AutoDJ status: <span class="cc_streaminfo" data-type="autodj" data-username="demo123"></span><br />
Source connected: <span class="cc_streaminfo" data-type="source" data-username="demo123"></span><br />
Station time: <span class="cc_streaminfo" data-type="date" data-username="demo123"></span> <span class="cc_streaminfo" data-type="time" data-username="demo123"></span><br />
Current playlist: <span class="cc_streaminfo" data-type="trackplaylist" data-username="demo123"></span><br />
Track details: <span class="cc_streaminfo" data-type="trackartist" data-username="demo123"></span> - <span class="cc_streaminfo" data-type="tracktitle" data-username="demo123"></span> - <span class="cc_streaminfo" data-type="trackalbum" data-username="demo123"></span><br />
Raw metadata: <span class="cc_streaminfo" data-type="rawmeta" data-username="demo123"></span><br />
Album image:<br /><img class="cc_streaminfo" data-type="trackimageurl" data-username="demo123" /><br /><a href="#" class="cc_streaminfo" data-type="trackbuyurl" data-username="demo123">Buy this album</a><br />

<script language="javascript" type="text/javascript" src="https://sh.fl-us.audio-stream.com:2199/system/streaminfo.js"></script>

<audio controls="true" preload="none">
<source src="https://sh.fl-us.audio-stream.com/proxy/demo123?mp=/stream" type="audio/mp3">Your browser does not support the audio element.
</audio>

 

This will look something like this on your web page:

Now you have an SSL stream and stream metadata all being requested over https/SSL without web browser warnings. Obviously this looks pretty ugly but you can further style this html in anyway you see fit to match your website. This requires some HTML/CSS skills but essentially you can remove any of the extra data you don't need and change the font size / color and position to your taste for example the following HTML:

<script language="javascript" type="text/javascript" src="https://sh.fl-us.audio-stream.com:2199/system/streaminfo.js"></script>

<div style="text-align: center; font-family: Helvetica Neue; padding:3px; border: 2px solid #FF69B4; border-radius: 25px; width: 350px">

<span style="color: #FF69B4" class="cc_streaminfo" data-type="title" data-username="demo123"></span><br />
Playing: <a href="https://sh.fl-us.audio-stream.com:2199/tunein/demo123.pls" class="cc_streaminfo" data-type="song" data-username="demo123">Loading ...</a><br />

<audio style="margin-top: 5px; margin-bottom: 5px;" controls="true" preload="none">
        <source src="https://sh.fl-us.audio-stream.com/proxy/demo123?mp=/stream" type="audio/mp3">Your browser does not support the audio element.
</audio><br>

<small style="color: grey">
Bit rate: <span class="cc_streaminfo" data-type="bitrate" data-username="demo123"></span>, Listeners: <span class="cc_streaminfo" data-type="listeners" data-username="demo123"></span> of <span class="cc_streaminfo" data-type="maxlisteners" data-username="demo123"></span>
</small>

Which looks like this:

  • 3 Users Found This Useful
Was this answer helpful?

Related Articles

Free Flash MP3 player for IceCast servers

Minicaster Shoutcast Flash Player is a free shoutcast radio flash player by Draft Light....

How do I: Setup Sam Broadcaster Encoders for MP3 or mp3PRO

Setup Encoder You have set up a streaming server the next step is to create an encoder that can...

My broadcast is skipping, or buffering a lot. Why?

Internet broadcasting is a resource intensive process.  Make sure that the machine you are...

SSL/HTTPS Shoutcast and Icecast streaming links

All of our servers support SSL/HTTPS streaming. please see below for details on how to use it...

How Do I: Ban people (IP's or Subnets) from my server?

  You can click on the "Server Administration" link on the left "Management" menu from in the...