CODEWITHSUNDEEP
javascriptjquery
Tristan Schlarman
Tristan Schlarman

Reputation: 117

TypeError: player.bind is not a function - jQuery

I cant seem to get this to work, all I am trying to do is make it so that this div's width increases as the audio player is playing so it acts as a progress bar. Everytime I run the script I get this in the console:

TypeError: player.bind is not a function

Here is my Javascript:

var player = document.getElementById('audio_player');
var progress = document.getElementsByClassName('progress-bar');
$(".play_btn").click(function() {
  if(player.paused) {
    player.play();
  } else {
    player.pause();
  }
  $(this).toggleClass('pause');
});
$(function() {
    var check,
        reached25 = false,
        reached50 = false,
        reached75 = false;

    player.bind("play", function(event) {
        var duration = player.get(0).duration;

        check = setInterval(function() {
            var current = player.get(0).currentTime,
                perc = (current / duration * 100).toFixed(2);


            if (Math.floor(perc) >= 25 &&! reached25) {
                console.log("25% reached");
                reached25 = true;
            }
            console.log(perc);
    }, 500);
});

player.bind("ended pause", function(event) {
    clearInterval(check);
});

});

Upvotes: 0

Views: 1832

Answers (1)

Евгений Мартыненко
Евгений Мартыненко

Reputation: 106

You should use jQuery wrapper when call jquery methods on elements:

$(player).bind...

Upvotes: 1

Related Questions