无法暂停反应音频

Question

import { useState } from "react";

function Music(){

  const [pauseToggle, setpauseToggle] = useState(false)

  const music = new Audio(require(`./Alan.mp3`));
  console.log(music);
  let isPlaying = false;

  const player = () => {
    pauseToggle ? setpauseToggle(false) : setpauseToggle(true);
    if(isPlaying){
      music.pause();
      isPlaying = false;
    }else{
      music.play();
      isPlaying = true;
    }
  }

  return(
    <div>
      <button onClick={player}>{pauseToggle?"=":">"}</button>
    </div>
  )

}

export default Music;

我无法暂停音频，而是在我尝试暂停时播放了两次。 我试图从这个Unable to pause audio in Reactjs 获得帮助，但没有帮助

还有其他暂停音频文件的解决方案吗？

提前谢谢你

Answer 1

我相信music 变量应该是有状态的，因此它可以在渲染中保留。

const [music] = useState(new Audio(require(`./Alan.mp3`)));

和isPlaying 应该可以通过查询音频对象（音乐）和/或通过监听播放/暂停状态变化来更新。

Answer 2

我会将状态简化为单个布尔值：您的音频要么正在播放，要么没有，所以这里不需要冗余。 let isPlaying = false; 不是状态，因此它不会在渲染中保持不变，并且不会做任何 pauseToggle 尚未实现的事情。

由于音频是渲染的副作用，我将其设为 ref，然后根据 playing 何时在 useEffect 中更改触发播放/暂停功能。

有点好处，但对于初学者来说，处理onended 事件以在曲目结束时将播放设置为 false 可能是值得的。

const {useEffect, useRef, useState} = React;

const MusicPlayer = ({url}) => {
  const [playing, setPlaying] = useState(false);
  const audioRef = useRef(new Audio(url));

  useEffect(() => {
    const handler = () => setPlaying(false);
    audioRef.current.addEventListener("ended", handler);
    return () => 
      audioRef.current.removeEventListener("ended", handler)
    ;
  }, [audioRef.current]);

  useEffect(() => {
    audioRef.current[playing ? "play" : "pause"]();
  }, [playing]);

  return (
    <div>
      <button onClick={() => setPlaying(!playing)}>
        {playing ? "=" : ">"}
      </button>
    </div>
  );
};

const url = "https://upload.wikimedia.org/wikipedia/en/a/a9/Webern_-_Sehr_langsam.ogg";
ReactDOM.render(
  <MusicPlayer url={url}/>,
  document.querySelector("#app")
);

button {
  font-size: 2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>

将音频放入钩子有助于使其可重用并保持父组件清洁：

const {useEffect, useRef, useState} = React;

const useAudio = url => {
  const [playing, setPlaying] = useState(false);
  const audioRef = useRef(new Audio(url));

  useEffect(() => {
    const handler = () => setPlaying(false);
    audioRef.current.addEventListener("ended", handler);
    return () => 
      audioRef.current.removeEventListener("ended", handler)
    ;
  }, [audioRef.current]);

  useEffect(() => {
    audioRef.current[playing ? "play" : "pause"]();
  }, [playing]);

  return [playing, setPlaying];
};

const MusicPlayer = ({url}) => {
  const [playing, setPlaying] = useAudio(url);

  return (
    <div>
      <button onClick={() => setPlaying(!playing)}>
        {playing ? "=" : ">"}
      </button>
    </div>
  );
};

const url = "https://upload.wikimedia.org/wikipedia/en/a/a9/Webern_-_Sehr_langsam.ogg";
ReactDOM.render(
  <MusicPlayer url={url}/>,
  document.querySelector("#app")
);

button {
  font-size: 2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>