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…