fix: connect audio context to audio element

src/components/app/app.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useEffect } from 'react';
+import { useMemo, useEffect, useRef } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import { BiSolidHeart } from 'react-icons/bi/index';
 import { Howler } from 'howler';
@@ -19,6 +19,8 @@ import { sounds } from '@/data/sounds';
 import type { Sound } from '@/data/types';
 
 export function App() {
+  const audio = useRef<HTMLAudioElement | null>(null);
+
   const categories = useMemo(() => sounds.categories, []);
 
   const favorites = useSoundStore(useShallow(state => state.getFavorites()));
@@ -53,6 +55,15 @@ export function App() {
     return () => document.removeEventListener('visibilitychange', onChange);
   }, []);
 
+  useEffect(() => {
+    if (audio.current) {
+      const { ctx } = Howler;
+      const dest = ctx.createMediaStreamDestination();
+      audio.current.srcObject = dest.stream;
+      audio.current.play();
+    }
+  }, []);
+
   const allCategories = useMemo(() => {
     const favorites = [];
 
@@ -69,18 +80,22 @@ export function App() {
   }, [favoriteSounds, categories]);
 
   return (
-    <SnackbarProvider>
-      <StoreConsumer>
-        <Container>
-          <div id="app" />
-          <Buttons />
-          <Categories categories={allCategories} />
-        </Container>
+    <>
+      <SnackbarProvider>
+        <StoreConsumer>
+          <Container>
+            <div id="app" />
+            <Buttons />
+            <Categories categories={allCategories} />
+          </Container>
 
-        <ScrollToTop />
-        <Menu />
-        <SharedModal />
-      </StoreConsumer>
-    </SnackbarProvider>
+          <ScrollToTop />
+          <Menu />
+          <SharedModal />
+        </StoreConsumer>
+      </SnackbarProvider>
+
+      <audio aria-hidden={true} ref={audio} src="" />
+    </>
   );
 }