| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Microphone Test</title> |
| | <style> |
| | body { |
| | font-family: monospace; |
| | padding: 20px; |
| | max-width: 800px; |
| | margin: 0 auto; |
| | } |
| | button { |
| | padding: 10px 20px; |
| | font-size: 16px; |
| | margin: 10px 0; |
| | } |
| | #log { |
| | background: #000; |
| | color: #0f0; |
| | padding: 10px; |
| | font-size: 12px; |
| | height: 400px; |
| | overflow-y: scroll; |
| | margin-top: 20px; |
| | } |
| | #meter { |
| | width: 100%; |
| | height: 40px; |
| | background: #222; |
| | margin-top: 10px; |
| | position: relative; |
| | } |
| | #meter-bar { |
| | height: 100%; |
| | background: linear-gradient(to right, green, yellow, red); |
| | width: 0%; |
| | transition: width 0.05s; |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <h1>Microphone Test</h1> |
| | <p>This tests if your microphone is working with Web Audio API</p> |
| |
|
| | <label for="deviceSelect">Select Microphone:</label> |
| | <select id="deviceSelect" style="width: 100%; padding: 8px; margin: 10px 0; background: #222; color: #0f0; border: 1px solid #0f0; font-family: monospace;"> |
| | <option value="">Default Microphone</option> |
| | </select> |
| |
|
| | <button id="start">Start Microphone Test</button> |
| | <button id="stop" disabled>Stop Test</button> |
| |
|
| | <div id="meter"> |
| | <div id="meter-bar"></div> |
| | </div> |
| |
|
| | <div id="log"></div> |
| |
|
| | <script> |
| | const logEl = document.getElementById('log'); |
| | const meterBar = document.getElementById('meter-bar'); |
| | const startBtn = document.getElementById('start'); |
| | const stopBtn = document.getElementById('stop'); |
| | const deviceSelect = document.getElementById('deviceSelect'); |
| | |
| | let audioContext = null; |
| | let source = null; |
| | let analyser = null; |
| | let processor = null; |
| | let animationId = null; |
| | |
| | |
| | async function loadDevices() { |
| | try { |
| | const devices = await navigator.mediaDevices.enumerateDevices(); |
| | const audioInputs = devices.filter(d => d.kind === 'audioinput'); |
| | |
| | deviceSelect.innerHTML = '<option value="">Default Microphone</option>'; |
| | audioInputs.forEach(device => { |
| | const option = document.createElement('option'); |
| | option.value = device.deviceId; |
| | option.textContent = device.label || `Microphone ${device.deviceId.slice(0, 8)}...`; |
| | deviceSelect.appendChild(option); |
| | }); |
| | |
| | console.log('Available devices:', audioInputs); |
| | } catch (error) { |
| | console.error('Failed to enumerate devices:', error); |
| | } |
| | } |
| | |
| | loadDevices(); |
| | |
| | function log(msg) { |
| | const line = document.createElement('div'); |
| | line.textContent = `[${new Date().toLocaleTimeString()}] ${msg}`; |
| | logEl.appendChild(line); |
| | logEl.scrollTop = logEl.scrollHeight; |
| | console.log(msg); |
| | } |
| | |
| | async function startTest() { |
| | try { |
| | const selectedDeviceId = deviceSelect.value; |
| | log(`Requesting microphone access... ${selectedDeviceId ? `(Device: ${deviceSelect.options[deviceSelect.selectedIndex].text})` : '(Default)'}`); |
| | |
| | const audioConstraints = { |
| | channelCount: 1, |
| | echoCancellation: false, |
| | noiseSuppression: false, |
| | autoGainControl: false, |
| | }; |
| | |
| | if (selectedDeviceId) { |
| | audioConstraints.deviceId = { exact: selectedDeviceId }; |
| | } |
| | |
| | const stream = await navigator.mediaDevices.getUserMedia({ |
| | audio: audioConstraints |
| | }); |
| | |
| | log('✓ Microphone access granted'); |
| | |
| | |
| | await loadDevices(); |
| | |
| | const tracks = stream.getAudioTracks(); |
| | log(`Stream has ${tracks.length} audio tracks`); |
| | if (tracks.length > 0) { |
| | const track = tracks[0]; |
| | const settings = track.getSettings(); |
| | log(`Track: ${track.label}`); |
| | log(`Settings: ${JSON.stringify(settings, null, 2)}`); |
| | log(`Enabled: ${track.enabled}, Muted: ${track.muted}, State: ${track.readyState}`); |
| | } |
| | |
| | audioContext = new AudioContext(); |
| | log(`AudioContext created: ${audioContext.sampleRate}Hz, state: ${audioContext.state}`); |
| | |
| | if (audioContext.state === 'suspended') { |
| | await audioContext.resume(); |
| | log(`AudioContext resumed to: ${audioContext.state}`); |
| | } |
| | |
| | source = audioContext.createMediaStreamSource(stream); |
| | log('MediaStreamSource created'); |
| | |
| | |
| | analyser = audioContext.createAnalyser(); |
| | analyser.fftSize = 2048; |
| | source.connect(analyser); |
| | log('AnalyserNode connected'); |
| | |
| | const dataArray = new Uint8Array(analyser.frequencyBinCount); |
| | |
| | function checkAnalyser() { |
| | analyser.getByteTimeDomainData(dataArray); |
| | let sum = 0; |
| | let max = 0; |
| | for (let i = 0; i < dataArray.length; i++) { |
| | const val = Math.abs(dataArray[i] - 128); |
| | sum += val; |
| | max = Math.max(max, val); |
| | } |
| | const avg = sum / dataArray.length; |
| | const percent = (max / 128) * 100; |
| | meterBar.style.width = percent + '%'; |
| | |
| | log(`Analyser - Avg: ${avg.toFixed(2)}, Max: ${max}, Samples: ${dataArray.length}`); |
| | |
| | if (avg < 0.1) { |
| | log('⚠️ WARNING: Audio level is 0 or very quiet!'); |
| | } |
| | } |
| | |
| | setTimeout(checkAnalyser, 500); |
| | setTimeout(checkAnalyser, 1000); |
| | setTimeout(checkAnalyser, 2000); |
| | |
| | |
| | processor = audioContext.createScriptProcessor(4096, 1, 1); |
| | source.connect(processor); |
| | processor.connect(audioContext.destination); |
| | |
| | let chunkCount = 0; |
| | processor.onaudioprocess = (event) => { |
| | const inputData = event.inputBuffer.getChannelData(0); |
| | const max = Math.max(...Array.from(inputData).map(Math.abs)); |
| | const avg = Array.from(inputData).reduce((sum, val) => sum + Math.abs(val), 0) / inputData.length; |
| | |
| | chunkCount++; |
| | if (chunkCount % 10 === 0) { |
| | log(`ScriptProcessor - Chunk ${chunkCount}, Avg: ${avg.toFixed(6)}, Max: ${max.toFixed(6)}, Length: ${inputData.length}`); |
| | |
| | if (max < 0.0001) { |
| | log('⚠️ WARNING: ScriptProcessor getting all zeros!'); |
| | } |
| | } |
| | |
| | |
| | const percent = (max * 100); |
| | meterBar.style.width = Math.min(100, percent) + '%'; |
| | }; |
| | |
| | log('ScriptProcessorNode connected and listening...'); |
| | log('✓ Test running - speak into your microphone!'); |
| | |
| | startBtn.disabled = true; |
| | stopBtn.disabled = false; |
| | deviceSelect.disabled = true; |
| | |
| | } catch (error) { |
| | log(`❌ ERROR: ${error.message}`); |
| | console.error(error); |
| | } |
| | } |
| | |
| | function stopTest() { |
| | if (processor) processor.disconnect(); |
| | if (analyser) analyser.disconnect(); |
| | if (source) source.disconnect(); |
| | if (audioContext) audioContext.close(); |
| | if (animationId) cancelAnimationFrame(animationId); |
| | |
| | log('Test stopped'); |
| | startBtn.disabled = false; |
| | stopBtn.disabled = true; |
| | deviceSelect.disabled = false; |
| | meterBar.style.width = '0%'; |
| | } |
| | |
| | startBtn.addEventListener('click', startTest); |
| | stopBtn.addEventListener('click', stopTest); |
| | </script> |
| | </body> |
| | </html> |
| |
|
