add web visualizer

package.json

@@ -262,6 +262,7 @@
         "@ag-grid-community/react": "^28.2.1",
         "@ag-grid-community/styles": "^28.2.1",
         "@emotion/react": "^11.10.4",
+        "@foobar404/wave": "github:kgarner7/wave.js#fc9d339c49d1f7da44238f026c4a6870a36df9f6",
         "@mantine/core": "^6.0.17",
         "@mantine/dates": "^6.0.17",
         "@mantine/form": "^6.0.17",

src/renderer/app.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
 import { ModuleRegistry } from '@ag-grid-community/core';
 import { InfiniteRowModelModule } from '@ag-grid-community/infinite-row-model';
@@ -23,8 +23,9 @@ import { PlayQueueHandlerContext } from '/@/renderer/features/player';
 import { AddToPlaylistContextModal } from '/@/renderer/features/playlists';
 import { getMpvProperties } from '/@/renderer/features/settings/components/playback/mpv-settings';
 import { PlayerState, usePlayerStore, useQueueControls } from '/@/renderer/store';
-import { PlaybackType, PlayerStatus } from '/@/renderer/types';
+import { PlaybackType, PlayerStatus, WebAudio } from '/@/renderer/types';
 import '@ag-grid-community/styles/ag-grid.css';
+import { WebAudioContext } from '/@/renderer/features/player/context/webaudio-context';
 
 ModuleRegistry.registerModules([ClientSideRowModelModule, InfiniteRowModelModule]);
 
@@ -44,6 +45,8 @@ export const App = () => {
     const { clearQueue, restoreQueue } = useQueueControls();
     const remoteSettings = useRemoteSettings();
 
+    const [webAudio, setWebAudio] = useState<WebAudio>();
+
     useEffect(() => {
         const root = document.documentElement;
         root.style.setProperty('--content-font-family', contentFont);
@@ -53,6 +56,10 @@ export const App = () => {
         return { handlePlayQueueAdd };
     }, [handlePlayQueueAdd]);
 
+    const webAudioProvider = useMemo(() => {
+        return { setWebAudio, webAudio };
+    }, [webAudio]);
+
     // Start the mpv instance on startup
     useEffect(() => {
         const initializeMpv = async () => {
@@ -210,7 +217,9 @@ export const App = () => {
             >
                 <PlayQueueHandlerContext.Provider value={providerValue}>
                     <ContextMenuProvider>
-                        <AppRouter />
+                        <WebAudioContext.Provider value={webAudioProvider}>
+                            <AppRouter />
+                        </WebAudioContext.Provider>
                     </ContextMenuProvider>
                 </PlayQueueHandlerContext.Provider>
             </ModalsProvider>

src/renderer/components/audio-player/index.tsx

@@ -10,6 +10,7 @@ import {
 import { useSettingsStore } from '/@/renderer/store/settings.store';
 import type { CrossfadeStyle } from '/@/renderer/types';
 import { PlaybackStyle, PlayerStatus } from '/@/renderer/types';
+import { useWebAudio } from '/@/renderer/features/player/hooks/use-webaudio';
 
 interface AudioPlayerProps extends ReactPlayerProps {
     crossfadeDuration: number;
@@ -33,11 +34,6 @@ const getDuration = (ref: any) => {
     return ref.current?.player?.player?.player?.duration;
 };
 
-type WebAudio = {
-    context: AudioContext;
-    gain: GainNode;
-};
-
 export const AudioPlayer = forwardRef(
     (
         {
@@ -60,7 +56,7 @@ export const AudioPlayer = forwardRef(
         const audioDeviceId = useSettingsStore((state) => state.playback.audioDeviceId);
         const playback = useSettingsStore((state) => state.playback.mpvProperties);
 
-        const [webAudio, setWebAudio] = useState<WebAudio | null>(null);
+        const { webAudio, setWebAudio } = useWebAudio();
         const [player1Source, setPlayer1Source] = useState<MediaElementAudioSourceNode | null>(
             null,
         );
@@ -122,9 +118,11 @@ export const AudioPlayer = forwardRef(
                     sampleRate: playback.audioSampleRateHz || undefined,
                 });
                 const gain = context.createGain();
-                gain.connect(context.destination);
+                const analyzer = context.createAnalyser();
+                gain.connect(analyzer);
+                analyzer.connect(context.destination);
 
-                setWebAudio({ context, gain });
+                setWebAudio!({ analyzer, context, gain });
 
                 return () => {
                     return context.close();