Update global audio volume exclusively through useReplContext effect

This ensures the audio volume is synced across tabs, since changing the volume in one tab would retrigger the effect in the other tabs.

It also means we can remove the explicit call to `setGlobalAudioVolume()` from <SettingsTab>

website/src/repl/components/panel/SettingsTab.jsx

@@ -167,10 +167,7 @@ export function SettingsTab({ started }) {
         )}
         <NumberSlider
           value={audioVolume}
-          onChange={(audioVolume) => {
-            settingsMap.setKey('audioVolume', audioVolume);
-            setGlobalAudioVolume(audioVolume);
-          }}
+          onChange={(audioVolume) => settingsMap.setKey('audioVolume', audioVolume)}
           min={0}
           max={100}
           step={0.1}

website/src/repl/useReplContext.jsx

@@ -159,11 +159,10 @@ export function useReplContext() {
     editorRef.current?.updateSettings(editorSettings);
   }, [_settings]);
 
-  // on first load...
+  // on first load, set stored audio device if possible
   useEffect(() => {
-    const { audioDeviceName, audioVolume } = _settings;
+    const { audioDeviceName } = _settings;
 
-    // set stored audio device if possible
     if (audioDeviceName !== defaultAudioDeviceName) {
       getAudioDevices().then((devices) => {
         const deviceID = devices.get(audioDeviceName);
@@ -173,11 +172,11 @@ export function useReplContext() {
         setAudioDevice(deviceID);
       });
     }
-
-    // set stored audio volume
-    setGlobalAudioVolume(audioVolume);
   }, []);
 
+  // set stored audio volume
+  useEffect(() => setGlobalAudioVolume(_settings.audioVolume), [_settings.audioVolume]);
+
   //
   // UI Actions
   //