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

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)}
               />
             ))}