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,6 +80,7 @@ export function App() {
   }, [favoriteSounds, categories]);
 
   return (
+    <>
       <SnackbarProvider>
         <StoreConsumer>
           <Container>
@@ -82,5 +94,8 @@ export function App() {
           <SharedModal />
         </StoreConsumer>
       </SnackbarProvider>
+
+      <audio aria-hidden={true} ref={audio} src="" />
+    </>
   );
 }