Javascript 暂停所有已单击的播放器（waversurfer和Drupal） [编辑：我独自一人，lol-见我在这里写的回复]

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

我的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>');
        }
      };

但所有这些对我来说都不起作用…

---

有人知道怎么帮我解决这个问题吗？会救我的命

看一看，自己测试一下：

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

经过数周的互联网搜索，寻找补丁、教程，甚至仅仅是如何让playPause暂停的线索，除了Drupal中点击的wavesurfer（使用严格模式、jQuery、对象类、复杂作用域/闭包等），我几乎要放弃了——但通过深入研究，学习了所有新的JS/Drupal/etc编码标准，并对devtools/console/etc进行了大量实验，我成功地让它工作起来。这是我的密码：

JavaScript: HTML（在Drupa中存储为细枝模板）：

{文件%中的文件为%s}
{%endfor%}

因此，简言之，最好的方法似乎是将每个wavesurfer存储在一个数组中，然后在该数组中循环播放暂停——webz上也提出了这一点，但在这种情况下没有这样做（双关语，lel）

Adter其他方法都不管用，而且我已经了解了新的变量作用域，因此，我使用今天的变通方法、技巧和推荐的方法，从头开始构思数组。最重要的是：

在Drupal函数外部定义数组，使其可公开访问

为wavesurfer.button创建闭包，使其成为公共属性

由于我还添加了一些其他不错的特性和FX，我还需要做更多的工作，但为了保持简单（对于有类似问题的人），我将代码简化为重要的内容

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

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

.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;
}

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