使用 nextjs 时未定义音频

Question

使用此代码不断给我错误ReferenceError: Audio is not defined。我得到这是因为 nextjs 是 ssr 但应该有一种方法可以让它工作

  const musicPlayers = useRef<HTMLAudioElement>(
    new Audio("")
  );

我在网上发现我可以用这个东西

  const musicPlayers = useRef<false |HTMLAudioElement>(
    typeof Audio !== "undefined" && new Audio("")
  );

但是我需要尽可能使用 false 选项，这会给我和播放暂停代码错误

Property 'paused' does not exist on type 'false | HTMLAudioElement'
Property 'play' does not exist on type 'false | HTMLAudioElement'.
     if (musicPlayers.current?.paused) {
          musicPlayers.current.play();
        } else {
          musicPlayers.current?.pause();
        }

Answer 1

替换：

const musicPlayers = useRef<HTMLAudioElement | undefined>(
  typeof Audio !== "undefined" ? new Audio("") : undefined
);

然后你可以调用：

musicPlayers.current?.play();
musicPlayers.current?.pause();