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 に答える