So I got this Next component where it can play or stop the music (just like the MP3 player). It works perfectly fine when I run it on local server, when I click the button, the audio will play or stop. But however, I’am getting an error in the terminal, it says

srccomponentsbgmAudio.tsx (6:31) @ Audio
 ⨯ ReferenceError: Audio is not defined
    at BgmAudio (./src/components/bgmAudio.tsx:13:72)
digest: "2253870762"

  4 | export default function BgmAudio() {
  5 |   const [isPlaying, setIsPlaying] = useState(false);
> 6 |   const audioRef = useRef(new Audio("/audio/bgmAmbient.MP3"));
    |                               ^

And here’s my full source code:

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

export default function BgmAudio() {
  const [isPlaying, setIsPlaying] = useState(false);
  const audioRef = useRef(new Audio("/audio/bgmAmbient.MP3"));

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

  return (
    // Play or stop the audio button
    <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>
  );
}

How do I fix this problem? I’m using Typescript 😀