Javascript 在reactjs中使用HTMLAudioElement创建简单播放器

我正在创建一个简单的web应用程序播放器。 我想获取正在播放的音乐的当前时间。
这是登录

useffect

，非常棒

React.useEffect(() => {
    Audio.addEventListener("timeupdate", (e) => {
      //setCurrentTime(e.target.currentTime);
      console.log(e.target.currentTime);
    });
    return () => {
      Audio.removeEventListener("timeupdate", () => {});
    };
  }, []);

问题
在

状态下设置
e.target.currentTime
时，音乐播放停止。

  React.useEffect(() => {
    Audio.addEventListener("timeupdate", (e) => {
      setCurrentTime(e.target.currentTime);
      console.log(e.target.currentTime);
    });
    return () => {
      Audio.removeEventListener("timeupdate", () => {});
    };
  }, []);





它将与本地
音频
元素一起工作：

  import React from "react";
  import Musics from "../data/Musics";
  import Next from "../assets/next.svg";
  import Prev from "../assets/prev.svg";
  import Play from "../assets/play.svg";
  import Pause from "../assets/pause.svg";
  import Progress from "../components/Progress";
  import MusicTitle from "../components/MusicTitle";
  import Button from "../components/Button";
  import Container from "../components/Container";
  //import Audio from "../models/Audio";

  const MusicPlayer = () => {
    const [state, setState] = React.useState({
      isPlaying: false,
      title: Musics[0].name,

      path: Musics[0].path
      /**
       * Define your state here
       */
    });

    const [currentTime, setCurrentTime] = React.useState(0);

    const audio = new Audio();
    audio.src = state.path;
    audio.addEventListener("timeupdate", function () {
      let time = this.currentTime;
      setCurrentTime(time);
      console.log(time);
    });

    const next = () => {
      // TODO Implement this function
    };
    const prev = () => {
      // TODO Implement this function
    };
    const play = () => {
      console.log(5);
      audio.play();
    };

    return (
      <Container>
        <MusicTitle title={state.title} />
        <Progress currentTime={currentTime} />
        <div className="row justify-content-center">
          <Button data-testid="prev-btn" onClick={prev} src={Prev} />
          <Button
            data-testid={state.isPlaying ? "pause" : "play-btn"}
            onClick={play}
            src={state.isPlaying ? Pause : Play}
          />
          <Button data-testid="next-btn" onClick={next} src={Next} />
        </div>
      </Container>
    );
  };

  export default MusicPlayer;

是的。很好。这是我现在的问题。为什么从“./型号/音频”
导入音频不起作用？我更新了答案。非常好。谢谢
import React from "react";
import Musics from "../data/Musics";
import Next from "../assets/next.svg";
import Prev from "../assets/prev.svg";
import Play from "../assets/play.svg";
import Pause from "../assets/pause.svg";
import Progress from "../components/Progress";
import MusicTitle from "../components/MusicTitle";
import Button from "../components/Button";
import Container from "../components/Container";
import Audio from "../models/Audio";

const MusicPlayer = () => {
  const [state, setState] = React.useState({
    isPlaying: false,
    title: Musics[0].name,

    path: Musics[0].path
    /**
     * Define your state here
     */
  });

  const [currentTime, setCurrentTime] = React.useState(0);

  React.useEffect(() => {
    const timeupdate = (e) => {
      setCurrentTime(e.target.currentTime);
      console.log(e.target.currentTime);
    };
    Audio.addEventListener("timeupdate", timeupdate);
    return () => {
      Audio.removeEventListener("timeupdate", timeupdate);
    };
  });

  if (!Audio.src)
    Audio.src = state.path;

  const next = () => {
    // TODO Implement this function
  };
  const prev = () => {
    // TODO Implement this function
  };
  const play = () => {
    console.log(5);
    Audio.play();
  };

  return (
    <Container>
      <MusicTitle title={state.title} />
      <Progress currentTime={currentTime} />

      <div className="row justify-content-center">
        <Button data-testid="prev-btn" onClick={prev} src={Prev} />
        <Button
          data-testid={state.isPlaying ? "pause" : "play-btn"}
          onClick={play}
          src={state.isPlaying ? Pause : Play}
        />
        <Button data-testid="next-btn" onClick={next} src={Next} />
      </div>
    </Container>
  );
};

export default MusicPlayer;