prevent selection while playing to avoid artifacts

packages/superdough/superdough.mjs

@@ -28,9 +28,13 @@ export const resetLoadedSounds = () => soundMap.set({});
 
 let audioContext;
 
-export const getAudioContext = (reset) => {
-  if (!audioContext || reset) {
-    audioContext = new AudioContext();
+export const setDefaultAudioContext = () => {
+  audioContext = new AudioContext();
+};
+
+export const getAudioContext = () => {
+  if (!audioContext) {
+    setDefaultAudioContext();
   }
   return audioContext;
 };

website/src/repl/panel/AudioDeviceSelector.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { getAudioContext, initializeAudioOutput } from '@strudel.cycles/webaudio';
+import { getAudioContext, initializeAudioOutput, setDefaultAudioContext } from '@strudel.cycles/webaudio';
 import { SelectInput } from './SelectInput';
 import { logger } from '@strudel.cycles/core';
 
@@ -19,21 +19,27 @@ export const getAudioDevices = async () => {
 };
 
 export const setAudioDevice = async (id) => {
+  const audioCtx = getAudioContext();
+  if (audioCtx.sinkId === id) {
+    console.log(audioCtx.sinkId, id);
+    return;
+  }
   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) {
     try {
       await audioCtx.setSinkId(id);
     } catch {
       logger('failed to set audio interface', 'warning');
     }
+  } else {
+    // reset the audio context and dont set the sink id if it is invalid AKA System Standard selection
+    setDefaultAudioContext();
   }
   initializeAudioOutput();
 };
 
 // Allows the user to select an audio interface for Strudel to play through
-export function AudioDeviceSelector({ audioDeviceName, onChange }) {
+export function AudioDeviceSelector({ audioDeviceName, onChange, isDisabled }) {
   const [devices, setDevices] = useState(initdevices);
   const devicesInitialized = devices.size > 0;
 
@@ -57,5 +63,13 @@ export function AudioDeviceSelector({ audioDeviceName, onChange }) {
   Array.from(devices.keys()).forEach((deviceName) => {
     options.set(deviceName, deviceName);
   });
-  return <SelectInput options={options} onClick={onClick} value={audioDeviceName} onChange={onDeviceChange} />;
+  return (
+    <SelectInput
+      isDisabled={isDisabled}
+      options={options}
+      onClick={onClick}
+      value={audioDeviceName}
+      onChange={onDeviceChange}
+    />
+  );
 }

website/src/repl/panel/Panel.jsx

@@ -114,7 +114,7 @@ export function Panel({ context }) {
             {activeFooter === 'console' && <ConsoleTab log={log} />}
             {activeFooter === 'sounds' && <SoundsTab />}
             {activeFooter === 'reference' && <Reference />}
-            {activeFooter === 'settings' && <SettingsTab />}
+            {activeFooter === 'settings' && <SettingsTab started={context.started} />}
             {activeFooter === 'files' && <FilesTab />}
           </div>
         </div>

website/src/repl/panel/SelectInput.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
-//      value: ?ID, options: Map<ID, any>, onChange: ID => null, onClick: event => void
-export function SelectInput({ value, options, onChange, onClick }) {
+//      value: ?ID, options: Map<ID, any>, onChange: ID => null, onClick: event => void, isDisabled: boolean
+export function SelectInput({ value, options, onChange, onClick, isDisabled }) {
   return (
     <select
+      disabled={isDisabled}
       onClick={onClick}
       className="p-2 bg-background rounded-md text-foreground"
       value={value ?? ''}

website/src/repl/panel/SettingsTab.jsx

@@ -73,7 +73,7 @@ const fontFamilyOptions = {
   mode7: 'mode7',
 };
 
-export function SettingsTab() {
+export function SettingsTab({ started }) {
   const {
     theme,
     keybindings,
@@ -95,6 +95,7 @@ export function SettingsTab() {
       {AudioContext.prototype.setSinkId != null && (
         <FormItem label="Audio Output Device">
           <AudioDeviceSelector
+            isDisabled={started}
             audioDeviceName={audioDeviceName}
             onChange={(audioDeviceName) => settingsMap.setKey('audioDeviceName', audioDeviceName)}
           />