我使用 wavesurfer.js 在 JS 中构建了一个带有播放列表的出色音频播放器，但现在我正尝试在 React 中实现相同的功能。由于某种原因，它不会加载任何曲目。导入 React，{ useEffect，useRef，useS...

我使用 wavesurfer.js 在 JS 中构建了一个带播放列表的出色音频播放器，但现在我正尝试在 react 中实现相同的功能。不知为何它无法加载任何曲目。

import React, { useEffect, useRef, useState } from 'react';
import WaveSurfer from 'wavesurfer.js';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faBackward } from '@fortawesome/free-solid-svg-icons'
import { faForward } from '@fortawesome/free-solid-svg-icons'
import { faPlay } from '@fortawesome/free-solid-svg-icons'
import { faPause} from '@fortawesome/free-solid-svg-icons'

const AudioPlayer = () => {
  const [trackNumber, setTrackNumber] = useState(1);
  const [isPlaying, setIsPlaying] = useState(false);
  const audioPath = './audio/';
  const playList = [
    'Greedy Guns_Miguel Cintra_Prelude (gameplay extended theme).wav',
    'track_01.mp3',
    'track_02.mp3',
    'track_03.mp3'
  ];

  const waveSurferRef = useRef(null);

  useEffect(() => {
    waveSurferRef.current = WaveSurfer.create({
      container: '.audio',
      waveColor: '#28ABE2',
      progressColor: '#103A61',
      height: 90,
      barWidth: 0.5,
      cursorColor: 'rgba(34, 34, 34, 0.2)',
      responsive: true
    });



    return () => {
      waveSurferRef.current.destroy();
    };
  }, []);

  const loadTrack = (trackIndex) => {""
    const playedTrack = playList[trackIndex];
    waveSurferRef.current.load(audioPath + playedTrack);
    document.querySelector('.track-name').innerText = playedTrack;

    waveSurferRef.current.once('ready', () => {
      waveSurferRef.current.play();
      setIsPlaying(true);
    });
  };

  const handleNextTrack = () => {
    const nextTrackIndex = (trackNumber + 1) % playList.length;
    setTrackNumber(nextTrackIndex);
    loadTrack(nextTrackIndex);
  };

  const handlePreviousTrack = () => {
    const prevTrackIndex = (trackNumber - 1 + playList.length) % playList.length;
    setTrackNumber(prevTrackIndex);
    loadTrack(prevTrackIndex);
  };

  const togglePlayPause = () => {
    waveSurferRef.current.playPause();
    setIsPlaying(waveSurferRef.current.isPlaying());
  };


  return (
    <div className="audio-container">
      <div className="buttons">
        <button>
          <FontAwesomeIcon icon={faBackward} onClick={handlePreviousTrack} className="buttons" />
        </button>
          <button className={`play-btn ${isPlaying ? 'playing' : ''}`} onClick={togglePlayPause}>
          {isPlaying ? <FontAwesomeIcon className="fa-pause buttons"  icon={faPause} /> : <FontAwesomeIcon className="fa-play" icon={faPlay} />}
          </button>
          <button>
          <FontAwesomeIcon icon={faForward} onClick={handleNextTrack} className="buttons" />
          </button>
      </div>
        <div className="track-name"></div>
        <div className="audio"></div>
    </div>
  );
};

export default AudioPlayer;

每次我按下“播放按钮”时都会出现此错误：

request.js:1 获取最终的音频文件：GET \'http://localhost:5173/audio/track_03.mp3\'。

localhost/:1 未捕获（承诺中）NotSupportedError：该元素没有支持的源。

这是路径的问题吗？

作为参考，JS 代码运行良好。是否可以将 JS 代码复制过去并将其导入到我的 React 应用程序中？

// AUDIOPLAYER

var audioTrack = WaveSurfer.create({
  container: '.audio',
  waveColor: '#28ABE2',
  progressColor: '#103A61',
  height: 90,
  barWidth: 0.5,
  cursorColor: 'rgba(34, 34, 34, 0.2)',
  responsive: true
});


var nextTrack = document.querySelector('.fa-forward');
var previousTrack = document.querySelector('.fa-backward');
var audioPath = '/static/audio/'
var playList = ['Greedy Guns_Miguel Cintra_Prelude (gameplay extended theme).wav', 'track_01.mp3', 'track_02.mp3', 'track_03.mp3'];
var trackNumber = 0;
var playedTrack = playList[trackNumber];
console.log(playedTrack)
audioTrack.load(audioPath + playedTrack);

function playTrack() {
  var playedTrack = playList[trackNumber];
  console.log(playedTrack)
  audioTrack.load(audioPath + playedTrack);
  document.querySelector('.track-name').innerText = playedTrack;
  audioTrack.on('ready', function () {
    audioTrack.play();
  });
}

nextTrack.addEventListener('click', () => {

  if (trackNumber === playList.length - 1) {
    trackNumber = 0;
    playTrack();
  } else {
    trackNumber += 1;
    playTrack();
  }
});

previousTrack.addEventListener('click', () => {
  if (trackNumber === 0) {
    trackNumber = playList.length - 1;
    playTrack();
  } else {
    trackNumber -= 1;
    playTrack();
  }
});


document.querySelector('.track-name').innerText = playedTrack;


const play = document.querySelector('.play-btn');


play.addEventListener('click', () => {
  console.log('ok')
  audioTrack.playPause();

  if (audioTrack.isPlaying()) {
    play.classList.add("playing");
  } else {
    play.classList.remove("playing");
  }
});