fix bug

app/page.tsx

@@ -1,6 +1,7 @@
 import Soundboard from '@/components/Soundboard';
 import { Metadata } from 'next';
 import { Rubik } from 'next/font/google';
+import Script from 'next/script';
 const rubik = Rubik({
   subsets: ['latin'],
 })
@@ -22,6 +23,7 @@ export default function Home() {
     <div className={`flex flex-col items-center justify-center px-4 py-16 gap-16 ${rubik.className}`}>
       <h1 className="text-4xl font-bold text-center">Doyle Gammill Soundboard</h1>
       <Soundboard/>
+      <Script src="/fixhowler.js" />
     </div>
   );
 }

public/fixhowler.js

@@ -0,0 +1,6 @@
+document.addEventListener("visibilitychange", (e) =>{
+        // document.visibilityState  will be "visible" or "hidden" (or "prerender) if it's important
+        if (Howler.ctx.state !== "running") { // better to check on !=="running" as you are doing
+            Howler.ctx.resume();
+        }
+});