3

時間の更新時に単純なプログレスバーを更新しようとしているだけなので、これを行っています:

var audioFile = thisPlayerBtn.attr('audioFile');
var audioFilePlayer = document.createElement('audio');
audioFilePlayer.setAttribute('src', audioFile);
audioFilePlayer.setAttribute('id', 'theAudioPlayer');
audioFilePlayer.load();

$.get();

audioFilePlayer.addEventListener("load", function() {
    audioFilePlayer.play();
}, true);       

$('#hiddenAudioElements').append(audioFilePlayer);
audioFilePlayer.play();
audioFilePlayer.bind('timeupdate', updateTime);


var updateTime = function(){
    var thisPlayer = $(this);
    var widthOfProgressBar = Math.floor( (100 / thisPlayer.duration) * thisPlayer.currentTime);
    $('#songIdForPorgessBar').css({
        'width':widthOfProgressBar+'%'
    });
}

Firebug は、「bind」は関数ではないと言っているので、「addEventListener」と交換しました。エラーは発生しませんが、進行状況バーは更新されません。

私が間違っているのか、それとももっと良い方法があるのか​​ わかりません。ここに私のフィドルがあります：http://jsfiddle.net/j44Qu/動作し、オーディオを再生しますが、進行状況バーが更新されず、困惑しています。

4

1 に答える 1

6

問題は、dom ノードを使用する必要があるときに jQuery オブジェクトを使用していることと、その逆です。
bindはjQueryメソッドですが、オーディオノードで呼び出します

$(audioFilePlayer).bind('timeupdate', updateTime);

durationとcurrentTimeはオーディオ ノードのプロパティですが、jQuery オブジェクトから参照しようとしています。

var widthOfProgressBar = Math.floor( (100 / this.duration) * this.currentTime);

http://jsfiddle.net/j44Qu/1/

于 2013-11-02T06:13:57.597 に答える