HTML5 Audio with SHOUTcast

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

For Radio Enfield, I wanted to create a player that didn’t rely on the browser’s default audio controls. This allowed me to create a player that looked the same in whatever browser it was viewed in. To do this, Javascript was used to manipulate the play and pause functions, and show/ hide a div accordingly. Below is the code that shows pause.png when the audio is playing, and play.png when it isn’t.

Head

<script type="text/javascript">
  function audioControl() {
    var playdiv = document.getElementById('playdiv');
    var pausediv = document.getElementById('pausediv');
    var myAudio = document.getElementById('myAudio');
    if (myAudio.paused) {
    myAudio.play();
    pausediv.style.display = 'block';
    playdiv.style.display = 'none';
    } else {
    myAudio.pause();
    pausediv.style.display = 'none';
    playdiv.style.display = 'block';
    }
  }
</script>

Body

<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.