Play/pause 将 howler.js 与流星框架结合使用

Question

好的，所以我试图让用户 play/pause 在他们点击一次或两次 gif 时。我目前将它设置为用户只能播放一次声音而不会停止。

我正在使用 javascript 音频库 howler.js 和 meteor 框架。

代码如下：

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

我正在使用一些类来跟踪当前播放状态：

playing = 当前正在播放声音
paused = 声音当前暂停
played = 至少完整听过一次声音

我创建了一个 howlers 对象来存储 Howl 实例，以 data-gif-id 为键（所以键是 data-gif-id，值是 Howl 对象） .如果 data-gif-id 键不在 howlers 对象中，那么我创建一个新的 Howl 对象，否则我只对 howlers 中已有的相应值调用 play() 和 pause() 方法对象。

代码如下：

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

};

Play/pause 将 howler.js 与流星框架结合使用

Play/pause using howler.js with meteor framework

javascript

audio

audio-player

meteor

howler.js