WaveSurfer.js与自定义audio元素集成问题求助：避免重复播放、隔离多波形播放及页面切换后波形恢复

嘿，看你遇到的这几个WaveSurfer.js集成问题，都是实际开发中很常见的场景，我结合你的代码给你梳理下解决思路：

问题1：重复播放（Double playback） #

你现在的核心冲突是同时用了自定义audio.play()和WaveSurfer的内部播放逻辑，两者绑定同一个audio元素，自然会触发两次播放。这里有两种处理方式，我更推荐第一种：

方案：完全迁移到WaveSurfer的播放控制API #

既然已经用WaveSurfer做可视化，直接用它的ws.play()/ws.pause()/ws.stop()来控制播放就好，不要再手动调用audio.play()了。WaveSurfer在绑定media: audio后，已经完全接管了这个audio元素的事件监听和状态同步，手动操作audio会和WaveSurfer的逻辑冲突。

举个例子，把播放按钮事件改成调用WaveSurfer的方法：

// 假设播放按钮绑定事件
playBtn.addEventListener('click', () => {
  if (ws.isPlaying()) {
    ws.pause();
  } else {
    ws.play();
  }
});

如果一定要保留自己的audio控制逻辑（比如有复杂的自定义播放逻辑），可以让WaveSurfer只做可视化，不处理播放：初始化时设置controls: false，并且手动同步audio的时间更新到WaveSurfer：

// 初始化WaveSurfer时不绑定播放控制
const ws = WaveSurfer.create({
  container: el,
  backend: 'MediaElement',
  media: audio,
  controls: false, // 禁用WaveSurfer自带控制
  // 其他配置...
});

// 手动同步audio的时间到波形
audio.addEventListener('timeupdate', () => {
  const progress = audio.currentTime / audio.duration;
  ws.seekTo(progress);
});

不过这种方式需要自己维护更多同步逻辑，不如直接用WaveSurfer的API省心。

问题2：所有波形同时播放（All waveforms play together） #

核心原因是你所有的WaveSurfer实例都绑定了同一个audio元素，当audio播放时，所有监听这个audio的WaveSurfer都会同步更新波形。解决思路是切换track时，只让当前激活的WaveSurfer实例与audio同步，其他实例暂停并重置状态。

修改你初始化WaveSurfer的代码，给每个波形的播放按钮绑定专属逻辑：

document.addEventListener('DOMContentLoaded', () => {
  const waveformElements = document.querySelectorAll('.waveform');
  if (waveformElements.length === 0) return;

  const audio = document.getElementById('player');
  window.wavesurfers = window.wavesurfers || {};

  waveformElements.forEach((el) => {
    const src = el.dataset.src;
    // 假设每个波形所在的track项里有播放按钮，可根据你的DOM结构调整选择器
    const playBtn = el.closest('.track-item').querySelector('.play-btn');

    const ws = WaveSurfer.create({
      container: el,
      backend: 'MediaElement',
      media: audio,
      waveColor: '#ccc',
      progressColor: '#ff5500',
      height: 60,
      responsive: true,
      barWidth: 2,
    });
    ws.load(src);
    window.wavesurfers[src] = ws;

    // 播放按钮点击事件
    playBtn.addEventListener('click', () => {
      // 暂停并重置所有其他WaveSurfer实例
      Object.values(window.wavesurfers).forEach(otherWs => {
        if (otherWs !== ws) {
          otherWs.pause();
          otherWs.seekTo(0); // 重置进度到开头
        }
      });

      // 检查当前audio是否已经是当前track的源，避免重复加载
      if (audio.src !== src) {
        audio.src = src;
        ws.load(src); // 让WaveSurfer重新加载新的音频源
      }

      // 切换播放状态
      ws.isPlaying() ? ws.pause() : ws.play();
    });
  });
});

这样点击某个track的播放按钮时，其他波形会立刻暂停并重置，只有当前波形会和audio同步播放，就不会出现所有波形一起动的情况了。

问题3：页面切换后波形消失 #

PJAX切换页面时，原来的波形DOM元素被新页面的内容替换了，但audio元素因为在base.html里保留了下来，所以音频还在播放。解决方法是在页面加载完成后重新初始化波形，并同步当前audio的播放状态。

修改你的initMusic函数：

function initMusic() {
  const waveformElements = document.querySelectorAll('.waveform');
  if (waveformElements.length === 0) return;

  const audio = document.getElementById('player');
  // 记录当前audio的状态：是否在播放、当前时间、当前源
  const currentAudioState = {
    src: audio.src,
    isPlaying: !audio.paused,
    currentTime: audio.currentTime,
    duration: audio.duration
  };

  // 先销毁之前的WaveSurfer实例，避免内存泄漏
  if (window.wavesurfers) {
    Object.values(window.wavesurfers).forEach(ws => ws.destroy());
    window.wavesurfers = {};
  }

  waveformElements.forEach((el) => {
    const src = el.dataset.src;
    const ws = WaveSurfer.create({
      container: el,
      backend: 'MediaElement',
      media: audio,
      waveColor: '#ccc',
      progressColor: '#ff5500',
      height: 60,
      responsive: true,
      barWidth: 2,
    });
    ws.load(src);
    window.wavesurfers[src] = ws;

    // 如果当前audio正在播放且源匹配，同步进度并继续播放
    if (currentAudioState.isPlaying && currentAudioState.src === src) {
      // 等待WaveSurfer加载完成后同步进度
      ws.on('ready', () => {
        ws.seekTo(currentAudioState.currentTime / currentAudioState.duration);
        ws.play();
      });
    }
  });
}

现在PJAX切换页面后调用initMusic，会重新创建当前页面的波形，并且自动同步之前的播放状态，波形就会重新显示并和音频保持同步了。

一些额外的最佳实践 #

1. 记得在页面切换或销毁组件时调用ws.destroy()，避免内存泄漏；
2. 如果需要处理音频加载错误，可以给WaveSurfer绑定error事件：ws.on('error', (err) => console.error(err))；
3. 对于大量track的场景，可以考虑懒加载波形，比如只初始化可见区域的WaveSurfer实例，提升页面性能。

内容来源于stack exchange