HTML5 Audio Player

Recently we wrote a post called Web Design for Hushh Online Radio in which we outline the design phases for their new website. Since that post, they’ve asked us to work on a number of other small projects for the site, one of which I had no prior experience of –  HTML Audio tags. player-post-image-main-2 The brief was quite simple, they wanted a custom designed and made audio player, to act as a back-up in case a user did not have java installed on their machine. With little knowledge of the audio tag in general, I set out looking at examples and limitations. The examples that I found were all so simple and the use of the tag itself is quite easy to understand, however, it became apparent that there were a number of issues on various browsers that a lot of people were talking about. These issues mainly consisted of non-HTML 5 browsers obviously not supporting the tag, and a strange one in firefox in which a certain file type would not load and the fallback code would also not render. Luckily for me, the scope of the project was small enough that I only had one file type to worry about and IE 8 and lower just had to show a message offering a direct link to the stream (which would open in media player) or prompt them to download a more up-to-date browser; because of this I didn’t have any trouble setting up the basic player. The design that I was given for the player is shown below and it required some modifications further down the line to account for the lack off support of some features that we added (but more on this later). player-post-image

The Code

The audio tag is relatively easy to use, for my example all you have to do is set the audio tag, add a src and everything is in place,  adding the controls attribute will give you some nice simple controls generated by the browser and all should be golden – for example (jsFiddle): Check the jsFiddle

 <audio src="http://www.w3schools.com/html/horse.mp3" controls="controls"></audio> 

Now for this project simply using the default controls was not an option, this is where good’ol jQuery came into play. So let’s first focus on the play / pause buttons. For starters let’s create our audio tag without controls, as well as a button to play the audio and a button to pause.

 <audio id="audio" src="http://www.w3schools.com/html/horse.mp3"></audio>  <button id="play">Play</button> <button id="pause">Pause</button> 

Now for the javascript / jQuery

 //Define the player  var player = document.getElementById('audio');  $('#play').click(function(){ player.play() }); //play when play is clicked  $('#pause').click(function(){ player.pause() }); //pause when pause clicked 

It really is that simple, don’t believe me here is a fiddle: See the Fiddle Next on to the slightly more advance part. The progress bar. Now I’m sure many will point out that HTML 5 has a progress bar tag, but I couldn’t quite get the effect that I was looking for when using it, so, for my purposes, I used a number of embedded divs.

   <div id="progressOut"></div>   

Now this part will also require some styles, so let’s sort that out before any javascript

 #progressOut {     width:300px;     height:20px;     border:1px solid #ccc;     position:relative; }  #progressIn {     position:relative;/*This is important*/     height:100%;     bottom:0px;     width:0px;     background:#FC6428; /*This can be anything*/ }  #time {     position:absolute;     padding:5px 8px;     font-size:10px;     background:#12BFD3;     right:-0px;     bottom:0px; } 

Now for the script.

   /*UPDATE PROGRESS BAR*/ function updateProgress() {      var progress = $("#progressIn");     var value = 0;      if(player.duration == 'Infinity') { //If duration = infinity set value to 100         value = 100;     } else if (player.currentTime > 0) { //else if it is > 0 calculate percentage to highlight         value = Math.floor((100 / player.duration) * player.currentTime);     }      progress.stop().animate({'width':value + '%'},500) //set the width of the progress bar      $('#time').html(formatTime(player.currentTime)) } //set the new timestamp     player.addEventListener("timeupdate", updateProgress, false);// add event listener for audio time updates  } 

Those of you with a keen eye will also notice that I referenced another function in there; thats because the current time is shown in non-formatted seconds lets define a nice format using minutes and seconds.

 //Format the audio tag's time stamp      function formatTime(seconds) {         minutes = Math.floor(seconds / 60);         minutes = (minutes >= 10) ? minutes : "" + minutes;         seconds = Math.floor(seconds % 60);         seconds = (seconds >= 10) ? seconds : "0" + seconds;         return minutes + ":" + seconds;     } 

And that’s it! A simple custom made player! Of course, there are a number of other features that you can add to the project -including volume, next and previous etc. Here is the final fiddle that combines all of the above code to create a working audio player: See the Fiddle Now, as mentioned earlier, although our client liked the design and the player that we gave them, the software that they’re using is a little limited and, because of this, we had to remove a number of buttons from the design and make a few alterations – these included removing the progress bar, next and previous buttons, replacing the next track with previous track and originally removing the album art (but I put something together using the Spotify API to keep this in). You can see the original coded version here (Yes, the image is static) and the final version from here.

Would you like us to create a custom HTML5 Audio Player for you? Just get in touch and we’d be happy to discuss your requirements

Subscribe to our newsletter

Get access to all our guides and resources

We will never treat your email address badly. We’ll love and cherish it and treat it right.

Would you like to be notified each time we post new digital media?