react 展示波形图

要在 React 中展示波形图，可以使用第三方的 JavaScript 库，例如 WaveSurfer.js 或者 Waves.js。这些库提供了一个简单的 API，可以让你在 React 组件中轻松地实现波形图的展示和交互。

以下是一个使用 WaveSurfer.js 在 React 中展示波形图的示例代码：

1. 安装 WaveSurfer.js：

npm install wavesurfer.js

2. 创建一个 WaveSurfer 实例：

import WaveSurfer from 'wavesurfer.js';

const waveform = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'red',
  progressColor: 'purple',
  height: 200,
  barWidth: 3,
  barRadius: 3,
});

3. 在 React 组件中使用 WaveSurfer：

import React, { useEffect, useRef } from 'react';

function Waveform() {
  const waveformRef = useRef(null); // 用于保存 WaveSurfer 实例
  const audioRef = useRef(null); // 用于保存 audio 元素

  useEffect(() => {
    const waveform = waveformRef.current;

    waveform.on('ready', () => {
      waveform.play();
    });

    waveform.load(audioRef.current); // 加载音频文件

    return () => {
      waveform.destroy(); // 卸载 WaveSurfer 实例
    };
  }, []);

  return (
    <div>
      <div id="waveform" ref={waveformRef}></div>
      <audio src="audio-file.mp3" ref={audioRef}></audio>
    </div>
  );
}

在这个示例中，我们创建了一个 WaveSurfer 实例，并在 React 组件中使用它来展示音频波形图。我们通过 `container` 属性指定了波形图的容器元素，通过 `waveColor` 和 `progressColor` 属性指定了波形图的颜色，通过 `height` 属性指定了波形图的高度，通过 `barWidth` 和 `barRadius` 属性指定了波形图中每个音频帧的宽度和圆角半径。

在 React 组件中，我们使用了 `useRef` 钩子来保存 WaveSurfer 实例和 audio 元素的引用。在 `useEffect` 钩子中，我们监听了 WaveSurfer 实例的 `ready` 事件，并在事件回调函数中播放了音频文件。我们还调用了 `waveform.load(audioRef.current)` 方法来加载音频文件，同时在组件卸载时调用了 `waveform.destroy()` 方法来卸载 WaveSurfer 实例。

注意，在使用 WaveSurfer.js 展示波形图时，你需要将音频文件加载到一个 `<audio>` 元素中，并将该元素的引用传递给 WaveSurfer 实例的 `load` 方法。