Add microphone noise suppression options

electron/electron-env.d.ts

@@ -880,6 +880,7 @@ interface Window {
 			success: boolean;
 			microphoneEnabled: boolean;
 			microphoneDeviceId?: string;
+			noiseSuppressionMode?: string;
 			systemAudioEnabled: boolean;
 		}>;
 		getRecordingAudioLabConfig: () => Promise<{
@@ -889,6 +890,7 @@ interface Window {
 		setRecordingPreferences: (prefs: {
 			microphoneEnabled?: boolean;
 			microphoneDeviceId?: string;
+			noiseSuppressionMode?: string;
 			systemAudioEnabled?: boolean;
 		}) => Promise<{ success: boolean; error?: string }>;
 		/** Countdown timer before recording */

electron/ipc/register/settings.ts

@@ -153,13 +153,18 @@ export function registerSettingsHandlers() {
 					typeof parsed.microphoneDeviceId === "string"
 						? parsed.microphoneDeviceId
 						: undefined,
+				noiseSuppressionMode:
+					typeof parsed.noiseSuppressionMode === "string"
+						? parsed.noiseSuppressionMode
+						: "rnnoise",
 				systemAudioEnabled: parsed.systemAudioEnabled === true,
 			};
 		} catch {
 			return {
 				success: true,
 				microphoneEnabled: false,
 				microphoneDeviceId: undefined,
+				noiseSuppressionMode: "rnnoise",
 				systemAudioEnabled: false,
 			};
 		}
@@ -176,6 +181,7 @@ export function registerSettingsHandlers() {
 			prefs: {
 				microphoneEnabled?: boolean;
 				microphoneDeviceId?: string;
+				noiseSuppressionMode?: string;
 				systemAudioEnabled?: boolean;
 			},
 		) => {

electron/preload.ts

@@ -971,6 +971,7 @@ contextBridge.exposeInMainWorld("electronAPI", {
 	setRecordingPreferences: (prefs: {
 		microphoneEnabled?: boolean;
 		microphoneDeviceId?: string;
+		noiseSuppressionMode?: string;
 		systemAudioEnabled?: boolean;
 	}) => ipcRenderer.invoke("set-recording-preferences", prefs),
 	getCountdownDelay: () => ipcRenderer.invoke("get-countdown-delay"),

package.json

@@ -46,6 +46,8 @@
 	},
 	"dependencies": {
 		"@phosphor-icons/react": "^2.1.10",
+		"@sapphi-red/speex-preprocess-wasm": "^0.4.0",
+		"@shiguredo/rnnoise-wasm": "^2025.1.5",
 		"capturekit": "^1.0.13",
 		"electron-updater": "^6.8.3",
 		"ffmpeg-static": "^5.3.0",

src/components/launch/LaunchWindow.tsx

@@ -69,6 +69,8 @@ function LaunchWindowContent() {
 		setMicrophoneEnabled,
 		microphoneDeviceId,
 		setMicrophoneDeviceId,
+		noiseSuppressionMode,
+		setNoiseSuppressionMode,
 		systemAudioEnabled,
 		setSystemAudioEnabled,
 		webcamEnabled,
@@ -262,6 +264,8 @@ function LaunchWindowContent() {
 				devices={devices}
 				microphoneDeviceId={microphoneDeviceId}
 				selectedDeviceId={selectedDeviceId}
+				noiseSuppressionMode={noiseSuppressionMode}
+				onSelectNoiseSuppressionMode={setNoiseSuppressionMode}
 				onSelectDevice={(deviceId) => {
 					setMicrophoneEnabled(true);
 					setSelectedDeviceId(deviceId);

src/components/launch/popovers/MicPopover.tsx

@@ -1,10 +1,17 @@
-import { MicrophoneSlashIcon, SpeakerHighIcon, SpeakerXIcon } from "@phosphor-icons/react";
+import {
+	CheckCircleIcon,
+	MicrophoneIcon,
+	MicrophoneSlashIcon,
+	SpeakerHighIcon,
+	SpeakerXIcon,
+} from "@phosphor-icons/react";
+import type { ReactElement } from "react";
 import { useScopedT } from "@/contexts/I18nContext";
-import { DropdownItem, HudPopover, MicDeviceRow } from "./PopoverScaffold";
+import type { NoiseSuppressionMode } from "@/lib/audio/noiseSuppression";
+import styles from "../LaunchWindow.module.css";
 import { useLaunchPopoverCoordinator } from "./LaunchPopoverCoordinator";
 import type { DeviceOption } from "./launchPopoverTypes";
-import type { ReactElement } from "react";
-import styles from "../LaunchWindow.module.css";
+import { DropdownItem, HudPopover, MicDeviceRow } from "./PopoverScaffold";
 
 const POPOVER_ID = "mic";
 
@@ -19,6 +26,8 @@ export function MicPopover({
 	microphoneDeviceId,
 	selectedDeviceId,
 	onSelectDevice,
+	noiseSuppressionMode,
+	onSelectNoiseSuppressionMode,
 }: {
 	trigger: ReactElement;
 	disabled?: boolean;
@@ -30,6 +39,8 @@ export function MicPopover({
 	microphoneDeviceId?: string;
 	selectedDeviceId?: string;
 	onSelectDevice: (deviceId: string) => void;
+	noiseSuppressionMode: NoiseSuppressionMode;
+	onSelectNoiseSuppressionMode: (mode: NoiseSuppressionMode) => void;
 }) {
 	const t = useScopedT("launch");
 	const { isOpen, requestOpen, requestClose } = useLaunchPopoverCoordinator();
@@ -53,7 +64,9 @@ export function MicPopover({
 		>
 			<div className={styles.ddLabel}>{t("recording.microphone")}</div>
 			<DropdownItem
-				icon={systemAudioEnabled ? <SpeakerHighIcon size={16} /> : <SpeakerXIcon size={16} />}
+				icon={
+					systemAudioEnabled ? <SpeakerHighIcon size={16} /> : <SpeakerXIcon size={16} />
+				}
 				selected={systemAudioEnabled}
 				onClick={onToggleSystemAudio}
 			>
@@ -73,22 +86,82 @@ export function MicPopover({
 				</DropdownItem>
 			)}
 			{!microphoneEnabled && (
-				<div className="px-3 py-2 text-xs text-[var(--launch-text-muted)]">{t("recording.selectMicToEnable")}</div>
+				<div className="px-3 py-2 text-xs text-[var(--launch-text-muted)]">
+					{t("recording.selectMicToEnable")}
+				</div>
 			)}
 			{devices.map((device) => (
 				<MicDeviceRow
 					key={device.deviceId}
 					device={device}
 					selected={
 						microphoneEnabled &&
-						(microphoneDeviceId === device.deviceId || selectedDeviceId === device.deviceId)
+						(microphoneDeviceId === device.deviceId ||
+							selectedDeviceId === device.deviceId)
 					}
 					onSelect={() => onSelectDevice(device.deviceId)}
 				/>
 			))}
 			{devices.length === 0 && (
-				<div className="text-center text-xs text-[var(--launch-text-muted)] py-4">{t("recording.noMicrophonesFound")}</div>
+				<div className="text-center text-xs text-[var(--launch-text-muted)] py-4">
+					{t("recording.noMicrophonesFound")}
+				</div>
 			)}
+			<div className={styles.ddLabel}>{t("recording.noiseSuppression")}</div>
+			<NoiseSuppressionOption
+				mode="rnnoise"
+				selectedMode={noiseSuppressionMode}
+				label={t("recording.noiseSuppressionRnnoise")}
+				description={t("recording.noiseSuppressionRnnoiseDescription")}
+				onSelect={onSelectNoiseSuppressionMode}
+			/>
+			<NoiseSuppressionOption
+				mode="speex"
+				selectedMode={noiseSuppressionMode}
+				label={t("recording.noiseSuppressionSpeex")}
+				description={t("recording.noiseSuppressionSpeexDescription")}
+				onSelect={onSelectNoiseSuppressionMode}
+			/>
+			<NoiseSuppressionOption
+				mode="disabled"
+				selectedMode={noiseSuppressionMode}
+				label={t("recording.noiseSuppressionDisabled")}
+				description={t("recording.noiseSuppressionDisabledDescription")}
+				onSelect={onSelectNoiseSuppressionMode}
+			/>
 		</HudPopover>
 	);
 }
+
+function NoiseSuppressionOption({
+	mode,
+	selectedMode,
+	label,
+	description,
+	onSelect,
+}: {
+	mode: NoiseSuppressionMode;
+	selectedMode: NoiseSuppressionMode;
+	label: string;
+	description: string;
+	onSelect: (mode: NoiseSuppressionMode) => void;
+}) {
+	const selected = mode === selectedMode;
+	return (
+		<button
+			type="button"
+			className={`${styles.ddItem} ${selected ? styles.ddItemSelected : ""} items-start`}
+			onClick={() => onSelect(mode)}
+		>
+			<span className="shrink-0 mt-0.5">
+				{selected ? <CheckCircleIcon size={16} /> : <MicrophoneIcon size={16} />}
+			</span>
+			<span className="min-w-0 flex-1 text-left">
+				<span className="block truncate">{label}</span>
+				<span className="block whitespace-normal text-[11px] leading-4 text-[var(--launch-text-muted)]">
+					{description}
+				</span>
+			</span>
+		</button>
+	);
+}