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 回答