0

我正在调整这个进度条：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 纵向的媒体查询，因此如果您在桌面上查看它，则需要向上挤压窗口。:-)

4

1 回答 1

0

我现在采用了不同的解决方案 (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 + "%"; 
}

欢呼。有用。我不完全确定为什么，但现在没关系......

于 2012-06-07T09:05:51.443 回答