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)으로갔습니다. 나를 위해. 나는 카피/패스터 (paster)이므로 물건을 가져 가야하는 올바른 순서에 대한 단서가 거의 없다. 내가 지금 얻은 것은 이것이다 :

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

만세. 그것은 작동합니다. 나는 왜 그런지 잘 모르겠지만 지금은 괜찮습니다 ...