Next.js 13 + TypeScript中实现答题音效播放遇阻求助

核心问题说明 #

Next.js是SSR/SSG框架，浏览器专属API（比如Audio）无法在服务器端执行，所有音效相关代码必须确保只在客户端环境运行——这是你之前尝试失败的关键原因。

方案1：原生Audio API实现 #

直接使用浏览器原生Audio对象，通过useRef和useEffect确保仅在客户端初始化音效：

'use client'; // Next.js 13+ App Router必须加此指令，确保组件在客户端运行
import { useEffect, useRef, useState } from 'react';

export default function QuizComponent({ userWords, setUserWords }) {
  const inputRef = useRef(null);
  const [inputValue, setInputValue] = useState("");
  const [isSuccess, setIsSuccess] = useState(false);
  const [isFailed, setIsFailed] = useState(false);
  const [effect, setEffect] = useState(false);

  // 用useRef保存音效实例，避免重复创建
  const correctSoundRef = useRef(null);
  const errorSoundRef = useRef(null);

  useEffect(() => {
    // 仅在客户端初始化Audio对象
    correctSoundRef.current = new Audio('/correct.mp3'); // 音效文件放在项目public目录下
    errorSoundRef.current = new Audio('/error.mp3');

    // 预加载音效，避免播放延迟
    correctSoundRef.current.load();
    errorSoundRef.current.load();

    // 组件卸载时清理音效
    return () => {
      correctSoundRef.current?.pause();
      errorSoundRef.current?.pause();
    };
  }, []);

  const handleCheckAnswer = () => {
    if (inputValue.toLowerCase() === "yes") {
      // 播放正确音效，捕获错误便于排查
      correctSoundRef.current?.play().catch(err => console.error('正确音效播放失败:', err));
      setIsSuccess(true);
      setInputValue("");
      setUserWords([inputValue.toLowerCase(), ...userWords]);
    } else {
      // 播放错误音效
      errorSoundRef.current?.play().catch(err => console.error('错误音效播放失败:', err));
      setEffect(true);
      setIsFailed(true);
    }
    inputRef.current?.focus();
  };

  // 这里写组件的渲染逻辑，比如输入框、提示信息等
  return (
    <div>
      <input ref={inputRef} value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
      <button onClick={handleCheckAnswer}>提交答案</button>
      {isSuccess && <p>回答正确！</p>}
      {isFailed && <p>回答错误，请重试！</p>}
    </div>
  );
}

关键注意事项 #

• 音效文件必须放在项目根目录的public文件夹下，路径直接写/文件名.mp3即可
• 用useRef保存Audio实例，避免每次组件渲染重复创建对象
• 调用play()时加catch捕获错误，方便排查文件路径、浏览器权限等问题

方案2：修复use-sound包的使用 #

如果你倾向于用第三方库，按以下步骤修复use-sound的使用问题：

1. 安装依赖：

npm install use-sound
# 或
yarn add use-sound

2. 在客户端组件中使用：

'use client';
import useSound from 'use-sound';
import { useState, useRef } from 'react';

export default function QuizComponent({ userWords, setUserWords }) {
  const inputRef = useRef(null);
  const [inputValue, setInputValue] = useState("");
  const [isSuccess, setIsSuccess] = useState(false);
  const [isFailed, setIsFailed] = useState(false);
  const [effect, setEffect] = useState(false);

  // 加载音效，路径指向public目录下的文件
  const [playCorrect] = useSound('/correct.mp3');
  const [playError] = useSound('/error.mp3');

  const handleCheckAnswer = () => {
    if (inputValue.toLowerCase() === "yes") {
      playCorrect();
      setIsSuccess(true);
      setInputValue("");
      setUserWords([inputValue.toLowerCase(), ...userWords]);
    } else {
      playError();
      setEffect(true);
      setIsFailed(true);
    }
    inputRef.current?.focus();
  };

  // 渲染逻辑同方案1
}

常见排查点 #

• 必须确保组件是客户端组件（加'use client'指令），use-sound依赖浏览器API，无法在服务器端运行
• 检查音效文件路径是否正确，若文件不存在会直接导致播放失败
• 查看浏览器控制台的错误信息，比如是否存在跨域限制或浏览器自动拦截音效播放（部分浏览器会静音自动播放的音频）

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