allow disabling web audio

src/i18n/locales/en.json

@@ -638,6 +638,8 @@
         "volumeWheelStep_description": "the amount of volume to change when scrolling the mouse wheel on the volume slider",
         "volumeWidth": "volume slider width",
         "volumeWidth_description": "the width of the volume slider",
+        "webAudio": "use web audio",
+        "webAudio_description": "use web audio. this enables advanced features like replaygain. disable if you experience otherwise",
         "windowBarStyle": "window bar style",
         "windowBarStyle_description": "select the style of the window bar",
         "zoom": "zoom percentage",

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

@@ -69,6 +69,7 @@ export const AudioPlayer = forwardRef(
         const [isTransitioning, setIsTransitioning] = useState(false);
         const audioDeviceId = useSettingsStore((state) => state.playback.audioDeviceId);
         const playback = useSettingsStore((state) => state.playback.mpvProperties);
+        const useWebAudio = useSettingsStore((state) => state.playback.webAudio);
         const { resetSampleRate } = useSettingsStoreActions();
         const playbackSpeed = useSpeed();
 
@@ -129,7 +130,7 @@ export const AudioPlayer = forwardRef(
         );
 
         useEffect(() => {
-            if ('AudioContext' in window) {
+            if (useWebAudio && 'AudioContext' in window) {
                 let context: AudioContext;
 
                 try {

src/renderer/features/settings/components/playback/audio-settings.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { SelectItem } from '@mantine/core';
+import { SelectItem, Switch } from '@mantine/core';
 import isElectron from 'is-electron';
 import { Select, Slider, toast } from '/@/renderer/components';
 import {
@@ -132,6 +132,27 @@ export const AudioSettings = ({ hasFancyAudio }: { hasFancyAudio: boolean }) =>
                 postProcess: 'sentenceCase',
             }),
         },
+        {
+            control: (
+                <Switch
+                    defaultChecked={settings.webAudio}
+                    onChange={(e) => {
+                        setSettings({
+                            playback: { ...settings, webAudio: e.currentTarget.checked },
+                        });
+                    }}
+                />
+            ),
+            description: t('setting.webAudio', {
+                context: 'description',
+                postProcess: 'sentenceCase',
+            }),
+            isHidden: settings.type !== PlaybackType.WEB,
+            note: t('common.restartRequired', { postProcess: 'sentenceCase' }),
+            title: t('setting.webAudio', {
+                postProcess: 'sentenceCase',
+            }),
+        },
         {
             control: (
                 <Slider

src/renderer/features/settings/components/playback/playback-tab.tsx

@@ -4,6 +4,8 @@ import { AudioSettings } from '/@/renderer/features/settings/components/playback
 import { ScrobbleSettings } from '/@/renderer/features/settings/components/playback/scrobble-settings';
 import isElectron from 'is-electron';
 import { LyricSettings } from '/@/renderer/features/settings/components/playback/lyric-settings';
+import { useSettingsStore } from '/@/renderer/store';
+import { PlaybackType } from '/@/renderer/types';
 
 const MpvSettings = lazy(() =>
     import('/@/renderer/features/settings/components/playback/mpv-settings').then((module) => {
@@ -12,9 +14,15 @@ const MpvSettings = lazy(() =>
 );
 
 export const PlaybackTab = () => {
+    const audioType = useSettingsStore((state) => state.playback.type);
+    const useWebAudio = useSettingsStore((state) => state.playback.webAudio);
+
     const hasFancyAudio = useMemo(() => {
-        return isElectron() || 'AudioContext' in window;
-    }, []);
+        return (
+            (isElectron() && audioType === PlaybackType.LOCAL) ||
+            (useWebAudio && 'AudioContext' in window)
+        );
+    }, [audioType, useWebAudio]);
 
     return (
         <Stack spacing="md">

src/renderer/store/settings.store.ts

@@ -265,6 +265,7 @@ export interface SettingsState {
         };
         style: PlaybackStyle;
         type: PlaybackType;
+        webAudio: boolean;
     };
     remote: {
         enabled: boolean;
@@ -439,6 +440,7 @@ const initialState: SettingsState = {
         },
         style: PlaybackStyle.GAPLESS,
         type: PlaybackType.WEB,
+        webAudio: true,
     },
     remote: {
         enabled: false,