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

components/ItemEditor.tsx

@@ -8,6 +8,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from ".
 import { SOUND_CATEGORIES, EMOJIS } from "@/lib/bingo-data";
 import { Badge } from "./ui/badge";
 import { ResourceBrowser, DragData } from "./ResourceBrowser";
+import { playSoundOnce } from "@/lib/sounds";
 
 type Item = {
   id: string;
@@ -200,10 +201,6 @@ export function ItemEditor({ campaign }: { campaign: Campaign }) {
     setUploading(false);
   };
 
-  const playSoundOnce = (url: string) => {
-    try { const a = new Audio(url); a.preload = "auto"; a.volume = 0.4; a.play().catch(() => {}); } catch {}
-  };
-
   // ─── Drag & Drop handlers ───────────────────────────────────────
 
   const handleDragOver = useCallback((e: React.DragEvent, idx: number) => {

components/ResourceBrowser.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useCallback, useRef } from "react";
 import { useDropzone } from "react-dropzone";
-import { Howl } from "howler";
+import { playSoundOnce } from "@/lib/sounds";
 
 // ─── Types ──────────────────────────────────────────────────────────
 
@@ -33,19 +33,6 @@ export type DragData =
   | { type: "image"; url: string; originalName: string }
   | { type: "emoji"; emoji: string };
 
-// ─── Howl helper ────────────────────────────────────────────────────
-
-const howlCache = new Map<string, Howl>();
-
-function playPreview(url: string) {
-  let h = howlCache.get(url);
-  if (!h) {
-    h = new Howl({ src: [url], format: ["mp3", "ogg"], volume: 0.4, preload: true });
-    howlCache.set(url, h);
-  }
-  h.play();
-}
-
 // ─── Emoji Picker (inline, searchable) ──────────────────────────────
 
 const EMOJI_LIST = [
@@ -211,7 +198,7 @@ function SoundsTab() {
                 label={s.originalName}
                 duration={s.duration}
                 url={s.url}
-                onPlay={() => playPreview(s.url)}
+                onPlay={() => playSoundOnce(s.url)}
                 onDelete={() => deleteSound(filename)}
               />
             );
@@ -244,7 +231,7 @@ function SoundsTab() {
                 key={r.id}
                 name={r.name}
                 duration={r.duration}
-                onPreview={() => r.previewUrl && playPreview(r.previewUrl)}
+                onPreview={() => r.previewUrl && playSoundOnce(r.previewUrl)}
                 onImport={() => importSound(r)}
               />
             ))}