Wavesurfer-react波形按钮对齐问题：按钮需对应置于波形下方

问题核心是未将波形组件与对应控制按钮分组，导致所有按钮集中在所有波形之后。只需给每个波形+按钮组合套独立容器，就能实现一一对应的上下布局。

1. 封装独立的波形+控制组件 #

把单个波形和它的Play/Pause按钮封装成一个独立组件，每个组件都是一个完整的单元：

import React, { useRef } from 'react';
import { WaveSurfer } from 'wavesurfer-react';

const AudioWaveformWithControls = ({ audioUrl }) => {
  const wavesurferRef = useRef(null);

  const togglePlay = () => {
    wavesurferRef.current?.playPause();
  };

  return (
    // 用flex容器确保波形和按钮垂直排列
    <div style={{ marginBottom: '20px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
      <WaveSurfer
        ref={wavesurferRef}
        url={audioUrl}
        options={{
          height: 100,
          barWidth: 3,
          barGap: 2,
          cursorWidth: 1,
        }}
      />
      <button onClick={togglePlay}>Play/Pause</button>
    </div>
  );
};

export default AudioWaveformWithControls;

2. 在父组件中复用该组件 #

直接多次调用封装好的组件，每个实例都会自带对应的控制按钮，自动实现一一对应：

import AudioWaveformWithControls from './AudioWaveformWithControls';

const YourParentComponent = () => {
  return (
    <div>
      <AudioWaveformWithControls audioUrl="/path/to/first-audio.mp3" />
      <AudioWaveformWithControls audioUrl="/path/to/second-audio.mp3" />
    </div>
  );
};

export default YourParentComponent;

3. 可选：用CSS优化样式 #

如果觉得内联样式不够灵活，换成CSS类：

.audio-waveform-wrapper {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.audio-control-btn {
  padding: 0.4rem 1rem;
  border: none;
  border-radius: 4px;
  background: #2563eb;
  color: white;
  cursor: pointer;
}

然后修改组件中的容器和按钮：

<div className="audio-waveform-wrapper">
  <WaveSurfer {/* 配置项不变 */} />
  <button className="audio-control-btn" onClick={togglePlay}>Play/Pause</button>
</div>

原理很简单：每个独立容器用垂直方向的flex布局，强制按钮在波形下方显示，每个容器的元素互不干扰，自然实现你要的“每个波形下方对应自己的按钮”效果。

内容的提问来源于stack exchange，提问作者the nerdy girl