Next.js中出现ReferenceError: Audio is not defined错误如何解决？

安全阿岳

2026-6-19

修复Next.js客户端组件中Audio未定义的错误

问题根源

你已经添加了"use client"标记，但useRef的初始值会在服务器端渲染阶段执行，而Audio是浏览器专属API，Node.js服务器环境中不存在这个全局对象，因此触发ReferenceError。

修复方案

调整代码逻辑，把Audio实例的创建移到仅在客户端执行的流程中：

初始化audioRef为null，通过TypeScript指定类型为Audio | null
使用useEffect在组件挂载后创建Audio实例（useEffect仅在浏览器环境运行）
在播放/暂停方法中添加空值校验，避免调用null对象的方法

修改后的完整代码

"use client";
import { useEffect, useState, useRef } from "react";

export default function BgmAudio() {
  const [isPlaying, setIsPlaying] = useState(false);
  // 初始化ref为null，指定TypeScript类型
  const audioRef = useRef<Audio | null>(null);

  useEffect(() => {
    // 仅在客户端创建Audio实例
    audioRef.current = new Audio("/audio/bgmAmbient.MP3");
    // 组件卸载时清理音频实例，防止内存泄漏
    return () => {
      if (audioRef.current) {
        audioRef.current.pause();
        audioRef.current = null;
      }
    };
  }, []);

  const bgmPlay = () => {
    // 空值检查，避免调用null对象的方法
    if (!audioRef.current) return;

    if (!isPlaying) {
      setIsPlaying(true);
      audioRef.current.play();
    } else {
      setIsPlaying(false);
      audioRef.current.pause();
    }
  };

  return (
    <div className="w-8 fill-textBase active:scale-90s" onClick={bgmPlay}>
      {isPlaying && (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
          {/* 补充你的暂停图标路径 */}
        </svg>
      )}
      {!isPlaying && (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
          {/* 补充你的播放图标路径 */}
        </svg>
      )}
    </div>
  );
}