Воспроизведение / пауза с помощью howler.js с каркасом метеора

Question

Итак, я пытаюсь позволить пользователям играть / останавливаться, когда они нажимают на GIF один или два раза. В настоящее время он настроен так, что пользователь может воспроизвести звук только один раз, не останавливая его.

Я использую аудио библиотеку javascript howler.js и структуру метеора.

Ниже приведен код:

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

Я использую несколько классов для отслеживания текущего состояния воспроизведения:

• играет = звук в настоящее время воспроизводится
• paused = звук в данный момент приостановлен
• воспроизведено = звук был прослушан полностью хотя бы один раз

Я создал howlers объект для хранения экземпляров Howl, отключенный от data-gif-id (поэтому ключ - data-gif-id, а значение - объект Howl). Если ключ data-gif-id отсутствует в объекте howlers, я создаю новый объект Howl, в противном случае я просто вызываю play() а также pause() методы на соответствующем значении, которое уже находится в объекте howlers.

Вот код:

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();
      }
    });
  });

};