feat: add mic test page

messages/cs.json

@@ -102,5 +102,40 @@
 	"signalGen_stop": "Stop",
 	"signalGen_scope": "Osciloskop",
 	"signalGen_spectrum": "Spektrum",
-	"signalGen_loop": "Smyčka"
+	"signalGen_loop": "Smyčka",
+	"mic_title": "Test mikrofonu",
+	"mic_startMicrophone": "Spustit mikrofon",
+	"mic_stop": "Zastavit",
+	"mic_monitoringOn": "Monitorování: ZAP",
+	"mic_monitoringOff": "Monitorování: VYP",
+	"mic_gain": "Zesílení",
+	"mic_monitorDelay": "Zpoždění monitoru",
+	"mic_sampleRate": "Vzorkovací frekvence",
+	"mic_inputDevice": "Vstupní zařízení",
+	"mic_volume": "Hlasitost",
+	"mic_recording": "Nahrávání",
+	"mic_startRecording": "Spustit nahrávání",
+	"mic_stopRecording": "Zastavit nahrávání",
+	"mic_downloadRecording": "Stáhnout nahrávku",
+	"mic_device": "Zařízení",
+	"mic_noMicFound": "Nenalezen žádný mikrofon",
+	"mic_refresh": "Obnovit",
+	"mic_clipping": "Ořezávání",
+	"mic_constraints": "Omezení",
+	"mic_echoCancellation": "Potlačení ozvěny",
+	"mic_noiseSuppression": "Potlačení šumu",
+	"mic_agc": "Automatické řízení zisku",
+	"mic_applyConstraints": "Použít",
+	"mic_channels": "Kanály",
+	"mic_stereo": "Stereo",
+	"mic_requested": "Požadováno",
+	"mic_obtained": "Získáno",
+	"mic_peakNow": "Špička",
+	"mic_peakHold": "Držení špičky",
+	"mic_resetPeaks": "Resetovat špičky",
+	"mic_advanced": "Pokročilé",
+	"mic_default": "Výchozí",
+	"mic_on": "Zapnuto",
+	"mic_off": "Vypnuto",
+	"mic_mono": "Mono"
 }

messages/de.json

@@ -102,5 +102,40 @@
 	"signalGen_stop": "Stopp",
 	"signalGen_scope": "Oszilloskop",
 	"signalGen_spectrum": "Spektrum",
-	"signalGen_loop": "Schleife"
+	"signalGen_loop": "Schleife",
+	"mic_title": "Mikrofontest",
+	"mic_startMicrophone": "Mikrofon starten",
+	"mic_stop": "Stopp",
+	"mic_monitoringOn": "Monitoring: EIN",
+	"mic_monitoringOff": "Monitoring: AUS",
+	"mic_gain": "Verstärkung",
+	"mic_monitorDelay": "Monitor-Verzögerung",
+	"mic_sampleRate": "Abtastrate",
+	"mic_inputDevice": "Eingabegerät",
+	"mic_volume": "Lautstärke",
+	"mic_recording": "Aufnahme",
+	"mic_startRecording": "Aufnahme starten",
+	"mic_stopRecording": "Aufnahme stoppen",
+	"mic_downloadRecording": "Aufnahme herunterladen",
+	"mic_device": "Gerät",
+	"mic_noMicFound": "Kein Mikrofon gefunden",
+	"mic_refresh": "Aktualisieren",
+	"mic_clipping": "Übersteuerung",
+	"mic_constraints": "Einschränkungen",
+	"mic_echoCancellation": "Echounterdrückung",
+	"mic_noiseSuppression": "Rauschunterdrückung",
+	"mic_agc": "Automatische Verstärkungsregelung",
+	"mic_applyConstraints": "Anwenden",
+	"mic_channels": "Kanäle",
+	"mic_stereo": "Stereo",
+	"mic_requested": "Angefordert",
+	"mic_obtained": "Erhalten",
+	"mic_peakNow": "Spitze",
+	"mic_peakHold": "Spitze halten",
+	"mic_resetPeaks": "Spitzen zurücksetzen",
+	"mic_advanced": "Erweitert",
+	"mic_default": "Standard",
+	"mic_on": "Ein",
+	"mic_off": "Aus",
+	"mic_mono": "Mono"
 }

messages/en.json

@@ -102,5 +102,40 @@
 	"signalGen_stop": "Stop",
 	"signalGen_scope": "Oscilloscope",
 	"signalGen_spectrum": "Spectrum",
