如何在 React 上按键播放声音

Question

我的工作框架： Next.JS v13.4.19

我在做什么：当我按下某个键时尝试播放声音片段。

我是如何做到的：函数handlePlay()会查找某些按键，并在匹配时触发特定声音片段的play()函数。

到目前为止我的功能运行得很好。如果我按 Q、S 或 D，它就会播放我想要的文件。

我的问题：只有当我先单击其中一个按钮时，它才有效。

我的目标

：页面加载后就从键盘播放这些声音片段。 我的代码

"use client"

export default function Home() {
  
  function handlePlay(e) {
    if (e.keyCode === 81) {
      kick.play()
    } else if (e.keyCode === 83) {
      hat.play()
    } else if (e.keyCode === 68) {
      snare.play()
    }
  };


  return (
    <div onKeyDown={(e) => handlePlay(e)}>
      <audio id="kick" src="kick.wav"></audio>
      <audio id="hat" src="hat.wav"></audio>
      <audio id="snare" src="snare.wav"></audio>

      <button onClick={() => kick.play()}>
        Kick
      </button>
      <button onClick={() => hat.play()}>
        Hat
      </button>
      <button onClick={() => snare.play()}>
        Snare
      </button>
    </div>
  )
}

问题是您的 div 不会捕获 keyup 事件，除非您在元素（或元素的子元素）获得焦点时主动按下按键。尝试使用

Answer 1

挂钩将侦听器附加到文档而不是特定的 div：

"use client"

export default function Home() {
  useEffect(() => {
    document.addEventListener('keydown', handlePlay)

    return () => document.removeEventListener('keydown', handlePlay)
  }, [])
  
  function handlePlay(e) {
    if (e.keyCode === 81) {
      kick.play()
    } else if (e.keyCode === 83) {
      hat.play()
    } else if (e.keyCode === 68) {
      snare.play()
    }
  };


  return (
    <div>
      <audio id="kick" src="kick.wav"></audio>
      <audio id="hat" src="hat.wav"></audio>
      <audio id="snare" src="snare.wav"></audio>

      <button onClick={() => kick.play()}>
        Kick
      </button>
      <button onClick={() => hat.play()}>
        Hat
      </button>
      <button onClick={() => snare.play()}>
        Snare
      </button>
    </div>
  )
}