暂停所有未点击的播放器（waversurfer + Drupal）

时间：2019-10-30 08:22:43

标签： javascript drupal drupal-8 wavesurfer.js

[编辑：我是我自己的FITFO，大声笑–请参阅我在此处写的回复]

好的，所以我现在已经为此疯狂了……

我的Drupal网站上有多个Wavesurfer播放器实例。 当我在其中一个上单击“播放”时，我希望其他任何正在播放的Wavesurfer实例暂停。

我尽我所能找到所有东西，但是我无法使其正常工作。

这是Drupal实施Wavesurfer的方式：

(function ($, Drupal) {
  'use strict';

  Drupal.AudiofieldWavesurfer = {};

  Drupal.AudiofieldWavesurfer.generate = function (context, file, settings) {
    $.each($(context).find('#' + file.id).once('generate-waveform'), function (index, wavecontainer) {
      var wavesurfer = WaveSurfer.create({
        container: '#' + $(wavecontainer).attr('id') + ' .waveform',
        audioRate: settings.audioRate,
        autoCenter: settings.autoCenter,
        barGap: settings.barGap,
        barHeight: settings.barHeight,
        barWidth: settings.barWidth,
        cursorColor: settings.cursorColor,
        cursorWidth: settings.cursorWidth,
        forceDecode: settings.forceDecode,
        normalize: settings.normalize,
        progressColor: settings.progressColor,
        responsive: settings.responsive,
        waveColor: settings.waveColor
      });

      wavesurfer.load(file.path);

      wavesurfer.setVolume(1);

      $(wavecontainer).find('.player-button.playpause').on('click', function (event) {
        Drupal.AudiofieldWavesurfer.PlayPause(wavecontainer, wavesurfer);
      });

      $(wavecontainer).find('.volume').on('change', function (event) {
        wavesurfer.setVolume($(event.currentTarget).val() / 10);
      });

      if (!!settings.autoplay) {
        wavesurfer.on('ready', wavesurfer.play.bind(wavesurfer));
      }
    });
  };


  Drupal.AudiofieldWavesurfer.PlayPause = function (wavecontainer, wavesurfer) {
        wavesurfer.playPause();
        var button = $(wavecontainer).find('.player-button.playpause');
        if (wavesurfer.isPlaying()) {
          $(wavecontainer).addClass('playing');
          button.html('<i class="fas fa-pause-circle fa-2x"></i>');
        } else {
          $(wavecontainer).removeClass('playing');
          button.html('<i class="fas fa-play-circle fa-2x"></i>');
        }
      };

这是我目前试图暂停所有其他人的方式：

document.addEventListener('playPause', function(e){
    var audios = document.getElementsByClassName('audiofield-wavesurfer');
    for(var i = 0, len = audios.length; i < len; i++){
        if(audios[i] != e.target && audios[i].hasClass('playing')){
            audios[i].playPause();
        }
    }
}, true);

这似乎行不通（一直在阅读Drupal.behaviours并尝试修改该部分，也没有运气。

我还尝试过让PlayPause功能在每个播放器上运行，如下所示：

  Drupal.AudiofieldWavesurfer.PlayPause = function (wavecontainer, wavesurfer) {
    $.each($(Drupal.AudiofieldWavesurfer), function() {
        wavesurfer.playPause();
        var button = $(wavecontainer).find('.player-button.playpause');
        if (wavesurfer.isPlaying()) {
          $(wavecontainer).addClass('playing');
          button.html('<i class="fas fa-pause-circle fa-2x"></i>');
        } else {
          $(wavecontainer).removeClass('playing');
          button.html('<i class="fas fa-play-circle fa-2x"></i>');
        }
      })};

…或此处：

  Drupal.AudiofieldWavesurfer.generate = function (context, file, settings) {
    $.each($(context).find('#' + file.id).once('generate-waveform'), function (index, wavecontainer) {
      var wavesurfer = WaveSurfer.create({
        container: '#' + $(wavecontainer).attr('id') + ' .waveform',
        audioRate: settings.audioRate,
        autoCenter: settings.autoCenter,
        barGap: settings.barGap,
        barHeight: settings.barHeight,
        barWidth: settings.barWidth,
        cursorColor: settings.cursorColor,
        cursorWidth: settings.cursorWidth,
        forceDecode: settings.forceDecode,
        normalize: settings.normalize,
        progressColor: settings.progressColor,
        responsive: settings.responsive,
        waveColor: settings.waveColor
      });

      wavesurfer.load(file.path);

      wavesurfer.setVolume(1);

      // ---- HERE MY CODE: --------

      $(wavecontainer).find('.player-button.playpause').on('click', function (event) {
        $.each($(context).find('#' + file.id), function(idx, obj) {
            $(obj).stop();
        });
        Drupal.AudiofieldWavesurfer.PlayPause($(wavecontainer), wavesurfer);
      });

但是所有这些都不适合我…… 有谁知道如何帮助我解决这个问题？会救我的命！

1 个答案:

答案 0 :(得分：0)

我做到了！我实际上是裂痕了！哇！

看看并自己测试一下：https://www.ohmniphonic.com/#srvcs

因此，对于任何尝试FITFO的人：

在经过数周的互联网梳理之后，寻找补丁，教程甚至只是线索，以了解如何暂停播放，除了在Drupal中单击的waveurfer以外，其他都暂停（=带有严格模式，jQuery，对象类，复杂的作用域/闭包，…）我几乎要放弃了，但是通过深入研究，学习所有新的JS / Drupal / etc编码标准并使用devtools / console / etc进行了大量试验，我设法使它起作用。这是我的代码：

JS：

// array to store wavesurfers, defined outside function for scope,
const audios = [];

// Start of regular Drupal/wavesurfer function
(function ($, Drupal) {
  'use strict';
  Drupal.AudiofieldWavesurfer = {};
  Drupal.AudiofieldWavesurfer.generate = function (context, file, settings) {
    $.each($(context).find('#' + file.id).once('generate-waveform'), function (index, wavecontainer) {
      var wavesurfer = WaveSurfer.create({
        container: '#' + $(wavecontainer).attr('id') + ' .waveform',
        // params
      });

      // […]
      // closure to better access play buttons outside function
      wavesurfer.button = function(wc) {
          return $(wc).find('.player-button.playpause');
      }(wavecontainer);

      // used button-closure for this
      $(wavesurfer.button).on('click', function (event) {
            Drupal.AudiofieldWavesurfer.PlayPause($(wavecontainer), wavesurfer);
      });

      // […]
      // add wavesurfer to array.
      audios.push(wavesurfer);
    });
  };

// Custom playPause function
  Drupal.AudiofieldWavesurfer.PlayPause = function (wavecontainer, wavesurfer) {

    // Loop through waveurfers and update classes
    audios.forEach(function(obj) {
        // if it's the audio from the play button
          wavesurfer.playPause();
          if (wavesurfer.isPlaying()) {
            $(wavesurfer.button).html('<i class="fas fa-pause-circle"></i>');
          } else {
            $(wavesurfer.button).html('<i class="fas fa-play-circle"></i>');
          }
        } else {
            if (obj.isPlaying()) {
                $(obj.button).html('<i class="fas fa-play-circle"></i>');
                obj.pause();
            }
        }
    });
  };

// […]
})(jQuery, Drupal);

CSS：

.blazy > .grid {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: -webkit-fill-available;
}

.playbtn-container {
    position: relative;
    -webkit-backface-visibility: hidden;
}

.player-button {
    font-size: 7em !important;
    height: 98px;
    position: absolute;
    display: block !important;
    z-index: 2;
    margin-top: -30px;
    margin-left: 0;
    color: #f71735;
    background: white;
    background: rgba(255,255,255,0.4);
    border-radius: 100%;
    -webkit-transition: all 0.1s ease  0s;
    -moz-transition: all 0.1s ease  0s;
    -ms-transition: all 0.1s ease  0s;
    -o-transition: all 0.1s ease  0s;
    -apple-transition: all 0.1s ease  0s;
    transition: all 0.1s ease  0s;
}

.player-button:hover {
    font-size: 8em !important;
    height: 112px;
    margin-top: -35px;
    margin-left: -5px;
    -webkit-transition: all 0.1s ease  0s;
    -moz-transition: all 0.1s ease  0s;
    -ms-transition: all 0.1s ease  0s;
    -o-transition: all 0.1s ease  0s;
    -apple-transition: all 0.1s ease  0s;
    transition: all 0.1s ease  0s;
}

HTML（在drupa中存储为TWIG模板）：

<div class="audiofield">
  {% for file in files %}
    <div class="audiofield-wavesurfer" id="wavesurfer_{{ file.id }}">
      <div id="audiofield-audio-player-{{ file.id }}" class="waveform"></div>
      <div class="playbtn-container">
          <div class="player-button playpause play">
              <i class="fas fa-play-circle fa-2x"></i>
          </div>
      </div>
    </div>
  {% endfor %}
</div>

因此，简而言之，最好的方法似乎是将每个waveurfer都存储在一个数组中，然后在该数组中循环播放playPause-在webz上也有人建议过这种做法，但在这种情况下无法正常工作（双关语意， lel）…

接下来，其他任何事情都没有起作用，我已经了解了新的变量作用域，因此，我使用了今天的变通方法，技巧和推荐的方法，从头开始进行了阵列设计。最重要的是：

  1. 在Drupal函数外部定义数组，以便可公开访问
  2. 为waveurfer.button创建关闭项，使其成为公共财产

由于我还添加了其他一些不错的功能和FX，所以我还必须做更多的工作，但是为了保持简单（对于遇到类似问题的人），我将代码简化为重要的内容。

如果您有任何疑问或反馈：请离开！ ;）

相关问题
最新问题