hax/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-12-18 09:24:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: change audio volume

Browse source
This commit is contained in:
MAZE 2024-09-03 17:06:05 +03:30
parent a64b30d047
commit 4f5fe7d042
2 changed files with 16 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/contexts/sound.tsx
View file

@ -4,6 +4,7 @@ import { Howler } from 'howler';
// Define the context's interface // Define the context's interface
interface SoundContextType { interface SoundContextType {
connectBufferSource: (bufferSource: AudioBufferSourceNode) => void; connectBufferSource: (bufferSource: AudioBufferSourceNode) => void;
updateVolume: (volume: number) => void; // Add a function to update the volume
} }
// Create the SoundContext with an empty initial value // Create the SoundContext with an empty initial value
@ -57,16 +58,18 @@ export const SoundProvider: React.FC<SoundProviderProps> = ({ children }) => {
const connectBufferSource = (bufferSource: AudioBufferSourceNode) => { const connectBufferSource = (bufferSource: AudioBufferSourceNode) => {
if (dest) { if (dest) {
bufferSource.connect(dest); bufferSource.connect(dest);
}
};
// Start playing the audio once the first buffer connects // Function to update the volume of the audio tag
if (audioTag && audioTag.paused) { const updateVolume = (volume: number) => {
audioTag.play().catch(() => console.error('Failed to play audio')); if (audioTag) {
} audioTag.volume = volume;
} }
}; };
return ( return (
<SoundContext.Provider value={{ connectBufferSource }}> <SoundContext.Provider value={{ connectBufferSource, updateVolume }}>
{children} {children}
</SoundContext.Provider> </SoundContext.Provider>
); );

13
src/hooks/use-sound.ts
View file

@ -35,7 +35,7 @@ export function useSound(
const setIsLoading = useLoadingStore(state => state.set); const setIsLoading = useLoadingStore(state => state.set);
const { isBrowser } = useSSR(); const { isBrowser } = useSSR();
const { connectBufferSource } = useSoundContext(); // Access SoundContext const { connectBufferSource, updateVolume } = useSoundContext(); // Access SoundContext
const sound = useMemo<Howl | null>(() => { const sound = useMemo<Howl | null>(() => {
let sound: Howl | null = null; let sound: Howl | null = null;
@ -51,7 +51,6 @@ export function useSound(
// @ts-ignore // @ts-ignore
const source = sound!._sounds[0]._node.bufferSource; const source = sound!._sounds[0]._node.bufferSource;
if (source) { if (source) {
console.log('DOOOOPE');
connectBufferSource(source); connectBufferSource(source);
} }
}, },
@ -77,8 +76,11 @@ export function useSound(
}, [sound, options.loop]); }, [sound, options.loop]);
useEffect(() => { 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( const play = useCallback(
(cb?: () => void) => { (cb?: () => void) => {
@ -113,9 +115,10 @@ export function useSound(
setTimeout(() => { setTimeout(() => {
pause(); pause();
sound?.volume(options.volume || 0.5); sound?.volume(options.volume || 0.5);
updateVolume(options.volume || 0.5); // Ensure the volume is reset after fade-out
}, duration); }, duration);
}, },
[options.volume, sound, pause], [options.volume, sound, pause, updateVolume],
); );
useEffect(() => { useEffect(() => {