如何使用带有 React 和 FontAwesome 图标的 Wavesurfer？

Question

我尝试创建一个反应音频播放器，并且波形出现在应用程序上，但是当我按下播放时没有任何动作，我认为所有歌曲的波形都相同。 播放/暂停按钮工作正常，但在播放音乐时我看不到波浪移动。我使用 FontAwesome 作为控件，它没有与波形控件连接。我尝试创建一些函数和事件以在波，但什么也没发生。

Answer 1

您可以在此处看到 Player 组件。

    import React, { useEffect, useRef, useState } from "react";
import PlayerDetails from "./PlayerDetails";
import PlayerControls from "./PlayerControls";
import Waveform from "./Waveform";

function Player(props) {
  const audioEl = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);

  //paramétrage lecture des sons
  useEffect(() => {
    if (isPlaying) {
      audioEl.current.play();
    } else {
      audioEl.current.pause();
    }
  });

  //paramétrage changement de sons forward
  const SkipSong = (forwards = true) => {
    if (forwards) {
      props.setCurrentSongIndex(() => {
        let temp = props.currentSongIndex;
        temp++;

        if (temp > props.songs.length - 1) {
          temp = 0;
        }
        return temp;
      });
      //paramétrage backward
    } else {
      props.setCurrentSongIndex(() => {
        let temp = props.currentSongIndex;
        temp--;

        if (temp < 0) {
          temp = props.songs.length - 1;
        }
        return temp;
      });
    }
  };

  return (
    <div className="c-player">
      <audio
        src={props.songs[props.currentSongIndex].src}
        ref={audioEl}
        autoPlay={true}
      ></audio>
      <h4>Playing Now</h4>
      {/*DETAILS*/}
      <PlayerDetails song={props.songs[props.currentSongIndex]} />

      {/*CONTROLS*/}
      <Waveform
        src={props.songs[props.currentSongIndex].src}
      />
      <PlayerControls
        isPlaying={isPlaying}
        setIsPlaying={setIsPlaying}
        SkipSong={SkipSong}
      />
      <p>
        Next up:
        <strong>
          {" "}
          {props.songs[props.nextSongIndex].title} by{" "}
          {props.songs[props.nextSongIndex].artist}
        </strong>
      </p>
    </div>
  );
}

export default Player;