Trouble with html5 audio progress bar/tribbles - html

Question

I'm adapting this progress bar:http://www.richardshepherd.com/tv/audio/ to work with my playlist code, but I can't work out why it's not working. I expect it's something ridiculous (I tried adding the (document).ready function, but that broke the rest of my code).
This is what I have:
function loadPlayer() {
var audioPlayer = new Audio();
audioPlayer.controls="controls";
audioPlayer.preload="auto";
audioPlayer.addEventListener('ended',nextSong,false);
audioPlayer.addEventListener('error',errorFallback,true);
document.getElementById("player").appendChild(audioPlayer);
nextSong();
}
function nextSong() {
if(urls[next]!=undefined) {
var audioPlayer = document.getElementsByTagName('audio')[0];
if(audioPlayer!=undefined) {
audioPlayer.src=urls[next];
audioPlayer.load();
audioPlayer.play();
next++;
} else {
loadPlayer();
}
} else {
alert('the end!');
}
}
function errorFallback() {
nextSong();
}
function playPause() {
var audioPlayer = document.getElementsByTagName('audio')[0];
if(audioPlayer!=undefined) {
if (audioPlayer.paused) {
audioPlayer.play();
} else {
audioPlayer.pause();
}
} else {
loadPlayer();
}
}
function stop() {
var audioPlayer = document.getElementsByTagName('audio')[0];
audioPlayer.pause();
audioPlayer.currentTime = 0;
}
function pickSong(num) {
next = num;
nextSong();
}
var urls = new Array();
urls[0] = '01_horses_mouth/mp3/01. Let The Dog See The Rabbit preface.mp3';
urls[1] = '01_horses_mouth/mp3/02. The Other Horse\'s Tale.mp3';
urls[2] = '01_horses_mouth/mp3/03. Caged Tango.mp3';
urls[3] = '01_horses_mouth/mp3/04. Crumbs.mp3';
urls[4] = '01_horses_mouth/mp3/05. Mood Elevator Reprise.mp3';
urls[5] = '01_horses_mouth/mp3/06. Mood Elevator.mp3';
var next = 0;
// Display our progress bar
audioPlayer.addEventListener('timeupdate', function(){
var length = audioPlayer.duration;
var secs = audioPlayer.currentTime;
var progress = (secs / length) * 100;
$('#progress').css({'width' : progress * 2});
var tcMins = parseInt(secs/60);
var tcSecs = parseInt(secs - (tcMins * 60));
if (tcSecs < 10) { tcSecs = '0' + tcSecs; }
$('#timecode').html(tcMins + ':' + tcSecs);
}, false);
I end up getting the default player which works fine, as do my own play/pause and stop buttons, but the progress bar does nothing.
Oh, and this is what I've stuck in my css:
#progressContainer {position: relative; display: block; height: 20px;
background-color: #fff; width: 200px;
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
margin-top: 5px;}
#progress {
display: block;
height: 20px;
background-color: #99f;
width: 0;
position: absolute;
top: 0;
left: 0;}
and this is the html:
<div id="player" >
<span id="timecode"></span>
<span id="progressContainer">
<span id="timecode"></span>
<span id="progress"></span>
</div>
The page is here: http://lisadearaujo.com/clientaccess/wot-sound/indexiPhone.html
Please note that this is only working with the media query for iPhone portrait orientation, so if you look at it on a desktop, you'll need to squeeze your window up. :-)

Answer 1

I've now gone with a different solution (http://www.adobe.com/devnet/html5/articles/html5-multimedia-pt3.html) which explained how to acheive this a little better for me. I'm a copy/paster so have very little clue about the correct order in which things must go. What I've got now is this:
function loadPlayer() {
var audioPlayer = new Audio();
audioPlayer.controls="controls";
audioPlayer.preload="auto";
audioPlayer.addEventListener('ended',nextSong,false);
audioPlayer.addEventListener('error',errorFallback,true);
audioPlayer.addEventListener('timeupdate',updateProgress, false);
document.getElementById("player").appendChild(audioPlayer);
nextSong();
}
var urls = new Array();
urls[0] = '01_horses_mouth/mp3/01. Let The Dog See The Rabbit preface.mp3';
urls[1] = '01_horses_mouth/mp3/02. The Other Horse\'s Tale.mp3';
urls[2] = '01_horses_mouth/mp3/03. Caged Tango.mp3';
urls[3] = '01_horses_mouth/mp3/04. Crumbs.mp3';
urls[4] = '01_horses_mouth/mp3/05. Mood Elevator Reprise.mp3';
urls[5] = '01_horses_mouth/mp3/06. Mood Elevator.mp3';
var next = 0;
function updateProgress()
{
var audioPlayer = document.getElementsByTagName('audio')[0];
var value = 0;
if (audioPlayer.currentTime > 0) {
value = Math.floor((100 / audioPlayer.duration) * audioPlayer.currentTime);
}
progress.style.width = value + "%";
}
Hurray. It works. I am not entirely sure why, but that's OK for now...