improved playback

app/page.tsx

@@ -1,7 +1,6 @@
 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'],
 })
@@ -23,7 +22,6 @@ 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>
   );
 }

components/Soundboard/index.tsx

@@ -1,42 +1,36 @@
 "use client"
-import useSound from 'use-sound';
+import { useRef } from 'react';
 
 export default function Soundboard() {
-  const [playBoyYouPlay] = useSound("/boyyouplay.m4a", {soundEnabled: true});
-  const [playEatItUp] = useSound("/eatitup.m4a", {soundEnabled: true});
-  const [playGangbusters] = useSound("/gangbusters.m4a", {soundEnabled: true});
-  const [playHusky] = useSound("/husky.m4a", {soundEnabled: true});
-  const [playPrettyFlags] = useSound("/prettyflags.m4a", {soundEnabled: true});
-  const [playHobbs] = useSound("/hobbs.m4a", {soundEnabled: true});
-  const [playGoodLooking] = useSound("/goodlookingband.m4a", {soundEnabled: true});
-  const [playImpressive] = useSound("/impressive.m4a", {soundEnabled: true});
-  const [playTallTubas] = useSound("/talltubas.m4a", {soundEnabled: true});
-  const [playWildChart] = useSound("/wildchart.m4a", {soundEnabled: true});
-  const [playScared] = useSound("/scared.m4a", {soundEnabled: true});
-  const [playNotBad] = useSound("/notbad.m4a", {soundEnabled: true});
-  const [playStrongTubas] = useSound("/strongtubas.m4a", {soundEnabled: true});
-  const [playTallBand] = useSound("/tallband.m4a", {soundEnabled: true});
+  const audioRef = useRef<HTMLAudioElement>(null);
 
-  const getButton = (title: string, play: () => void) => {
-    return <button className="border-2 rounded-lg p-4 text-center text-xl font-medium cursor-pointer hover:bg-gray-200 active:bg-blue-200" onClick={() => play()}>{title}</button>
+  const getButton = (title: string, src: string) => {
+    return <button className="border-2 rounded-lg p-4 text-center text-xl font-medium cursor-pointer hover:bg-gray-200 active:bg-blue-200" 
+    onClick={() => {
+      if (audioRef.current) {
+        audioRef.current.src = src;
+        audioRef.current.play();
+      }
+    }}>{title}</button>
   }
 
   return (
      <div className="grid grid-cols-2 gap-8">
-        {getButton("Boy you play!", playBoyYouPlay)}
-        {getButton("Eat It Up!", playEatItUp)}
-        {getButton("Gangbusters", playGangbusters)}
-        {getButton("Husky", playHusky)}
-        {getButton("Pretty Flags", playPrettyFlags)}
-        {getButton("Hobbs", playHobbs)}
-        {getButton("Good Looking Band", playGoodLooking)}
-        {getButton("Pretty Impressive", playImpressive)}
-        {getButton("3 Tall Tubas", playTallTubas)}
-        {getButton("Wild Chart", playWildChart)}
-        {getButton("Scared Me", playScared)}
-        {getButton("Not Bad", playNotBad)}
-        {getButton("Strong Tubas", playStrongTubas)}
-        {getButton("Tall Band", playTallBand)}
+        {getButton("Boy you play!", "/boyyouplay.m4a")}
+        {getButton("Eat It Up!", "/eatitup.m4a")}
+        {getButton("Gangbusters", "/gangbusters.m4a")}
+        {getButton("Husky", "/husky.m4a")}
+        {getButton("Pretty Flags", "/prettyflags.m4a")}
+        {getButton("Hobbs", "/hobbs.m4a")}
+        {getButton("Good Looking Band", "/goodlookingband.m4a")}
+        {getButton("Pretty Impressive", "/impressive.m4a")}
+        {getButton("3 Tall Tubas",  "/talltubas.m4a")}
+        {getButton("Wild Chart", "/wildchart.m4a")}
+        {getButton("Scared Me", "/scared.m4a")}
+        {getButton("Not Bad", "/notbad.m4a")}
+        {getButton("Strong Tubas", "/strongtubas.m4a")}
+        {getButton("Tall Band", "/tallband.m4a")}
+        <audio hidden ref={audioRef} />
       </div>
   );
 }

package.json

@@ -11,8 +11,7 @@
   "dependencies": {
     "next": "15.5.4",
     "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "use-sound": "^5.0.0"
+    "react-dom": "19.1.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

public/fixhowler.js

@@ -1,6 +0,0 @@
-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();
-        }
-});

yarn.lock

@@ -1696,11 +1696,6 @@ hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
-howler@^2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/howler/-/howler-2.2.4.tgz#bd3df4a4f68a0118a51e4bd84a2bfc2e93e6e5a1"
-  integrity sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w==
-
 ignore@^5.2.0:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
@@ -2907,13 +2902,6 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-use-sound@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/use-sound/-/use-sound-5.0.0.tgz#62894ecf5ac3810c3f105c783bb93b15ad9157a6"
-  integrity sha512-MNHT3FFC5HxNCrgZtrnpIMJI2cw/0D2xismcrtyht8BTuF5FhFhb57xO/jlQr2xJaFrc/0btzRQvGyHQwB7PVA==
-  dependencies:
-    howler "^2.2.4"
-
 which-boxed-primitive@^1.1.0, which-boxed-primitive@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz#d76ec27df7fa165f18d5808374a5fe23c29b176e"