system standard resets audio context

website/src/repl/panel/AudioDeviceSelector.jsx

@@ -3,14 +3,19 @@ import { getAudioContext, initializeAudioOutput } from '@strudel.cycles/webaudio
 import { SelectInput } from './SelectInput';
 
 const initdevices = new Map();
+const defaultDeviceName = 'System Standard';
 // Allows the user to select an audio interface for Strudel to play through
 export function AudioDeviceSelector({ audioDeviceName, onChange }) {
   const [devices, setDevices] = useState(initdevices);
   const devicesInitialized = devices.size > 0;
 
   const setAudioDevice = useCallback(async (id) => {
-    const audioCtx = getAudioContext();
-    await audioCtx.setSinkId(id);
+    const isValidID = (id ?? '').length > 0;
+    // reset the audio context and dont set the sink id if it is invalid AKA System Standard selection
+    const audioCtx = getAudioContext(!isValidID);
+    if (isValidID) {
+      await audioCtx.setSinkId(id);
+    }
     initializeAudioOutput();
   });
   const initializedevices = useCallback(async () => {
@@ -18,6 +23,7 @@ export function AudioDeviceSelector({ audioDeviceName, onChange }) {
     let mediaDevices = await navigator.mediaDevices.enumerateDevices();
     mediaDevices = mediaDevices.filter((device) => device.kind === 'audiooutput' && device.deviceId !== 'default');
     const devicesMap = new Map();
+    devicesMap.set(defaultDeviceName, '');
     mediaDevices.forEach((device) => {
       devicesMap.set(device.label, device.deviceId);
     });
@@ -33,7 +39,7 @@ export function AudioDeviceSelector({ audioDeviceName, onChange }) {
     initializedevices().then((devices) => {
       const deviceID = devices.get(audioDeviceName);
       if (deviceID == null) {
-        onChange('');
+        onChange(defaultDeviceName);
         return;
       }
       setAudioDevice(deviceID);
@@ -52,7 +58,7 @@ export function AudioDeviceSelector({ audioDeviceName, onChange }) {
     }
     const deviceID = devices.get(deviceName);
     onChange(deviceName);
-    deviceID && setAudioDevice(deviceID);
+    setAudioDevice(deviceID);
   };
   const options = new Map();
   Array.from(devices.keys()).forEach((deviceName) => {
@@ -62,7 +68,7 @@ export function AudioDeviceSelector({ audioDeviceName, onChange }) {
     <SelectInput
       options={options}
       onClick={onClick}
-      placeholder="System Standard"
+      placeholder={defaultDeviceName}
       value={audioDeviceName}
       onChange={onDeviceChange}
     />