无法在 Reactjs 中暂停音频

Question

我关注了其他问过类似问题的帖子，但他们没有提供解决方案。

我无法在 React Hook 中暂停音频。

这是我的反应挂钩：

import React, { useState } from "react";

export default (App = props => {
  const [audioStatus, changeAudioStatus] = useState(false);
  const audio = new Audio(
    "https://mcdn.podbean.com/mf/web/xm5ngf/The_Challenge_Chronicles_-_Episode_48_7ys6e.mp3"
  );
  audio.load();

  const startAudio = () => {
    audio.play();

    changeAudioStatus(true);
  };

  const pauseAudio = () => {
    console.log("here");
    audio.pause();
    changeAudioStatus(false);
  };

  return (
    <>
      {audioStatus ? (
        <button onClick={pauseAudio}>pause</button>
      ) : (
        <button onClick={startAudio}>start</button>
      )}
    </>
  );

我还创建了一个沙箱：https://codesandbox.io/s/great-gagarin-v0vi1

Answer 1

你可以使用audio tag, and pass a ref来反应，这样它就会知道正在使用什么元素。

working example

export default (App = props => {
  const [audioStatus, changeAudioStatus] = useState(false);
  const myRef = useRef();

  const startAudio = () => {
    myRef.current.play();

    changeAudioStatus(true);
  };

  const pauseAudio = () => {
    console.log("here");
    myRef.current.pause();
    changeAudioStatus(false);
  };

  return (
    <>
      <audio
        ref={myRef}
        src="https://mcdn.podbean.com/mf/web/xm5ngf/The_Challenge_Chronicles_-_Episode_48_7ys6e.mp3"
      />
      {audioStatus ? (
        <button onClick={pauseAudio}>pause</button>
      ) : (
        <button onClick={startAudio}>start</button>
      )}
    </>
  );
});

Answer 2

我也遇到了类似的问题，通过更改解决了

const audio = new Audio(...)

至

const [audio, setAudio] = useState( new Audio(...) )

我相信通过将音频置于状态，我们可以防止 React 在每次重新渲染时刷新音频值，从而解决引用问题。但是，我的结论可能是错误的；如果我错了，请纠正我。无论如何，这行得通。

无法在 Reactjs 中暂停音频

Unable to pause audio in Reactjs

html5-audio

reactjs