working

website/src/repl/panel/AudioDeviceSelector.jsx

@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from 'react';
+import { getAudioContext, initializeAudioOutput } from '@strudel.cycles/webaudio';
+import { SelectInput } from './SelectInput';
+
+async function setAudioDevice(id) {
+  const audioCtx = getAudioContext();
+  await audioCtx.setSinkId(id);
+  await initializeAudioOutput();
+}
+export function AudioDeviceSelector({ audioDeviceName, onChange }) {
+  const [options, setOptions] = useState({});
+  const [optionsInitialized, setOptionsInitialized] = useState(false);
+
+  async function initializeOptions() {
+    await navigator.mediaDevices.getUserMedia({ audio: true });
+    let devices = await navigator.mediaDevices.enumerateDevices();
+    devices = devices.filter((device) => device.kind === 'audiooutput' && device.deviceId !== 'default');
+    const optionsArray = [];
+    devices.forEach((device) => {
+      optionsArray.push([device.deviceId, device.label]);
+    });
+    const options = Object.fromEntries(optionsArray);
+    setOptions(options);
+    setOptionsInitialized(true);
+    return options;
+  }
+
+  useEffect(() => {
+    if (!audioDeviceName.length || optionsInitialized) {
+      return;
+    }
+
+    (async () => {
+      const options = await initializeOptions();
+
+      const deviceID = Object.keys(options).find((id) => options[id] === audioDeviceName);
+
+      if (deviceID == null) {
+        onChange('');
+        return;
+      }
+
+      await setAudioDevice(deviceID);
+    })();
+  }, []);
+
+  const onClick = () => {
+    if (optionsInitialized) {
+      return;
+    }
+    (async () => {
+      await initializeOptions();
+    })();
+  };
+  const onDeviceChange = (deviceID) => {
+    (async () => {
+      const deviceName = options[deviceID];
+      onChange(deviceName);
+      await setAudioDevice(deviceID);
+    })();
+  };
+  return (
+    <SelectInput
+      options={options}
+      onClick={onClick}
+      value={Object.keys(options).find((id) => options[id] === audioDeviceName)}
+      onChange={onDeviceChange}
+    />
+  );
+}

website/src/repl/panel/SelectInput.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export function SelectInput({ value, options, onChange }) {
+  return (
+    <select
+      className="p-2 bg-background rounded-md text-foreground"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+    >
+      {Object.entries(options).map(([k, label]) => (
+        <option key={k} className="bg-background" value={k}>
+          {label}
+        </option>
+      ))}
+    </select>
+  );
+}

website/src/repl/panel/SettingsTab.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { defaultSettings, settingsMap, useSettings } from '../../settings.mjs';
 import { themes } from '../themes.mjs';
 import { ButtonGroup } from './Forms.jsx';
+import { AudioDeviceSelector } from './AudioDeviceSelector.jsx';
 
 function Checkbox({ label, value, onChange }) {
   return (
@@ -85,6 +86,7 @@ export function SettingsTab() {
     fontSize,
     fontFamily,
     panelPosition,
+    audioDeviceName,
   } = useSettings();
 
   return (
@@ -107,6 +109,12 @@ export function SettingsTab() {
           </button>
         </div>
       </FormItem> */}
+      <FormItem label="Audio Device">
+        <AudioDeviceSelector
+          audioDeviceName={audioDeviceName}
+          onChange={(audioDeviceName) => settingsMap.setKey('audioDeviceName', audioDeviceName)}
+        />
+      </FormItem>
       <FormItem label="Theme">
         <SelectInput options={themeOptions} value={theme} onChange={(theme) => settingsMap.setKey('theme', theme)} />
       </FormItem>

website/src/settings.mjs

@@ -20,6 +20,7 @@ export const defaultSettings = {
   panelPosition: 'bottom',
   userPatterns: '{}',
   activePattern: '',
+  audioDeviceName: '',
 };
 
 export const settingsMap = persistentMap('strudel-settings', defaultSettings);