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

華友世紀。有用。我不完全知道爲什麼，不過沒關係，現在...