滚动出视口时暂停 wavesurfer答案

【问题标题】：Pause wavesurfer when scrolled out of viewport滚动出视口时暂停 wavesurfer
【发布时间】：2021-01-19 11:23:15
【问题描述】：

我正在尝试在我的页面上添加 wavesurfer.js 的多个实例。我的 HTML 结构是这样的：

<div class = "audio-player" src = "/aud1.mp3"></div>
<div class = "audio-player" src = "/aud2.mp3"></div>

我的脚本是这样的（在defer 属性之后加载<head> wavesurfer.js 脚本`）：

window.addEventListener('load', function() {
  var mediaA = document.querySelectorAll('.audio-player')
  if (mediaA != null) {
    mediaA.forEach(medium => {
      var wavesurfer = WaveSurfer.create({
        /* wavesurfer config */
      })
      wavesurfer.load(medium.getAttribute('src'))
      window.addEventListener('scroll', function() {
        if (outOfViewport(medium) {
          wavesurfer.pause()
        }
      })
    })
  }
}

基本上，一旦 wavesurfer 实例滚动出视口，我就会尝试暂停它。

从我的代码中可以看出，我正在向窗口添加多个滚动事件侦听器，我想避免这种情况。我想将我所有的滚动事件归为一个，并使其成为一个函数。但是，我不知道如何访问已经创建的 wavesurfer 实例。

我正在寻找类似的东西：

window.addEventListener('scroll', function() {
  /* my other scroll stuff */
  var mediaA = document.querySelectorAll('.audio-player')
  if (mediaA != null) {
    mediaA.forEach(medium => {
      if (outOfViewport(medium) {
        medium.paue()
      }
    }
  }
}

除了，medium.pause() 实际上应该在 wavesurfer 实例而不是 HTML 元素上调用（就像它在我发布的代码中所做的那样）。

我计划做的事情是否会比我已经做的在性能方面有所改进？与一个滚动事件侦听器管理多个元素相比，多个滚动事件侦听器是否会成为问题？如果是，那我具体如何实现呢？

【问题讨论】：

标签： javascript html scroll

【解决方案1】：

我需要将实例存储在一个数组中：

window.addEventListener('load', function() {
  var wavesurfers = []
  var mediaA = document.querySelectorAll('.audio-player')
  if (mediaA != null) {
    mediaA.forEach(medium => {
      var wavesurfer = WaveSurfer.create({
        /* wavesurfer config */
      })
      wavesurfers.push(wavesurfer)
      wavesurfer.load(medium.getAttribute('src'))
    })
  }

  window.addEventListener('scroll', function() {
    /* my other scroll stuff */
    if (wavesurfers != []) {
      wavesurfers.forEach(wavesurfer => {
        if (outOfViewport(wavesurfer.mediaContainer.parentElement)) {
          wavesurfer.pause()
        }
      })
    }
  })
}

【讨论】：