CODEWITHSUNDEEP
javascripthtmlaudiojplayer
David Tuite
David Tuite

Reputation: 22643

Which jPlayer event designates the ability to start playing?

I have a basic jPlayer set up which plays a (150MB) audio file from AWS S3. My setup basically looks like this.

  jQuery(function() {
    var $player, jPlayerDefaults, progressCount;

    $player = $('<div>');
    progressCount = 0;
    jPlayerDefaults = {
      ready: function(e) {
        console.log("player ready");

        $player.jPlayer('setMedia', {
          mp3: 'http://s3-eu-west-1.amazonaws.com/some/file.mp3'
        });

        return $player.jPlayer('play', 1234);
      },

      seeking: function(e) {
        return console.log("seeking");
      },

      seeked: function(e) {
        return console.log("seeked");
      },

      canplay: function(e) {
        console.log('canplay');
      },

      progress: function(e) {
        return console.log("progress", progressCount += 1);
      },

      playing: function(e) {
        return console.log("playing");
      },

      error: function(e) {
        return console.log("Error loading audio.", e);
      },

      supplied: 'mp3',
      preload: 'auto'
    };

    $player.jPlayer(jPlayerDefaults);
  });

My understanding from the HTML5 audio spec and this SO question is that the canplay event designates the point at which the audio should start playing.

However, when I run the code above (with an empty browser cache), I get the following log.

player ready
progress 1
progress 2
progress 3
progress 4
canplay
seeking
playing
progress 5
...
progress 888
seeked
progress 889
...
progress 896

I only hear audio playing after the seeked event. This event happens a long time (minutes) after the canplay event.

Is this expected behavior or am I doing something wrong? Also, is jPlayer following the HTML5 <audio> tag spec faithfully here?

Edit: Incase you were wondering, AWS S3 does accept Byte-Range requests.

Upvotes: 7

Views: 1837

Answers (2)

starsinmypockets
starsinmypockets

Reputation: 2294

An example I'm using in backbone:

$(this.$el.jPlayer()).bind($.jPlayer.event.canplay, _.bind(function (event) {
    that.doCanPlay();
});

Upvotes: 0

chickpeas
chickpeas

Reputation: 443

I think this is the problem might be: return $player.jPlayer('play', 1234); you are asking the player to begin play once the media is seekable to that point try just

return $player.jPlayer('play'); or return $player.jPlayer('play', 5);

more details here http://www.jplayer.org/latest/developer-guide/#jPlayer-play the small note under the parameter, it wasn't easy to find it

Upvotes: 1

Related Questions