Play/pause using howler.js with meteor framework

Question

Okay, so I'm trying to let users play/pause when they click on the gif once or twice. I currently have it set up where the user could only play the sound once without stopping it.

I'm using the javascript audio library howler.js and the meteor framework.

Below is the code:

Template.gif.rendered = function () {
    freezeframe_options = {
    trigger_event: "click"
};

$.getScript("/client/scripts/freezeframe.js", function () {
    $(".gif").click(function () {
        if (!$(this).hasClass('played')) {
            var gifId = $(this).attr("data-gif-id");  // Will return the gif ID number
            var soundFile = $(this).attr("data-sound-file"); // Will return the sound file

            var fileFormat = "mp3";
            var mp3Test = new Audio();
            var canPlayMP3 = (typeof mp3Test.canPlayType === "function" && mp3Test.canPlayType("audio/mpeg") !== "");
            if (!canPlayMP3) {
                fileFormat = "ogg";
            }

            var sound = new Howl({
                urls: ['sounds/' + soundFile + '.' + fileFormat]
            }).play();

            $(this).addClass('played');
        }
        ;
    });
  });

};

Answer 1

I'm using a few classes to track the current playback state:

• playing = the sound is currently being played
• paused = the sound is currently paused
• played = the sound has been listened to completely at least once

I've created a howlers object to store the Howl instances, keyed off of the data-gif-id (so the key is the data-gif-id and the value is the Howl object). If the data-gif-id key is not in the howlers object, then I create a new Howl object, otherwise I just call the play() and pause() methods on the corresponding value that is already in the howlers object.

Here is the code:

Template.gif.rendered = function () {
  freezeframe_options = {
    trigger_event: "click"
  };

  howlers = {}; // set up an object to hold the Howl instances

  // moved these static lines out of the click function
  var fileFormat = "mp3";
  var mp3Test = new Audio();
  var canPlayMP3 = (typeof mp3Test.canPlayType === "function" && mp3Test.canPlayType("audio/mpeg") !== "");
  if (!canPlayMP3) {
    fileFormat = "ogg";
  }

  $.getScript("/client/scripts/freezeframe.js", function () {
    $(".gif").click(function () {
      var e = $(this);
      var soundFile = e.attr("data-sound-file") + '.' + fileFormat; // Will return the sound file
      var gifId = e.attr("data-gif-id");  // Will return the gif ID number
      if (gifId in howlers){
        if (e.hasClass('paused')){ // If currently paused, unpause
          e.removeClass('paused');
          e.addClass('playing');
          howlers[gifId].play();
        } else if (e.hasClass('playing')) {  // If currently playing, pause
          e.removeClass('playing');
          e.addClass('paused');
          howlers[gifId].pause();
        } else { // If not playing and not paused, play
          e.addClass('playing');
          howlers[gifId].play();
        }
      } else { // this is a new instance, so add it to the howlers object and start playing
        howlers[gifId] = new Howl({
          urls: ['sounds/' + soundFile],
          onend: function(){ // when playing ends, add the 'played' class to track which sounds have been played completely
            e.removeClass('playing');
            e.addClass('played');
          }
        });
        e.addClass('playing');
        howlers[gifId].play();
      }
    });
  });

};