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

Question

[编辑：我自己 FITFO，哈哈——看我在这里写的回复]

好吧，我已经为此疯狂了好几个星期了……

我的 Drupal 站点上有多个 Wavesurfer 播放器实例。当我在其中一个上单击 "play" 时，我希望当前正在播放的任何其他 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);
      });

但所有这些对我都不起作用…… 有人知道如何帮助我解决这个问题吗？会救我的命！！！

Answer 1

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

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

经过数周的互联网梳理，寻找补丁、教程，甚至只是线索如何让 playPause 在 Drupal 中暂停除了点击的 wavesurfer 之外的所有内容（= 使用严格模式，jQuery，对象类, 复杂 scopes/closures, …) 我几乎要放弃了——但是通过深入挖掘它，学习所有新的 JS/Drupal/etc 编码标准并大量试验 devtools/console/etc，我成功了让它工作。这是我的代码：

JavaScript:

// 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>

所以，简而言之，最好的方法似乎是将每个 wavesurfer 存储在一个数组中，然后循环遍历该数组以进行 playPause——webz 上也有人建议这样做，但在这种情况下效果不佳（双关语）有意的，lel) …

除此之外没有任何其他工作，而且我已经了解了新的变量范围等，我使用今天的变通方法、技巧和推荐的方法从头开始提出数组的想法。最重要的是：

在 Drupal 函数之外定义数组，因此public可以访问
正在为 wavesurfer.button 创建闭包，使其成为 public 属性

由于我还添加了一些其他不错的功能和 FX，因此我还必须做更多的事情，但为了保持简单（对于遇到类似问题的任何人），我已将代码减少到重要的部分。

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

Pause all but clicked player (waversurfer+Drupal)

javascript

drupal

drupal-8

wavesurfer.js

[编辑：我自己 FITFO，哈哈——看我在这里写的回复]

JavaScript:

CSS:

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