-	"signalGen_loop": "Loop"
+	"signalGen_loop": "Loop",
+	"mic_title": "Microphone test",
+	"mic_startMicrophone": "Start microphone",
+	"mic_stop": "Stop",
+	"mic_monitoringOn": "Monitoring: ON",
+	"mic_monitoringOff": "Monitoring: OFF",
+	"mic_gain": "Gain",
+	"mic_monitorDelay": "Monitor delay",
+	"mic_sampleRate": "Sample rate",
+	"mic_inputDevice": "Input",
+	"mic_volume": "Volume",
+	"mic_recording": "Recording",
+	"mic_startRecording": "Start recording",
+	"mic_stopRecording": "Stop recording",
+	"mic_downloadRecording": "Download",
+	"mic_device": "Device",
+	"mic_noMicFound": "No microphone found",
+	"mic_refresh": "Refresh",
+	"mic_clipping": "Clipping",
+	"mic_constraints": "Constraints",
+	"mic_echoCancellation": "Echo cancellation",
+	"mic_noiseSuppression": "Noise suppression",
+	"mic_agc": "Auto gain control",
+	"mic_applyConstraints": "Apply",
+	"mic_channels": "Channels",
+	"mic_stereo": "Stereo",
+	"mic_requested": "Requested",
+	"mic_obtained": "Obtained",
+	"mic_peakNow": "Peak",
+	"mic_peakHold": "Peak hold",
+	"mic_resetPeaks": "Reset peaks",
+	"mic_advanced": "Advanced",
+	"mic_default": "Default",
+	"mic_on": "On",
+	"mic_off": "Off",
+	"mic_mono": "Mono"
 }

messages/es.json

@@ -102,5 +102,40 @@
 	"signalGen_stop": "Detener",
 	"signalGen_scope": "Osciloscopio",
 	"signalGen_spectrum": "Espectro",
-	"signalGen_loop": "Bucle"
+	"signalGen_loop": "Bucle",
+	"mic_title": "Prueba de micrófono",
+	"mic_startMicrophone": "Iniciar micrófono",
+	"mic_stop": "Detener",
+	"mic_monitoringOn": "Monitorización: ON",
+	"mic_monitoringOff": "Monitorización: OFF",
+	"mic_gain": "Ganancia",
+	"mic_monitorDelay": "Retraso del monitor",
+	"mic_sampleRate": "Tasa de muestreo",
+	"mic_inputDevice": "Dispositivo de entrada",
+	"mic_volume": "Volumen",
+	"mic_recording": "Grabación",
+	"mic_startRecording": "Iniciar grabación",
+	"mic_stopRecording": "Detener grabación",
+	"mic_downloadRecording": "Descargar grabación",
+	"mic_device": "Dispositivo",
+	"mic_noMicFound": "No se encontró ningún micrófono",
+	"mic_refresh": "Actualizar",
+	"mic_clipping": "Recorte",
+	"mic_constraints": "Restricciones",
+	"mic_echoCancellation": "Cancelación de eco",
+	"mic_noiseSuppression": "Supresión de ruido",
+	"mic_agc": "Control automático de ganancia",
+	"mic_applyConstraints": "Aplicar",
+	"mic_channels": "Canales",
+	"mic_stereo": "Estéreo",
+	"mic_requested": "Solicitado",
+	"mic_obtained": "Obtenido",
+	"mic_peakNow": "Pico",
+	"mic_peakHold": "Mantener pico",
+	"mic_resetPeaks": "Restablecer picos",
+	"mic_advanced": "Avanzado",
+	"mic_default": "Predeterminado",
+	"mic_on": "Encendido",
+	"mic_off": "Apagado",
+	"mic_mono": "Mono"
 }

messages/fr.json

@@ -102,5 +102,40 @@
 	"signalGen_stop": "Arrêter",
 	"signalGen_scope": "Oscilloscope",
 	"signalGen_spectrum": "Spectre",
