Проблема с html5 звуковым индикатором прогресса/трибберами

Question

Я адаптирую этот индикатор выполнения: http: //www.richardshepherd.com/tv/audio/ для работы с моим кодом плейлиста, но я не могу понять, почему это не так за работой. Я ожидаю, что это что-то нелепое (я попытался добавить функцию (document) .ready, но это нарушило остальную часть моего кода).

Это то, что у меня есть:

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); 

Я в конечном итоге получить игрока по умолчанию, который работает отлично, как и мое собственное воспроизведение/пауза и стоп кнопки, но индикатор не делает ничего.

О, и это то, что я застрял в моем 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;} 

и это HTML:

<div id="player" > 

    <span id="timecode"></span> 
    <span id="progressContainer"> 
    <span id="timecode"></span> 
    <span id="progress"></span> 

    </div> 

Страница находится здесь: http://lisadearaujo.com/clientaccess/wot-sound/indexiPhone.html

Пожалуйста, обратите внимание, что это работает только с медиа-запросом для ориентации на портфолио iPhone, поэтому, если вы посмотрите на него на рабочем столе, вам нужно будет сжать окно. :-)

Answer 1

Теперь я пошел с другим решением (http://www.adobe.com/devnet/html5/articles/html5-multimedia-pt3.html), в котором объяснялось, как добиться этого немного лучше для меня. Я копия/пастер, поэтому очень мало знаю о правильном порядке, в котором все должно идти. Что у меня сейчас есть:

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 + "%"; 
} 

Ура. Оно работает. Я не совсем уверен, почему, но сейчас все нормально ...