在html5音频元素上使用jquery绑定'timeupdate'

时间:2013-11-02 05:56:01

标签: javascript jquery html5

我只是想在时间更新时更新一个简单的进度条,所以我这样做:

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说“绑定”不是一个函数,所以我用“addEventListener”交换它,我没有得到任何错误,但进度条不会更新。

不确定我做错了什么,或者是否有更好的方法。 这是我的小提琴:http://jsfiddle.net/j44Qu/它有效,播放音频,只是不更新​​进度条而且我很难过。

1 个答案:

答案 0 :(得分:6)

您的问题是,当您应该使用dom节点时,您正在使用jQuery对象,反之亦然 bind是一个jQuery方法,你可以在音频节点上调用它

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

durationcurrentTime是音频节点属性,但您尝试从jQuery对象引用它们

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

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