-	"signalGen_loop": "Boucle"
+	"signalGen_loop": "Boucle",
+	"mic_title": "Test du microphone",
+	"mic_startMicrophone": "Démarrer le microphone",
+	"mic_stop": "Arrêter",
+	"mic_monitoringOn": "Monitoring : ON",
+	"mic_monitoringOff": "Monitoring : OFF",
+	"mic_gain": "Gain",
+	"mic_monitorDelay": "Délai du moniteur",
+	"mic_sampleRate": "Taux d'échantillonnage",
+	"mic_inputDevice": "Périphérique d'entrée",
+	"mic_volume": "Volume",
+	"mic_recording": "Enregistrement",
+	"mic_startRecording": "Démarrer l'enregistrement",
+	"mic_stopRecording": "Arrêter l'enregistrement",
+	"mic_downloadRecording": "Télécharger l'enregistrement",
+	"mic_device": "Appareil",
+	"mic_noMicFound": "Aucun microphone trouvé",
+	"mic_refresh": "Actualiser",
+	"mic_clipping": "Écrêtage",
+	"mic_constraints": "Contraintes",
+	"mic_echoCancellation": "Annulation de l'écho",
+	"mic_noiseSuppression": "Suppression du bruit",
+	"mic_agc": "Contrôle automatique du gain",
+	"mic_applyConstraints": "Appliquer",
+	"mic_channels": "Canaux",
+	"mic_stereo": "Stéréo",
+	"mic_requested": "Demandé",
+	"mic_obtained": "Obtenu",
+	"mic_peakNow": "Pic",
+	"mic_peakHold": "Maintien du pic",
+	"mic_resetPeaks": "Réinitialiser les pics",
+	"mic_advanced": "Avancé",
+	"mic_default": "Défaut",
+	"mic_on": "Activé",
+	"mic_off": "Désactivé",
+	"mic_mono": "Mono"
 }

messages/ja.json

@@ -102,5 +102,40 @@
 	"signalGen_stop": "停止",
 	"signalGen_scope": "オシロスコープ",
 	"signalGen_spectrum": "スペクトラム",
-	"signalGen_loop": "ループ"
+	"signalGen_loop": "ループ",
+	"mic_title": "マイクテスト",
+	"mic_startMicrophone": "マイクを開始",
+	"mic_stop": "停止",
+	"mic_monitoringOn": "モニタリング：オン",
+	"mic_monitoringOff": "モニタリング：オフ",
+	"mic_gain": "ゲイン",
+	"mic_monitorDelay": "モニター遅延",
+	"mic_sampleRate": "サンプルレート",
+	"mic_inputDevice": "入力デバイス",
+	"mic_volume": "音量",
+	"mic_recording": "録音",
+	"mic_startRecording": "録音を開始",
+	"mic_stopRecording": "録音を停止",
+	"mic_downloadRecording": "録音をダウンロード",
+	"mic_device": "デバイス",
+	"mic_noMicFound": "マイクが見つかりません",
+	"mic_refresh": "更新",
+	"mic_clipping": "クリッピング",
+	"mic_constraints": "制約",
+	"mic_echoCancellation": "エコーキャンセル",
+	"mic_noiseSuppression": "ノイズ抑制",
+	"mic_agc": "自動ゲインコントロール",
+	"mic_applyConstraints": "適用",
+	"mic_channels": "チャンネル",
+	"mic_stereo": "ステレオ",
+	"mic_requested": "要求",
+	"mic_obtained": "取得",
+	"mic_peakNow": "ピーク",
+	"mic_peakHold": "ピークホールド",
+	"mic_resetPeaks": "ピークをリセット",
+	"mic_advanced": "詳細",
+	"mic_default": "デフォルト",
+	"mic_on": "オン",
+	"mic_off": "オフ",
+	"mic_mono": "モノラル"
 }

messages/ukr.json

@@ -102,5 +102,40 @@
 	"signalGen_stop": "Стоп",
 	"signalGen_scope": "Осцилограф",
 	"signalGen_spectrum": "Спектр",
-	"signalGen_loop": "Цикл"
+	"signalGen_loop": "Цикл",
+	"mic_title": "Тест мікрофона",
+	"mic_startMicrophone": "Почати мікрофон",
+	"mic_stop": "Зупинити",
+	"mic_monitoringOn": "Моніторинг: УВІМК",
+	"mic_monitoringOff": "Моніторинг: ВИМК",
+	"mic_gain": "Посилення",
+	"mic_monitorDelay": "Затримка монітора",
+	"mic_sampleRate": "Частота дискретизації",
+	"mic_inputDevice": "Пристрій введення",
+	"mic_volume": "Гучність",
+	"mic_recording": "Запис",
+	"mic_startRecording": "Почати запис",
+	"mic_stopRecording": "Зупинити запис",
+	"mic_downloadRecording": "Завантажити запис",
+	"mic_device": "Пристрій",
+	"mic_noMicFound": "Мікрофон не знайдено",
+	"mic_refresh": "Оновити",
+	"mic_clipping": "Відсікання",
+	"mic_constraints": "Обмеження",
+	"mic_echoCancellation": "Скасування відлуння",
+	"mic_noiseSuppression": "Придушення шуму",
+	"mic_agc": "Автоматичне регулювання посилення",
+	"mic_applyConstraints": "Застосувати",
+	"mic_channels": "Канали",
+	"mic_stereo": "Стерео",
+	"mic_requested": "Запитано",
+	"mic_obtained": "Отримано",
+	"mic_peakNow": "Пік",
+	"mic_peakHold": "Утримання піку",
+	"mic_resetPeaks": "Скинути піки",
+	"mic_advanced": "Розширений",
+	"mic_default": "За замовчуванням",
+	"mic_on": "Увімкнено",
+	"mic_off": "Вимкнено",
+	"mic_mono": "Моно"
 }

