hax/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-12-17 08:54:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: connect audio context to audio element

Browse source
This commit is contained in:
MAZE 2024-01-28 19:28:55 +03:30
parent b77c817db2
commit 463667c868
1 changed files with 28 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/components/app/app.tsx
View file

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