javascript - bind 'timeupdate' with jquery on html5 audio element - Stack Overflow

admin管理员组

文章数量:1349191

I'm just trying to update a simple progress bar on time update, so I'm doing this:

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 says that "bind" is not a function, so I swapped it with "addEventListener" and I get no error but the progress bar doe not update.

Not sure what I'm doing wrong or if there's a better way of going about it. Here is my fiddle: / it works, plays the audio, just doesn't update the progress bar and I'm stumped.

I'm just trying to update a simple progress bar on time update, so I'm doing this:

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 says that "bind" is not a function, so I swapped it with "addEventListener" and I get no error but the progress bar doe not update.

Not sure what I'm doing wrong or if there's a better way of going about it. Here is my fiddle: http://jsfiddle/j44Qu/ it works, plays the audio, just doesn't update the progress bar and I'm stumped.

• javascript
• jquery
• html

Share Improve this question Follow asked Nov 2, 2013 at 5:56 user1053263user1053263 74222 gold badges1616 silver badges3333 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Your problem is that you're using jQuery objects when you should be using dom nodes and vice versa.
bind is a jQuery method yet you call it on the audio node

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

duration and currentTime are audio node properties but you try to reference them from a jQuery object

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

http://jsfiddle/j44Qu/1/

本文标签： javascriptbind 39timeupdate39 with jquery on html5 audio elementStack Overflow