messages/zh-CN.json

@@ -102,5 +102,40 @@
 	"signalGen_stop": "停止",
 	"signalGen_scope": "示波器",
 	"signalGen_spectrum": "频谱图",
-	"signalGen_loop": "循环"
+	"signalGen_loop": "循环",
+	"mic_title": "麦克风测试",
+	"mic_startMicrophone": "开始麦克风",
+	"mic_stop": "停止",
+	"mic_monitoringOn": "监听：开",
+	"mic_monitoringOff": "监听：关",
+	"mic_gain": "增益",
+	"mic_monitorDelay": "监听延迟",
+	"mic_sampleRate": "采样率",
+	"mic_inputDevice": "输入设备",
+	"mic_volume": "音量",
+	"mic_recording": "录音",
+	"mic_startRecording": "开始录音",
+	"mic_stopRecording": "停止录音",
+	"mic_downloadRecording": "下载录音",
+	"mic_device": "设备",
+	"mic_noMicFound": "未找到麦克风",
+	"mic_refresh": "刷新",
+	"mic_clipping": "削波",
+	"mic_constraints": "约束",
+	"mic_echoCancellation": "回声消除",
+	"mic_noiseSuppression": "噪声抑制",
+	"mic_agc": "自动增益控制",
+	"mic_applyConstraints": "应用",
+	"mic_channels": "声道",
+	"mic_stereo": "立体声",
+	"mic_requested": "已请求",
+	"mic_obtained": "已获取",
+	"mic_peakNow": "峰值",
+	"mic_peakHold": "峰值保持",
+	"mic_resetPeaks": "重置峰值",
+	"mic_advanced": "高级",
+	"mic_default": "默认",
+	"mic_on": "开",
+	"mic_off": "关",
+	"mic_mono": "单声道"
 }

src/routes/(pages)/+page.svelte

