Next.js 13.4.19页面加载后按键播放音频的实现问题

问题核心原因有两点：

• 容器div默认无法获取焦点，导致键盘事件无法被捕获
• 直接通过DOM ID调用音频元素不符合React最佳实践，存在潜在的DOM查找问题

以下是修复后的代码：

"use client"

import { useRef, useEffect } from 'react';

export default function Home() {
  // 用useRef获取音频元素，替代全局DOM查找
  const kickRef = useRef(null);
  const hatRef = useRef(null);
  const snareRef = useRef(null);
  const containerRef = useRef(null);

  function handlePlay(e) {
    if (e.keyCode === 81) {
      kickRef.current?.play().catch(err => console.log('Kick播放失败:', err));
    } else if (e.keyCode === 83) {
      hatRef.current?.play().catch(err => console.log('Hat播放失败:', err));
    } else if (e.keyCode === 68) {
      snareRef.current?.play().catch(err => console.log('Snare播放失败:', err));
    }
  };

  useEffect(() => {
    // 组件挂载后让容器自动聚焦，确保键盘事件能被捕获
    containerRef.current?.focus();

    // 添加全局键盘监听，即使容器失去焦点也能触发音频播放
    const globalKeyHandler = (e) => handlePlay(e);
    window.addEventListener('keydown', globalKeyHandler);

    // 组件卸载时移除全局监听，避免内存泄漏
    return () => {
      window.removeEventListener('keydown', globalKeyHandler);
    };
  }, []);

  return (
    <div 
      ref={containerRef}
      tabIndex="0"
      onKeyDown={handlePlay}
      style={{ outline: 'none' }} // 移除聚焦后的默认边框，可选样式优化
    >
      <audio ref={kickRef} src="kick.wav"></audio>
      <audio ref={hatRef} src="hat.wav"></audio>
      <audio ref={snareRef} src="snare.wav"></audio>

      <button onClick={() => kickRef.current?.play()}>Kick</button>
      <button onClick={() => hatRef.current?.play()}>Hat</button>
      <button onClick={() => snareRef.current?.play()}>Snare</button>
    </div>
  )
}

关键修复点说明：

• 容器焦点处理：给div添加tabIndex="0"使其可聚焦，通过useEffect在组件挂载后自动调用focus()，确保页面加载后键盘事件能被容器捕获
• 音频元素引用：使用React的useRef获取音频元素，避免直接操作全局DOM，符合React组件化规范
• 全局键盘监听：额外添加全局keydown监听，确保即使容器失去焦点，用户仍能通过键盘触发音频播放，同时在组件卸载时清理监听，防止内存泄漏
• 错误捕获：给play()方法添加catch()，便于调试浏览器自动播放策略导致的异常情况

内容的提问来源于stack exchange，提问作者Stephan