Next.js + TypeScript + Zustand项目中背景音乐播放/暂停切换功能不稳定的解决方法咨询

嘿，我之前也碰到过类似的音频控制不稳定的问题，结合你的代码来看，主要问题出在全局audioRef的生命周期管理和状态同步上，下面给你几个针对性的解决思路和修改方案：

问题根源分析 #

你现在用全局变量audioRef存储音频实例，在Next.js的组件渲染、路由切换场景下，这个全局变量的生命周期和组件/应用的生命周期是脱节的，很容易出现实例引用丢失、状态和实际音频播放状态不一致的情况，这就是导致切换不稳定的核心原因。

具体解决步骤 #

1. 用React的useRef替代全局变量存储音频实例 #

React的useRef会在组件的整个生命周期内保持引用稳定，不会因为组件重新渲染而丢失或重置，能完美适配组件内的音频实例管理：

// 在组件内部或自定义hook中使用useRef
const audioRef = useRef<HTMLAudioElement | null>(null);

2. 初始化音频实例并绑定状态同步监听 #

把音频实例的初始化逻辑放到useEffect中，同时监听音频的play、pause事件，确保Zustand中的isPlaying状态和音频的实际播放状态完全同步，避免手动设置状态时出现的不一致：

export const useUtilities = () => {
  const { isPlaying, setIsPlaying } = useAudioStore();
  const audioRef = useRef<HTMLAudioElement | null>(null);

  // 初始化音频实例并绑定事件监听
  useEffect(() => {
    if (!audioRef.current) {
      audioRef.current = new Audio("/audio/bgm.mp3");
      audioRef.current.loop = true;

      // 监听音频播放事件，同步到Zustand状态
      audioRef.current.addEventListener('play', () => {
        setIsPlaying(true);
      });

      // 监听音频暂停事件，同步到Zustand状态
      audioRef.current.addEventListener('pause', () => {
        setIsPlaying(false);
      });
    }

    // 组件卸载时清理音频实例
    return () => {
      if (audioRef.current) {
        audioRef.current.pause();
        audioRef.current.removeEventListener('play', () => setIsPlaying(true));
        audioRef.current.removeEventListener('pause', () => setIsPlaying(false));
        audioRef.current = null;
      }
    };
  }, [setIsPlaying]);

  const toggleMusic = () => {
    if (!audioRef.current) return;

    if (audioRef.current.paused) {
      // 这里用try-catch处理浏览器自动播放限制
      try {
        audioRef.current.play();
      } catch (err) {
        console.error('音频播放失败，请检查浏览器自动播放政策:', err);
      }
    } else {
      audioRef.current.pause();
    }
  };

  return { toggleMusic, isPlaying };
};

3. 处理浏览器自动播放限制 #

现在主流浏览器都有严格的自动播放政策，音频必须由用户主动交互（比如点击按钮）触发才能播放，你的代码已经是通过点击按钮触发，这里加个try-catch可以捕获播放失败的情况，方便调试。

4. 确保Zustand store的状态初始化正确 #

检查你的Zustand audio store，确保isPlaying的初始值是false，和音频实例的初始暂停状态保持一致：

// 示例Zustand store
import { create } from 'zustand';

type AudioStore = {
  isPlaying: boolean;
  setIsPlaying: (state: boolean) => void;
};

export const useAudioStore = create<AudioStore>((set) => ({
  isPlaying: false,
  setIsPlaying: (isPlaying) => set({ isPlaying }),
}));

额外注意事项 #

• 如果你是在Next.js的App Router中使用，确保组件是客户端组件（加'use client'指令），因为音频API只能在浏览器环境中运行。
• 避免在多个组件中重复创建音频实例，尽量把音频管理逻辑集中在一个自定义hook或单独的store中。

内容来源于stack exchange