useState() 导致音频 object 出现意外行为

Question

我正在尝试创建一个基本的音频播放器并使用 state 挂钩跟踪播放器 state。

以下代码创建具有以下行为的组件：

1. 第一次按下按钮时播放音频
2. 每次按下按钮时，文本都会正确切换
3. 当 state 正在播放时，调用 player.pause() 什么都不做
4. 当 state 未播放时，音频会继续，调用 player.play() 会导致第二层音频从顶部开始

    import React, {useState} from 'react'
    
    function InlinePlayer ({audio}) {
      const [playing, setPlaying] = useState(false)
    
      const player = new Audio(audio.asset.url)
    
      function togglePlay () {
        playing ? player.pause() : player.play()
        setPlaying(!playing)
      }
    
      return <>
        <button onClick={() => togglePlay()}>
          {playing ? 'Stop' : 'Play' }
        </button>
      </>
    }
    
    export default InlinePlayer

如果我根本不使用 state 挂钩，我可以毫无问题地停止和启动音频。

一件奇怪的事情是，即使我无条件地调用 play() 然后调用 state 挂钩，随后对 pause() 的调用也不再起作用。 就好像调用 setPlaying() 会破坏与播放器 object 的连接。 如果我注释掉 setPlaying 行，它可以工作。

  function play () {
    player.play()
    setPlaying(true)
  }

  function pause () {
    player.pause()
    setPlaying(false)
  }

我最初认为问题在于 state 被异步设置，因此条件播放是罪魁祸首。 这里似乎有什么？

Answer 1

player.pause()和player.play()就像副作用一样。 将useEffect与适当的清理功能一起使用，以便您可以切换play/pause ：

import React, { useState, useEffect } from "react";

function InlinePlayer({ audio }) {
  const [playing, setPlaying] = useState(false);

  const player = new Audio(
    "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
  );

  useEffect(() => {
    playing ? player.play() : player.pause();

    // This is cleanup of the effect
    return () => player.pause();

  }, [playing]);
   // ^ Run the effect every time the `playing` is changed

  function togglePlay() {
    // Using the callback version of `setState` so you always
    // toggle based on the latest state
    setPlaying(s => !s);
  }

  return (
    <>
      <button onClick={() => togglePlay()}>{playing ? "Stop" : "Play"}</button>
    </>
  );
}

Answer 2

const [ sound ] = useState(new Audio('path_sound'));

return (
    <div>
      <button onClick={() => sound.paused = !sound.paused}>
        {sound.paused ? "Play" : "Stop"}
      </button>
    </div>
);