@@ -97,8 +97,7 @@
 		{
 			id: 'microphone',
 			icon: 'ti-microphone',
-			categories: ['inputs', 'audio'],
+			categories: ['inputs', 'audio']
-			disabled: true
 		},
 		{
 			id: 'sensors',

src/routes/(pages)/microphone/+page.svelte

@@ -0,0 +1,622 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Spectrum from '$lib/audio/Spectrum.svelte';
+	import Oscilloscope from '$lib/audio/Oscilloscope.svelte';
+	import { m } from '$lib/paraglide/messages';
+
+	// Mic / audio graph state
+	let audioCtx: AudioContext | null = null;
+	let mediaStream: MediaStream | null = null;
+	let source: MediaStreamAudioSourceNode | null = null;
+	let analyserTime: AnalyserNode | null = $state(null);
+	let analyserFreq: AnalyserNode | null = $state(null);
+	let monitorGain: GainNode | null = null;
+	let delayNode: DelayNode | null = null;
+
+	// UI state (Svelte 5 runes-style)
+	let micActive = $state(false);
+	let monitoring = $state(false);
+	let gain = $state(1.0);
+	let delayMs = $state(0);
+	let sampleRate = $state<number | null>(null);
+	let deviceLabel = $state<string>('');
+
+	// Volume meter (RMS 0..1)
+	let volume = $state(0);
+	let rafId: number | null = null;
+	// Peak metrics
+	let peak = $state(0); // instantaneous peak 0..1
+	let peakHold = $state(0); // hold 0..1
+	let peakHoldDecayPerSec = 0.5; // how fast the hold marker decays
+
+	// Recording
+	let recorder: MediaRecorder | null = null;
+	let isRecording = $state(false);
+	let recordedChunks: BlobPart[] = [];
+	let recordingUrl = $state<string | null>(null);
+
+	// Devices
+	let devices: MediaDeviceInfo[] = $state([]);
+	let selectedDeviceId: string | null = $state(null);
+
+	// Clipping indicator
+	let clipping = $state(false);
+	let lastClipTs = 0;
+
+	// Track settings and constraints
+	let channels = $state<number | null>(null);
+	let obtainedEchoCancellation = $state<boolean | null>(null);
+	let obtainedNoiseSuppression = $state<boolean | null>(null);
+	let obtainedAGC = $state<boolean | null>(null);
+
+	// Requested constraints (best-effort, tri-state: null=default, true, false)
+	let reqEchoCancellation = $state<boolean | null>(null);
+	let reqNoiseSuppression = $state<boolean | null>(null);
+	let reqAGC = $state<boolean | null>(null);
+
+	async function startMic() {
+		if (micActive) return;
+		try {
+			const audioConstraints: MediaTrackConstraints = selectedDeviceId
+				? { deviceId: { exact: selectedDeviceId } }
+				: {};
+			if (reqEchoCancellation !== null) audioConstraints.echoCancellation = reqEchoCancellation;
+			if (reqNoiseSuppression !== null) audioConstraints.noiseSuppression = reqNoiseSuppression;
+			if (reqAGC !== null) audioConstraints.autoGainControl = reqAGC;
+
+			const constraints: MediaStreamConstraints = {
+				audio: Object.keys(audioConstraints).length ? audioConstraints : true,
+				video: false
+			};
+			mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
+			deviceLabel = mediaStream.getAudioTracks()[0]?.label ?? '';
+
+			audioCtx = new AudioContext();
+			sampleRate = audioCtx.sampleRate;
+
+			source = audioCtx.createMediaStreamSource(mediaStream);
+			analyserTime = audioCtx.createAnalyser();
+			analyserFreq = audioCtx.createAnalyser();
+			monitorGain = audioCtx.createGain();
+			delayNode = audioCtx.createDelay(2.0); // up to 2 seconds
+
+			// Default params
+			analyserTime.fftSize = 2048;
+			analyserTime.smoothingTimeConstant = 0.2;
+			analyserFreq.fftSize = 2048;
+			analyserFreq.smoothingTimeConstant = 0.8;
+			monitorGain.gain.value = gain;
+			delayNode.delayTime.value = delayMs / 1000;
+
+			// Fan-out: source -> (analysers)
+			source.connect(analyserTime);
+			source.connect(analyserFreq);
+
+			// Monitoring path (initially disconnected; toggleMonitoring() handles it)
+			updateMonitoringGraph();
+
+			// Start volume meter loop
+			startVolumeLoop();
+			micActive = true;
+			// Update device list after permission to get labels
+			refreshDevices();
+
+			// Read obtained settings
+			const track = mediaStream.getAudioTracks()[0];
+			const s = track.getSettings?.() as MediaTrackSettings | undefined;
+			channels = s?.channelCount ?? null;
+			obtainedEchoCancellation = (s?.echoCancellation as boolean | undefined) ?? null;
+			obtainedNoiseSuppression = (s?.noiseSuppression as boolean | undefined) ?? null;
+			obtainedAGC = (s?.autoGainControl as boolean | undefined) ?? null;
+		} catch (err) {
+			console.error('Failed to start microphone', err);
+			stopMic();
+		}
+	}
+
+	async function refreshDevices() {
+		try {
+			const list = await navigator.mediaDevices.enumerateDevices();
+			devices = list.filter((d) => d.kind === 'audioinput');
+			if (devices.length > 0 && !selectedDeviceId) {
+				selectedDeviceId = devices[0].deviceId;
+			}
+		} catch (e) {
+			console.error('enumerateDevices failed', e);
+		}
+	}
+
+	function onDeviceChange(e: Event) {
+		selectedDeviceId = (e.target as HTMLSelectElement).value || null;
+		if (micActive) {
+			// Restart mic with the new device
+			const wasMonitoring = monitoring;
+			stopMic();
+			monitoring = wasMonitoring; // preserve desired state; will reconnect on start
+			startMic();
+		}
+	}
+
+	function updateMonitoringGraph() {
+		if (!audioCtx || !source || !monitorGain || !delayNode) return;
+
+		try {
+			// Always disconnect monitoring path before reconnecting to avoid duplicate connections
+			monitorGain.disconnect();
+			delayNode.disconnect();
+		} catch {}
+
+		if (monitoring) {
+			// source -> monitorGain -> delayNode -> destination
+			monitorGain.gain.value = gain;
+			delayNode.delayTime.value = delayMs / 1000;
+
+			source.connect(monitorGain);
+			monitorGain.connect(delayNode);
+			delayNode.connect(audioCtx.destination);
+		}
+	}
+
+	function startVolumeLoop() {
+		cancelVolumeLoop();
+		const buf = new Uint8Array(analyserTime?.fftSize ?? 2048);
+		const loop = () => {
+			if (analyserTime) {
+				analyserTime.getByteTimeDomainData(buf);
+				// Compute RMS
+				let sum = 0;
+				let pk = 0;
+				for (let i = 0; i < buf.length; i++) {
+					const v = (buf[i] - 128) / 128; // -1..1
+					sum += v * v;
+					const a = Math.abs(v);
+					if (a > pk) pk = a;
+				}
+				const rms = Math.sqrt(sum / buf.length);
+				volume = rms; // 0..1
+				peak = pk;
+				// Update hold
+				const dt = 1 / 60; // approx
+				peakHold = Math.max(pk, Math.max(0, peakHold - peakHoldDecayPerSec * dt));
+				// Clipping detection (very near full-scale)
+				const now = performance.now();
+				if (pk >= 0.985) {
+					clipping = true;
+					lastClipTs = now;
+				} else if (clipping && now - lastClipTs > 500) {
+					// Auto clear after 500ms without clipping
+					clipping = false;
+				}
+			}
+			rafId = requestAnimationFrame(loop);
+		};
+		rafId = requestAnimationFrame(loop);
+	}
+
+	function cancelVolumeLoop() {
+		if (rafId) cancelAnimationFrame(rafId);
+		rafId = null;
+	}
+
+	function stopMic() {
+		cancelVolumeLoop();
+		micActive = false;
+		monitoring = false;
+
+		try {
+			recorder?.state !== 'inactive' && recorder?.stop();
+		} catch {}
+		recorder = null;
+		isRecording = false;
+
+		try {
+			source?.disconnect();
+		} catch {}
+		try {
+			monitorGain?.disconnect();
+		} catch {}
+		try {
+			delayNode?.disconnect();
+		} catch {}
+
+		analyserTime = null;
+		analyserFreq = null;
+		monitorGain = null;
+		delayNode = null;
+		source = null;
+
+		if (audioCtx) {
+			audioCtx.close().catch(() => {});
+			audioCtx = null;
+		}
+
+		if (mediaStream) {
+			for (const t of mediaStream.getTracks()) t.stop();
+			mediaStream = null;
+		}
+		peak = 0;
+		peakHold = 0;
+		channels = null;
+		obtainedEchoCancellation = obtainedNoiseSuppression = obtainedAGC = null;
+	}
+
+	function toggleMonitoring() {
+		monitoring = !monitoring;
+		updateMonitoringGraph();
+	}
+
+	function onGainChange(e: Event) {
+		gain = Number((e.target as HTMLInputElement).value);
+		if (monitorGain) monitorGain.gain.value = gain;
+	}
+
+	function onDelayChange(e: Event) {
+		delayMs = Number((e.target as HTMLInputElement).value);
+		if (delayNode) delayNode.delayTime.value = delayMs / 1000;
+	}
+
+	// Recording via MediaRecorder on raw MediaStream
+	function startRecording() {
+		if (!mediaStream || isRecording) return;
+		try {
+			// If there's an old blob URL, release it
+			if (recordingUrl) {
+				URL.revokeObjectURL(recordingUrl);
+				recordingUrl = null;
+			}
+			recordedChunks = [];
+			recorder = new MediaRecorder(mediaStream);
+			recorder.ondataavailable = (ev) => {
+				if (ev.data && ev.data.size > 0) recordedChunks.push(ev.data);
+			};
+			recorder.onstop = () => {
+				const blob = new Blob(recordedChunks, { type: recorder?.mimeType || 'audio/webm' });
+				recordingUrl = URL.createObjectURL(blob);
+			};
+			recorder.start();
+			isRecording = true;
+		} catch (e) {
+			console.error('Unable to start recording', e);
+		}
+	}
+
+	function stopRecording() {
+		if (!recorder || recorder.state === 'inactive') return;
+		recorder.stop();
+		isRecording = false;
+	}
+
+	onMount(() => {
+		// Try to prefetch devices (may require prior permission for labels)
+		refreshDevices();
+		return () => {
+			stopMic();
+			if (recordingUrl) URL.revokeObjectURL(recordingUrl);
+		};
+	});
+</script>
+
+<article>
+	<h3>{m.mic_title()}</h3>
+
+	<section class="controls">
+		<div class="row">
+			<button class="button" onclick={startMic} disabled={micActive}
+				>{m.mic_startMicrophone()}</button
+			>
+			<button class="button stop" onclick={stopMic} disabled={!micActive}>{m.mic_stop()}</button>
+			<button
+				class="button"
+				onclick={toggleMonitoring}
+				disabled={!micActive}
+				aria-pressed={monitoring}
+			>
+				{monitoring ? m.mic_monitoringOn() : m.mic_monitoringOff()}
+			</button>
+		</div>
+
+		<div class="row inputs">
+			<label>
+				{m.mic_device()}
+				<select onchange={onDeviceChange} disabled={devices.length === 0}>
+					{#if devices.length === 0}
+						<option value="">{m.mic_noMicFound()}</option>
+					{:else}
+						{#each devices as d}
+							<option value={d.deviceId} selected={d.deviceId === selectedDeviceId}
+								>{d.label || m.mic_device()}</option
+							>
+						{/each}
+					{/if}
+				</select>
+			</label>
+			<button class="button" onclick={refreshDevices}>{m.mic_refresh()}</button>
+		</div>
+
+		<div class="row inputs">
+			<label>
+				{m.mic_gain()}
+				<input
+					type="range"
+					min="0"
+					max="2"
+					step="0.01"
+					value={gain}
+					oninput={onGainChange}
+					disabled={!micActive}
+				/>
+				<span class="value">{gain.toFixed(2)}x</span>
+			</label>
+			<label>
+				{m.mic_monitorDelay()}
+				<input
+					type="range"
+					min="0"
+					max="1000"
+					step="1"
+					value={delayMs}
+					oninput={onDelayChange}
+					disabled={!micActive}
+				/>
+				<span class="value">{delayMs} ms</span>
+			</label>
+		</div>
+
+		<details>
+			<summary>{m.mic_advanced()}</summary>
+			<div class="row inputs">
+				<div class="label">{m.mic_constraints()}</div>
+				<label>
+					{m.mic_echoCancellation()}
+					<select
+						onchange={(e) => {
+							const v = (e.target as HTMLSelectElement).value;
+							reqEchoCancellation = v === 'default' ? null : v === 'on';
+						}}
+					>
+						<option value="default" selected>{m.mic_default()}</option>
+						<option value="on">{m.mic_on()}</option>
+						<option value="off">{m.mic_off()}</option>
+					</select>
+				</label>
+				<label>
+					{m.mic_noiseSuppression()}
+					<select
+						onchange={(e) => {
+							const v = (e.target as HTMLSelectElement).value;
+							reqNoiseSuppression = v === 'default' ? null : v === 'on';
+						}}
+					>
+						<option value="default" selected>{m.mic_default()}</option>
+						<option value="on">{m.mic_on()}</option>
+						<option value="off">{m.mic_off()}</option>
+					</select>
+				</label>
+				<label>
+					{m.mic_agc()}
+					<select
+						onchange={(e) => {
+							const v = (e.target as HTMLSelectElement).value;
+							reqAGC = v === 'default' ? null : v === 'on';
+						}}
+					>
+						<option value="default" selected>{m.mic_default()}</option>
+						<option value="on">{m.mic_on()}</option>
+						<option value="off">{m.mic_off()}</option>
+					</select>
+				</label>
+				<button
+					class="button"
+					onclick={() => {
+						if (micActive) {
+							const wasMonitoring = monitoring;
+							stopMic();
+							monitoring = wasMonitoring;
+						}
+						startMic();
+					}}>{m.mic_applyConstraints()}</button
+				>
+			</div>
+
+			<div class="obtained">
+				<div>
+					<strong>{m.mic_requested()}:</strong> EC={reqEchoCancellation === null
+						? '–'
+						: reqEchoCancellation
+							? 'on'
+							: 'off'}, NS={reqNoiseSuppression === null
+						? '–'
+						: reqNoiseSuppression
+							? 'on'
+							: 'off'}, AGC={reqAGC === null ? '–' : reqAGC ? 'on' : 'off'}
+				</div>
+				<div>
+					<strong>{m.mic_obtained()}:</strong> EC={(obtainedEchoCancellation ??
+						'–') as unknown as string}, NS={(obtainedNoiseSuppression ?? '–') as unknown as string},
+					AGC={(obtainedAGC ?? '–') as unknown as string}
+				</div>
+			</div>
+		</details>
+	</section>
+
+	<section class="info">
+		<div><strong>{m.mic_sampleRate()}:</strong> {sampleRate ?? '–'} Hz</div>
+		{#if deviceLabel}
+			<div><strong>{m.mic_inputDevice()}:</strong> {deviceLabel}</div>
+		{/if}
+		<div>
+			<strong>{m.mic_channels()}:</strong>
+			{#if channels === null}
+				–
+			{:else if channels === 1}
+				1 ({m.mic_mono()})
+			{:else if channels === 2}
+				2 ({m.mic_stereo()})
+			{:else}
+				{channels}
+			{/if}
+		</div>
+	</section>
+
+	<section class="meter">
+		<div class="label">{m.mic_volume()}</div>
+		<div class="bar">
+			<div class="fill" style={`transform: scaleX(${Math.min(1, volume).toFixed(3)})`}></div>
+			{#if peakHold > 0}
+				<div class="peak-hold" style={`left: ${Math.min(100, peakHold * 100)}%`}></div>
+			{/if}
+		</div>
+		<div class="volval">
+			{m.mic_peakNow()}: {(20 * Math.log10(Math.max(1e-5, peak))).toFixed(1)} dBFS ·
+			{m.mic_peakHold()}: {(20 * Math.log10(Math.max(1e-5, peakHold))).toFixed(1)} dBFS · RMS: {(
+				20 * Math.log10(Math.max(1e-5, volume))
+			).toFixed(1)} dBFS
+			<button class="button small" onclick={() => (peakHold = 0)}>{m.mic_resetPeaks()}</button>
+		</div>
+		{#if clipping}
+			<div class="clip">{m.mic_clipping()}</div>
+		{/if}
+	</section>
+
+	<section class="graphs">
+		{#if analyserTime && analyserFreq}
+			<Oscilloscope analyser={analyserTime} title={m.signalGen_scope()} />
+			<Spectrum analyser={analyserFreq} title={m.signalGen_spectrum()} />
+		{/if}
+	</section>
+
+	<section class="recording">
+		<h4>{m.mic_recording()}</h4>
+		<div class="row">
+			<button class="button" onclick={startRecording} disabled={!micActive || isRecording}
+				>{m.mic_startRecording()}</button
+			>
+			<button class="button stop" onclick={stopRecording} disabled={!isRecording}
+				>{m.mic_stopRecording()}</button
+			>
+		</div>
+		{#if recordingUrl}
+			<audio src={recordingUrl} controls></audio>
+			<a class="button" href={recordingUrl} download="mic-test.webm">{m.mic_downloadRecording()}</a>
+		{/if}
+	</section>
+</article>
+
+<style>
+	h3 {
+		margin-top: 0;
+	}
+
+	article {
+		display: grid;
+		grid-template-columns: 1fr;
+		gap: 1rem;
+	}
+
+	.controls .row {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5rem;
+		align-items: center;
+	}
+
+	.controls .inputs {
+		gap: 1.25rem;
+	}
+
+	.controls label {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		white-space: nowrap;
+	}
+
+	.controls input[type='range'] {
+		width: min(40vw, 280px);
+	}
+
+	.value {
+		opacity: 0.8;
+		min-width: 4ch;
+		text-align: right;
+		display: inline-block;
+	}
+
+	.info {
+		display: flex;
+		gap: 1rem;
+		flex-wrap: wrap;
+		align-items: center;
+	}
+
+	.meter {
+		display: grid;
+		gap: 0.25rem;
+	}
+
+	.bar {
+		position: relative;
+		height: 14px;
+		background: rgba(255, 255, 255, 0.08);
+		border: 1px solid rgba(255, 255, 255, 0.2);
+		border-radius: 999px;
+		overflow: hidden;
+	}
+
+	.bar .fill {
+		position: absolute;
+		inset: 0;
+		background: linear-gradient(90deg, #5cb85c, #f0ad4e 70%, #d9534f);
+		transform-origin: left center;
+	}
+
+	/* Peak hold marker */
+	.bar .peak-hold {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		width: 2px;
+		background: #fff;
+		opacity: 0.9;
+		transform: translateX(-1px);
+	}
+
+	.volval {
+		opacity: 0.8;
+		font-variant-numeric: tabular-nums;
+	}
+
+	.button.small {
+		padding: 0.1rem 0.4rem;
+		font-size: 0.85em;
+		margin-left: 0.5rem;
+	}
+
+	.graphs {
+		display: grid;
+		grid-template-columns: 1fr;
+		gap: 1rem;
+	}
+
+	.recording .row {
+		display: flex;
+		gap: 0.5rem;
+		align-items: center;
+		margin-bottom: 0.5rem;
+	}
+
+	.obtained {
+		display: grid;
+		gap: 0.25rem;
+	}
+
+	.button.stop:not(:disabled) {
+		background: darkred;
+	}
+
+	@media (min-width: 900px) {
+		.graphs {
+			grid-template-columns: 1fr 1fr;
+		}
+	}
+</style>