On my main desktop, for whatever reason, I couldn’t get the sound to work in any program except my browser. So for a while I was stuck listening to Pandora and YouTube videos (don’t get me wrong, I like Pandora, but after a while I just wanted to listen to the music in my own library). And then, one day, I was reading an article about HTML 5, and I realized that maybe I could put some of the new elements to good use and make myself a way to listen to my music. And that’s exactly what I did.
With HTML 5′s new audio tag, some JQuery, and about 150 lines of PHP, I produced this (Warning: IE and FireFox not supported. Chrome and Safari only). The whole thing is about 300 lines of JS, but that is far more than is needed to make yourself a simple little audio player. In this post I’ll be covering the basics of how it works, and I will be making other posts that go into details about other parts of the app.
<!DOCTYPE html>
<html>
<head>
<title>Aud</title>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="func.js" type="text/javascript"></script>
<script type="text/javascript">
playlist = [
{
artist: "10 Years",
album: "The Autumn Effect",
file: "Waking Up",
url: "Waking_Up.mp3"
},
{
artist: "10 Years",
album: "The Autumn Effect",
file: "Fault Line",
url: "Fault_Line.mp3"
},
{
artist: "10 Years",
album: "The Autumn Effect",
file: "The Recipe",
url: "The_Recipe.mp3"
}
]; // 3 song playlist
$(document).ready(function() {
aud = $('#player .aud').get(0);
aud.pos = 0;
$('#player .play').bind('click', function(evt) {
evt.preventDefault();
if (aud.networkState == 0) {
aud.pos = -1;
$('#player .next').trigger('click');
} else {
aud.play();
}
});
$('#player .pause').bind('click', function(evt) {
evt.preventDefault();
aud.pause();
});
$('#player .next').bind('click', function(evt) {
evt.preventDefault();
aud.pause();
aud.pos++;
if (aud.pos == playlist.length) aud.pos = 0;
aud.setAttribute('src', playlist[aud.pos].url);
$('#songname').html("
<strong>Artist:</strong> " + playlist[aud.pos].artist + "
<strong>Album:</strong> " + playlist[aud.pos].album + "
<strong>File:</strong> " + playlist[aud.pos].file + "
");
aud.load();
aud.play();
});
$('#player .prev').bind('click', function(evt) {
evt.preventDefault();
aud.pause();
aud.pos--;
if (aud.pos < 0) aud.pos = playlist.length - 1;
aud.setAttribute('src', playlist[aud.pos].url);
$('#songname').html("
<strong>Artist:</strong> " + playlist[aud.pos].artist + "
<strong>Album:</strong> " + playlist[aud.pos].album + "
<strong>File:</strong> " + playlist[aud.pos].file + "
");
aud.load();
});
aud.addEventListener('canplay', function(evt) {
$('#player .play').trigger('click');
});
aud.addEventListener('ended', function(evt) {
$('#player .next').trigger('click');
});
});
</script>
</head>
<body>
<div id='main'>
<div id='player'>
<div id='controls'>
<div id='back' class='prev'></div><div id='play' class='play'></div><div class='next' id='forward'></div>
<a href='#' class='pause'>Pause</a>
<div id='songname'>
<p>Song</p>
</div>
</div>
<audio class='aud'>
<p>Oops, looks like your browser doesnt support HTML 5!</p>
</audio>
</div>
</div>
</body>
</html>
This is all you need to make yourself a functioning little player. It’s pretty simple. I’ve quite enjoyed working its really easy API.
FYI, the reason my app is not supported in Firefox is because its audio tag doesn’t support the mp3 format like Chrome and Safari do. Right now firefox only supports the .ogg format.
There is a lot more that went into this app that I will be posting on later, so be sure to check back!
