如何使用 Vite 处理 React 中的音频文件？

Question

我正在尝试创建一个简单的 React 应用程序，它使用 wavesurfer.js 来播放和可视化音频文件。

我正在使用 Vite + Typescript + SWC，当然还有 React。

这是我的尝试：

import { useEffect, useRef } from 'react';
import WaveSurfer from 'wavesurfer.js';

function App() {
  const waveformRef = useRef<HTMLDivElement | null>(null);
  const wavesurfer = useRef<WaveSurfer | null>(null);

  useEffect(() => {
    if (waveformRef.current) {
      wavesurfer.current = WaveSurfer.create({
        container: waveformRef.current,
        waveColor: 'rgb(200, 0, 200)',
        progressColor: 'rgb(100, 0, 100)'
      });

      wavesurfer.current.load('./assets/original_ekt.mp3');

      wavesurfer.current.on('ready', () => {
        console.log("WaveSurfer is ready!");
      });

      return () => wavesurfer.current?.destroy();
    }
  }, []);

  return (
    <div>
      <div ref={waveformRef} style={{ width: '100%', border: '1px solid black' }}>
      </div>
      <button onClick={() => wavesurfer.current?.playPause()}>
        Play/Pause
      </button>
    </div>
  );
}

export default App;

但是，我在尝试播放音频时遇到错误：

未捕获（承诺中）DOMException：由 指示的媒体资源 src 属性或分配的媒体提供程序对象不合适。

我怀疑这与 CORS 有关，但我不确定。 在这种环境下我该如何管理资源？

Answer 1

更新：我没有将音频文件放入 /public 文件夹中，因此出现错误。