HTML5 Tutorial: Simple Music Player
So this is a pretty simple example but I was playing around with flash for my chat room and this was byproduct of that experimentation. It’s funny how even when I’m trying to learn something new I do my best to make it useful for other situations which is a good habit to get into if you’re not doing it already.
Try out the working demo or download the code
Caveats
This will only work on a browser that is HTML5 compliant and has support for audio. That means older browsers and most versions of Internet Explorer are not supported. Firefox, Chrome and Opera work as well as the newest versions of Internet Explorer.
The Audio Tag
If you’re familiar with HTML then most of the index file below will look pretty familiar. The thing you really have to pay attention to is the new <audio> tag. It looks like this:
<audio id="rock" src="http://whiteoakstables.net/chat/audio/rock.wav" preload="auto"></audio>
You may notice that it looks a whole lot like a hyperlink with the src that defines the location of the file. Preload is an optional attribute, it tells your browser to start downloading the file as soon as the DOM, or page elements, have finished loading. In addition to setting preload to true I’ve added an ID attribute so I can reference this particular song in my music player.
The Index File
<!DOCTYPE html> <html> <head> <script data-require="jquery@*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <link data-require="bootstrap-glyphicons@*" data-semver="3.2.1" rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/img/glyphicons-halflings.png" /> <link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> <script data-require="bootstrap@*" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body> <h1 class="text-center">Bootstrap HTML5 Music Player</h1> <audio id="rock" src="http://whiteoakstables.net/chat/audio/rock.wav" preload="auto"></audio> <audio id="blues" src="http://whiteoakstables.net/chat/audio/blues.wav" preload="auto"></audio> <audio id="electronica" src="http://whiteoakstables.net/chat/audio/electronica.wav" preload="auto"></audio> <audio id="classical" src="http://whiteoakstables.net/chat/audio/classical.wav" preload="auto"></audio> <audio id="latin" src="http://whiteoakstables.net/chat/audio/latin.wav" preload="auto"></audio> <audio id="indie" src="http://whiteoakstables.net/chat/audio/indie.wav" preload="auto"></audio> <div class="audiocontroller"> <i class="audio-logo glyphicon glyphicon-headphones"></i> <i class="dynamiclink glyphicon glyphicon-play" id="play"></i></a> <i class="dynamiclink glyphicon glyphicon-pause" id="pause"></i> <select id="currentTrack"> <option value="rock">Rock</option> <option value="blues">Blues</option> <option value="electronica">Electronica</option> <option value="classical">Classical</option> <option value="latin">Latin</option> <option value="indie">Indie</option> </select> <i class="dynamiclink glyphicon glyphicon-stop" id="stop"></i> </div> <p class="text-center"> <a id="author" href="http://design1online.com" target="_blank">by Design1online.com, LLC</a> </p> </body> </html>
The Javascript File
//Simple HTML5 Music Player by design1online.com, LLC
var currentTrack = null;
var paused = false;
$(document).ready(function() {
currentTrack = $('#currentTrack').val();
$("#play").click(function() { play(); });
$("#stop").click(function() { stop(); });
$("#pause").click(function() { pause(); });
});
function play() {
//set the track back to the beginning
if (!paused) {
stop();
currentTrack = $('#currentTrack').val();
//make sure track starts from the begining each time
document.getElementById(currentTrack).load();
}
//play the track
document.getElementById(currentTrack).play();
}
//stop playing the current track
function stop() {
if (currentTrack) {
document.getElementById(currentTrack).pause();
paused = false;
}
}
//stop the track but don't go back to the beginning
function pause() {
paused = true;
document.getElementById(currentTrack).pause();
}
How It All Works
So now let’s talk about the javascript file. At first glance it looks relatively simple because it is! When you want to select a track you simply ask for it using getElementById and then you tell it to play or to pause. One thing that is sadly lacking is a stop() functionality. With html5 you can only pause an audio file — which does stop the playback but it also keeps the audio file at the same position as when you called pause on it. This means that if you wanted to play the audio file from the beginning again and you just called play() it would continue playing from where it left off. That’s where the load() function comes into play — this will tell the audio track to start loading if it wasn’t set to preload and it will reset the track back to the beginning.
The only other thing to mention is the currentTrack variable. I use this to keep track of which of the songs is currently selected and the user wasn’t to listen to.
