fix: replace new Audio() with howler.js for reliable sound playback + error logging

lib/sounds.ts

@@ -1,3 +1,5 @@
+import { Howl } from "howler";
+
 let audioCtx: AudioContext | null = null;
 
 function getCtx(): AudioContext {
@@ -107,13 +109,50 @@ export function playChaosRiser() {
   });
 }
 
+// ─── Howl-based URL playback ──────────────────────────────────────
+
+const howlCache = new Map<string, Howl>();
+
+/**
+ * Play a sound file URL (MP3/OGG) using howler.js.
+ * Howler handles autoplay policy, cross-browser codec support,
+ * and AudioContext resume better than raw new Audio().
+ */
 export function playSoundUrl(url: string) {
-  try {
-    const audio = new Audio(url);
-    audio.preload = "auto";
-    audio.volume = 0.4;
-    audio.play().catch(() => {});
-  } catch {}
+  let h = howlCache.get(url);
+  if (!h) {
+    h = new Howl({
+      src: [url],
+      format: url.endsWith(".mp3") ? ["mp3"] : url.endsWith(".ogg") ? ["ogg"] : ["mp3", "ogg"],
+      volume: 0.4,
+      onloaderror: (_id: number, err: unknown) => {
+        console.error("[BaraBingo] Howl load error:", url, err);
+      },
+      onplayerror: (_id: number, err: unknown) => {
+        console.error("[BaraBingo] Howl play error:", url, err);
+      },
+    });
+    howlCache.set(url, h);
+  }
+  h.play();
+}
+
+/**
+ * One-shot play of a sound URL. Same as playSoundUrl but always creates a fresh instance.
+ * Useful for preview/editor buttons where you want it to play every click.
+ */
+export function playSoundOnce(url: string) {
+  new Howl({
+    src: [url],
+    format: url.endsWith(".mp3") ? ["mp3"] : url.endsWith(".ogg") ? ["ogg"] : ["mp3", "ogg"],
+    volume: 0.4,
+    onloaderror: (_id: number, err: unknown) => {
+      console.error("[BaraBingo] Howl load error:", url, err);
+    },
+    onplayerror: (_id: number, err: unknown) => {
+      console.error("[BaraBingo] Howl play error:", url, err);
+    },
+  }).play();
 }
 
 export function playSound(category: string, soundUrl?: string | null) {