音频播放/暂停切换在反应中不起作用

Question

function MusicCard() {
const [playing, setPlaying] = useState(false);

const url = "http://localhost:4000/musics/myMusic.mp3";
const audio = new Audio(url);

const play = () => {
    setPlaying(true);
    audio.play();
};

const pause = () => {
    setPlaying(false);
    audio.pause();
};

return (
    <div className="music-card">
        <div className="music-card_image-con">
            <button style={{
                backgroundImage: `url(${process.env.PUBLIC_URL}music-image.jpg)`
            }} onClick={playing ? pause : play}>{ playing ? <FaPause /> : <FaPlay /> }</button>
        </div>
        <div className="music-card_info-con">
            <div className="music-card_info-name">
                <h3>music name</h3>
                <p> - </p>
                <p>Singer</p>
            </div>
            <div className="music-card_info-seekbar">
                <input type="range" style={{
                    width: "100%"
                }} />
            </div>
        </div>
        <button className="music-card_actions-btn"><FaEllipsisV /></button>
    </div>

);
}

这个切换有什么问题？当我按下播放按钮时，它会播放音乐，但当我再次按下它时，它会启动另一个音乐会话，就像使用另一个新的 Audio() 方法而不是暂停它！

编辑：暂停不起作用，每次开始播放时都会开始新的音频会话

Answer 1

setPlaying 调用会导致重新渲染并在每次组件重新渲染时初始化 Audio 的新实例，您必须调用 useRef 以在每次渲染之间保持 Audio 实例：

import { useState, useRef } from "react";

function MusicCard() {
  const [playing, setPlaying] = useState(false);

  const url = "http://localhost:4000/musics/myMusic.mp3";

  const audioRef = useRef(new Audio(url));

  const play = () => {
    setPlaying(true);
    audioRef.current.play();
  };

  const pause = () => {
    setPlaying(false);
    audioRef.current.pause();
  };

  return (
    <div className="music-card">
      <div className="music-card_image-con">
        <button
          style={{
            backgroundImage: `url(${process.env.PUBLIC_URL}music-image.jpg)`,
          }}
          onClick={playing ? pause : play}
        >
          {playing ? <FaPause /> : <FaPlay />}
        </button>
      </div>
      <div className="music-card_info-con">
        <div className="music-card_info-name">
          <h3>music name</h3>
          <p> - </p>
          <p>Singer</p>
        </div>
        <div className="music-card_info-seekbar">
          <input
            type="range"
            style={{
              width: "100%",
            }}
          />
        </div>
      </div>
      <button className="music-card_actions-btn">
        <FaEllipsisV />
      </button>
    </div>
  );
}

export default MusicCard;