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

Question

I try to create a react audio player and the waves appears on the app but there is no action when i press play and i think it's the same waveform for all songs. The button for play/pause works fine but i can't see the wave moving when music is playing.I used FontAwesome for the controls and it's not connected with the waveform controls.I tried to create some functions and events to have animations on the waves but nothing happens.

Answer 1

You can see here the Player component.

    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;