examples/player/player.js
function(index) {
    var self = this;
    var sound;

    index = typeof index === 'number' ? index : self.index;
    var data = self.playlist[index];

    // If we already loaded this track, use the current one.
    // Otherwise, setup and load a new Howl.
    if (data.howl) {
      sound = data.howl;
    } else {
      sound = data.howl = new Howl({
        src: ['./audio/' + data.file + '.webm', './audio/' + data.file + '.mp3'],
        html5: true, // Force to HTML5 so that the audio can stream in (best for large files).
        onplay: function() {
          // Display the duration.
          duration.innerHTML = self.formatTime(Math.round(sound.duration()));

          // Start upating the progress of the track.
          requestAnimationFrame(self.step.bind(self));

          // Start the wave animation if we have already loaded
          wave.container.style.display = 'block';
          bar.style.display = 'none';
          pauseBtn.style.display = 'block';
        },
        onload: function() {
          // Start the wave animation.
          wave.container.style.display = 'block';
          bar.style.display = 'none';
          loading.style.display = 'none';
        },
        onend: function() {
          // Stop the wave animation.
          wave.container.style.display = 'none';
          bar.style.display = 'block';
          self.skip('next');
        },
        onpause: function() {
          // Stop the wave animation.
          wave.container.style.display = 'none';
          bar.style.display = 'block';
        },
        onstop: function() {
          // Stop the wave animation.
          wave.container.style.display = 'none';
          bar.style.display = 'block';
        },
        onseek: function() {
          // Start upating the progress of the track.
          requestAnimationFrame(self.step.bind(self));
        }
      });
    }

    // Begin playing the sound.
    sound.play();

    // Update the track display.
    track.innerHTML = (index + 1) + '. ' + data.title;

    // Show the pause button.
    if (sound.state() === 'loaded') {
      playBtn.style.display = 'none';
      pauseBtn.style.display = 'block';
    } else {
      loading.style.display = 'block';
      playBtn.style.display = 'none';
      pauseBtn.style.display = 'none';
    }

    // Keep track of the index we are currently playing.
    self.index = index;
  }
function(index) {
    var self = this;
    var sound;

    index = typeof index === 'number' ? index : self.index;
    var data = self.playlist[index];

    // If we already loaded this track, use the current one.
    // Otherwise, setup and load a new Howl.
    if (data.howl) {
      sound = data.howl;
    } else {
      sound = data.howl = new Howl({
        src: ['./audio/' + data.file + '.webm', './audio/' + data.file + '.mp3'],
        html5: true, // Force to HTML5 so that the audio can stream in (best for large files).
        onplay: function() {
          // Display the duration.
          duration.innerHTML = self.formatTime(Math.round(sound.duration()));

          // Start upating the progress of the track.
          requestAnimationFrame(self.step.bind(self));

          // Start the wave animation if we have already loaded
          wave.container.style.display = 'block';
          bar.style.display = 'none';
          pauseBtn.style.display = 'block';
        },
        onload: function() {
          // Start the wave animation.
          wave.container.style.display = 'block';
          bar.style.display = 'none';
          loading.style.display = 'none';
        },
        onend: function() {
          // Stop the wave animation.
          wave.container.style.display = 'none';
          bar.style.display = 'block';
          self.skip('next');
        },
        onpause: function() {
          // Stop the wave animation.
          wave.container.style.display = 'none';
          bar.style.display = 'block';
        },
        onstop: function() {
          // Stop the wave animation.
          wave.container.style.display = 'none';
          bar.style.display = 'block';
        },
        onseek: function() {
          // Start upating the progress of the track.
          requestAnimationFrame(self.step.bind(self));
        }
      });
    }

    // Begin playing the sound.
    sound.play();

    // Update the track display.
    track.innerHTML = (index + 1) + '. ' + data.title;

    // Show the pause button.
    if (sound.state() === 'loaded') {
      playBtn.style.display = 'none';
      pauseBtn.style.display = 'block';
    } else {
      loading.style.display = 'block';
      playBtn.style.display = 'none';
      pauseBtn.style.display = 'none';
    }

    // Keep track of the index we are currently playing.
    self.index = index;
  }
function ( index ) { var self = this ; var sound ; index = typeof index === 'number' ? index : self . index ; var data = self . playlist [ index ] ; // If we already loaded this track, use the current one. // Otherwise, setup and load a new Howl. if ( data . howl ) { sound = data . howl ; } else { sound = data . howl = new Howl ( { src : [ './audio/' + data . file + '.webm' , './audio/' + data . file + '.mp3' ] , html5 : true , // Force to HTML5 so that the audio can stream in (best for large files). onplay : function ( ) { // Display the duration. duration . innerHTML = self . formatTime ( Math . round ( sound . duration ( ) ) ) ; // Start upating the progress of the track. requestAnimationFrame ( self . step . bind ( self ) ) ; // Start the wave animation if we have already loaded wave . container . style . display = 'block' ; bar . style . display = 'none' ; pauseBtn . style . display = 'block' ; } , onload : function ( ) { // Start the wave animation. wave . container . style . display = 'block' ; bar . style . display = 'none' ; loading . style . display = 'none' ; } , onend : function ( ) { // Stop the wave animation. wave . container . style . display = 'none' ; bar . style . display = 'block' ; self . skip ( 'next' ) ; } , onpause : function ( ) { // Stop the wave animation. wave . container . style . display = 'none' ; bar . style . display = 'block' ; } , onstop : function ( ) { // Stop the wave animation. wave . container . style . display = 'none' ; bar . style . display = 'block' ; } , onseek : function ( ) { // Start upating the progress of the track. requestAnimationFrame ( self . step . bind ( self ) ) ; } } ) ; } // Begin playing the sound. sound . play ( ) ; // Update the track display. track . innerHTML = ( index + 1 ) + '. ' + data . title ; // Show the pause button. if ( sound . state ( ) === 'loaded' ) { playBtn . style . display = 'none' ; pauseBtn . style . display = 'block' ; } else { loading . style . display = 'block' ; playBtn . style . display = 'none' ; pauseBtn . style . display = 'none' ; } // Keep track of the index we are currently playing. self . index = index ; }
Play a song in the playlist.
@param  {Number} index Index of the song in the playlist (leave empty to play the first or current).
Play a song in the playlist .