我只是想按时间更新一个简单的进度条,所以我这样做:
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”交换了它,我没有收到任何错误,但进度条没有更新。
不确定我做错了什么,或者是否有更好的解决方法。 这是我的 fiddle :http://jsfiddle.net/j44Qu/它可以工作,播放音频,只是不更新进度条,我很困惑。
最佳答案
你的问题是你在应该使用 dom 节点时使用了 jQuery 对象,反之亦然。
bind
是一个 jQuery 方法,但您在音频节点上调用它
$(audioFilePlayer).bind('timeupdate', updateTime);
duration
和 currentTime
是音频节点属性,但您尝试从 jQuery 对象引用它们
var widthOfProgressBar = Math.floor( (100 / this.duration) * this.currentTime);
关于javascript - 在 html5 音频元素上使用 jquery 绑定(bind) 'timeupdate',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19739384/