diff --git a/packages/superdough/superdough.mjs b/packages/superdough/superdough.mjs
index d5c1af66..8b152a43 100644
--- a/packages/superdough/superdough.mjs
+++ b/packages/superdough/superdough.mjs
@@ -28,8 +28,8 @@ export const resetLoadedSounds = () => soundMap.set({});
let audioContext;
-export const getAudioContext = () => {
- if (!audioContext) {
+export const getAudioContext = (reset) => {
+ if (!audioContext || reset) {
audioContext = new AudioContext();
}
return audioContext;
diff --git a/website/src/repl/panel/AudioDeviceSelector.jsx b/website/src/repl/panel/AudioDeviceSelector.jsx
index 6673a5d8..603c4537 100644
--- a/website/src/repl/panel/AudioDeviceSelector.jsx
+++ b/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 }) {
diff --git a/website/src/repl/panel/SelectInput.jsx b/website/src/repl/panel/SelectInput.jsx
index 78269fad..3c3fb84e 100644
--- a/website/src/repl/panel/SelectInput.jsx
+++ b/website/src/repl/panel/SelectInput.jsx
@@ -1,6 +1,6 @@
import React from 'react';
// value: ?ID, options: Map, onChange: ID => null, onClick: event => void, placeholder?: string
-export function SelectInput({ value, options, onChange, onClick, placeholder }) {
+export function SelectInput({ value, options, onChange, onClick }) {
return (