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

乌拉。有用。我不完全确定原因，但现在还可以......

麻烦html5音频进度条/ tribbles

1 个答案: