fix: change audio volume

src/components/app/app.tsx

@@ -12,6 +12,7 @@ import { Categories } from '@/components/categories';
 import { SharedModal } from '@/components/modals/shared';
 import { Toolbar } from '@/components/toolbar';
 import { SnackbarProvider } from '@/contexts/snackbar';
+import { SoundProvider } from '@/contexts/sound';
 
 import { sounds } from '@/data/sounds';
 import { FADE_OUT } from '@/constants/events';
@@ -86,17 +87,19 @@ export function App() {
   }, [favoriteSounds, categories]);
 
   return (
-    <SnackbarProvider>
+    <SoundProvider>
-      <StoreConsumer>
+      <SnackbarProvider>
-        <Container>
+        <StoreConsumer>
-          <div id="app" />
+          <Container>
-          <Buttons />
+            <div id="app" />
-          <Categories categories={allCategories} />
+            <Buttons />
-        </Container>
+            <Categories categories={allCategories} />
+          </Container>
 
-        <Toolbar />
+          <Toolbar />
-        <SharedModal />
+          <SharedModal />
-      </StoreConsumer>
+        </StoreConsumer>
-    </SnackbarProvider>
+      </SnackbarProvider>
+    </SoundProvider>
   );
 }

src/contexts/sound.tsx

@@ -0,0 +1,76 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { Howler } from 'howler';
+
+// Define the context's interface
+interface SoundContextType {
+  connectBufferSource: (bufferSource: AudioBufferSourceNode) => void;
+  updateVolume: (volume: number) => void; // Add a function to update the volume
+}
+
+// Create the SoundContext with an empty initial value
+const SoundContext = createContext<SoundContextType | undefined>(undefined);
+
+// Custom hook to use the SoundContext
+export const useSoundContext = (): SoundContextType => {
+  const context = useContext(SoundContext);
+  if (!context) {
+    throw new Error('useSoundContext must be used within a SoundProvider');
+  }
+  return context;
+};
+
+// Props for the SoundProvider component
+interface SoundProviderProps {
+  children: React.ReactNode;
+}
+
+export const SoundProvider: React.FC<SoundProviderProps> = ({ children }) => {
+  const [dest, setDest] = useState<MediaStreamAudioDestinationNode | null>(
+    null,
+  );
+  const [audioTag, setAudioTag] = useState<HTMLAudioElement | null>(null);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      // Get the Howler.js AudioContext after the component is mounted
+      const audioCtx = Howler.ctx;
+
+      if (audioCtx) {
+        const mediaDest = audioCtx.createMediaStreamDestination();
+        setDest(mediaDest);
+
+        // Create an audio element to trick iOS
+        const audioElement = document.createElement('audio');
+        audioElement.srcObject = mediaDest.stream;
+        audioElement.style.display = 'none'; // Hide the audio element
+        document.body.appendChild(audioElement);
+        setAudioTag(audioElement);
+
+        return () => {
+          // Clean up the audio element on unmount
+          document.body.removeChild(audioElement);
+        };
+      }
+    }
+  }, []);
+
+  // Function to connect a buffer source to the MediaStreamDestination
+  const connectBufferSource = (bufferSource: AudioBufferSourceNode) => {
+    if (dest) {
+      bufferSource.connect(dest);
+    }
+  };
+
+  // Function to update the volume of the audio tag
+  const updateVolume = (volume: number) => {
+    if (audioTag) {
+      audioTag.volume = volume;
+    }
+  };
+
+  return (
+    <SoundContext.Provider value={{ connectBufferSource, updateVolume }}>
+      {children}
+    </SoundContext.Provider>
+  );
+};

src/hooks/use-sound.ts

@@ -5,6 +5,7 @@ import { useLoadingStore } from '@/stores/loading';
 import { subscribe } from '@/lib/event';
 import { useSSR } from './use-ssr';
 import { FADE_OUT } from '@/constants/events';
+import { useSoundContext } from '@/contexts/sound';
 
 /**
  * A custom React hook to manage sound playback using Howler.js with additional features.
@@ -34,6 +35,8 @@ export function useSound(
   const setIsLoading = useLoadingStore(state => state.set);
 
   const { isBrowser } = useSSR();
+  const { connectBufferSource, updateVolume } = useSoundContext(); // Access SoundContext
+
   const sound = useMemo<Howl | null>(() => {
     let sound: Howl | null = null;
 
@@ -43,6 +46,13 @@ export function useSound(
         onload: () => {
           setIsLoading(src, false);
           setHasLoaded(true);
+
+          // Connect the buffer source to the MediaStreamDestination
+          // @ts-ignore
+          const source = sound!._sounds[0]._node.bufferSource;
+          if (source) {
+            connectBufferSource(source);
+          }
         },
         preload: options.preload ?? false,
         src: src,
@@ -50,7 +60,14 @@ export function useSound(
     }
 
     return sound;
-  }, [src, isBrowser, setIsLoading, html5, options.preload]);
+  }, [
+    src,
+    isBrowser,
+    setIsLoading,
+    html5,
+    options.preload,
+    connectBufferSource,
+  ]);
 
   useEffect(() => {
     if (sound) {
@@ -59,8 +76,11 @@ export function useSound(
   }, [sound, options.loop]);
 
   useEffect(() => {
-    if (sound) sound.volume(options.volume ?? 0.5);
+    if (sound) {
-  }, [sound, options.volume]);
+      sound.volume(options.volume ?? 0.5);
+      updateVolume(options.volume ?? 0.5); // Update the volume of the audio tag
+    }
+  }, [sound, options.volume, updateVolume]);
 
   const play = useCallback(
     (cb?: () => void) => {
@@ -95,9 +115,10 @@ export function useSound(
       setTimeout(() => {
         pause();
         sound?.volume(options.volume || 0.5);
+        updateVolume(options.volume || 0.5); // Ensure the volume is reset after fade-out
       }, duration);
     },
-    [options.volume, sound, pause],
+    [options.volume, sound, pause, updateVolume],
   );
 
   useEffect(() => {