Whilst updating the Radio Enfield website, I decided to change our online embedded flash player to a more modern HTML5 audio with SHOUTcast. I have detailed how this was possible below.
Getting SHOUTcast to play in HTML5
To create a simple stream with the default browser controls, the only code you’ll need is:
<audio controls autoplay> <source src="http://server:port/;"></source> Unfortunately your browser doesn't support html5 audio streaming, please update your browser. //Here is where you would add a flash player fallback also! </audio>
this will play the audio on page load, with the browser’s default audio controls to change the volume and pause the audio. “autoplay” is not supported on many mobile devices, so requires user interaction to begin the stream. The text will be shown if the html5 element is not supported by the browser.
The important bit of the above code is “/;” without the forward slash and semicolon, the audio will not play.
Adding Custom Control
<audio id="myAudio" autoplay preload="metadata"> <source src="http://server:port/;"></source> Unfortunately your browser doesn't support html5 audio streaming, please update your browser. </audio> <button id="control" class="control" onclick="audioControl()"> <div id="playdiv" style="display:none"> <img src="play.png" width="100" height="100" alt="play"/> </div> <div id="pausediv" style="display:block"> <img src="pause.png" width="100" height="100" alt="pause"/> </div> </button>
Dealing With Mobiles
Streaming audio is not supported on most mobile devices. However, the streaming on MP3 SHOUTcast audio is compatible with iOS devices. You can make a judgement of the device being used by using PHP. I used http://mobiledetect.net/ to implement a check and change elements of the interface accordingly.
For example, iOS devices do not allow for the autoplay function of html5 audio, so I added a section of code that displays a play button on page load, and also displays information to the user about streaming data over a mobile internet connection.