使用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 as possible 选项，这给了我播放暂停代码的错误

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();