select audio device

src/app.tsx

@@ -43,6 +43,7 @@ export interface ChatStore {
   develop_mode: boolean;
   whisper_api: string;
   whisper_key: string;
+  audioDeviceID: string;
 }
 
 const _defaultAPIEndpoint = "https://api.openai.com/v1/chat/completions";
@@ -80,6 +81,7 @@ const newChatStore = (
     develop_mode: getDefaultParams("dev", dev),
     whisper_api: getDefaultParams("whisper-api", whisper_api),
     whisper_key: getDefaultParams("whisper-key", whisper_key),
+    audioDeviceID: "",
   };
 };
 

src/settings.tsx

@@ -249,6 +249,8 @@ export default (props: {
   const [totalCost, setTotalCost] = useState(getTotalCost());
   // @ts-ignore
   const { langCode, setLangCode } = useContext(langCodeContext);
+  // type is MediaDeviceInfo
+  const [devices, setDevices] = useState([] as MediaDeviceInfo[]);
 
   useEffect(() => {
     const handleKeyPress = (event: any) => {
@@ -409,6 +411,52 @@ export default (props: {
             help="用于 Whisper 服务的 key，默认为 上方使用的OPENAI key，可在此单独配置专用key"
             {...props}
           />
+
+          <p className="flex justify-between">
+            <label className="m-2 p-2">{Tr("Audio Device")}</label>
+            {devices.length === 0 && (
+              <button
+                className="p-2 m-2 rounded bg-emerald-500"
+                onClick={async () => {
+                  const ds: MediaDeviceInfo[] = (
+                    await navigator.mediaDevices.enumerateDevices()
+                  ).filter((device) => device.kind === "audioinput");
+
+                  setDevices([...ds]);
+                  console.log("devices", ds);
+                }}
+              >
+                {props.chatStore.audioDeviceID
+                  ? props.chatStore.audioDeviceID
+                  : Tr("default")}
+              </button>
+            )}
+            {devices.length > 0 && (
+              <select
+                value={
+                  props.chatStore.audioDeviceID
+                    ? props.chatStore.audioDeviceID
+                    : "default"
+                }
+                onChange={(event: any) => {
+                  const value = event.target.value;
+                  if (!value || value == "default") {
+                    props.chatStore.audioDeviceID = "";
+                    props.setChatStore({ ...props.chatStore });
+                    return;
+                  }
+                  props.chatStore.audioDeviceID = value;
+                  props.setChatStore({ ...props.chatStore });
+                }}
+              >
+                <option value={"default"}>{Tr("default")}</option>
+                {devices.map((device) => (
+                  <option value={device.deviceId}>{device.deviceId}</option>
+                ))}
+              </select>
+            )}
+          </p>
+
           <div className="flex justify-between">
             <p className="m-2 p-2">
               {Tr("Accumulated cost in all sessions")} ${totalCost.toFixed(4)}