綁定「timeupdate」與HTML5音頻元素的jQuery

Question

我只是想更新時間更新一個簡單的進度條，所以我這樣做：

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+'%' 
    }); 
} 

螢火蟲說，「綁定」不一個函數，所以我換了它與「addEventListener」，我沒有得到任何錯誤，但進度條不會更新。

不知道我在做什麼錯，或者如果有更好的方法去做。 這是我的小提琴：http://jsfiddle.net/j44Qu/它的工作原理，播放音頻，只是不更新​​進度條，我很難過。

Answer 1

你的問題是，你應該使用jQuery對象，當你應該使用DOM節點，反之亦然。
bind是一個jQuery方法，但你把它叫做音頻節點

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

duration和currentTime是音頻節點的屬性上，而是試圖從一個jQuery對象

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

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