<!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: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; text-align: center; } button { padding: 10px 20px; font-size: 16px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } button:disabled { background-color: #cccccc; } #status { margin: 20px 0; padding: 10px; border-radius: 4px; } #visualizer { width: 100%; height: 100px; background-color: #f0f0f0; margin: 20px 0; position: relative; } .bar { position: absolute; bottom: 0; background-color: #4CAF50; width: 2px; display: inline-block; margin: 0 1px; } </style></head><body> <h1>Microphone Test</h1> <button id="startBtn">Start Microphone Test</button> <div id="status">Click the button to start microphone test</div> <div id="visualizer"></div> <script> const startBtn = document.getElementById('startBtn'); const statusDiv = document.getElementById('status'); const visualizer = document.getElementById('visualizer'); let audioContext; let analyser; let microphone; let isTesting = false; let animationId; // Create bars for the visualizer const barCount = 60; for (let i = 0; i < barCount; i++) { const bar = document.createElement('div'); bar.className = 'bar'; bar.id = `bar${i}`; visualizer.appendChild(bar); } startBtn.addEventListener('click', async () => { if (isTesting) { stopMicrophoneTest(); return; } try { startBtn.disabled = true; statusDiv.textContent = 'Requesting microphone access...'; statusDiv.style.backgroundColor = '#fff3cd'; // Request microphone access const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); // Set up audio context audioContext = new (window.AudioContext || window.webkitAudioContext)(); analyser = audioContext.createAnalyser(); analyser.fftSize = 256; microphone = audioContext.createMediaStreamSource(stream); microphone.connect(analyser); isTesting = true; startBtn.textContent = 'Stop Test'; startBtn.disabled = false; statusDiv.textContent = 'Microphone is working! Speak into your microphone.'; statusDiv.style.backgroundColor = '#d4edda'; // Start visualization visualize(); } catch (error) { console.error('Error accessing microphone:', error); statusDiv.textContent = `Error: ${error.message}`; statusDiv.style.backgroundColor = '#f8d7da'; startBtn.disabled = false; } }); function visualize() { if (!isTesting) return; const bufferLength = analyser.frequencyBinCount; const dataArray = new Uint8Array(bufferLength); analyser.getByteFrequencyData(dataArray); const bars = document.querySelectorAll('.bar'); bars.forEach((bar, i) => { const barIndex = Math.floor(i * bufferLength / barCount); const height = (dataArray[barIndex] / 255) * 100; bar.style.height = `${height}%`; }); animationId = requestAnimationFrame(visualize); } function stopMicrophoneTest() { if (microphone) { microphone.disconnect(); const tracks = microphone.mediaStream.getAudioTracks(); tracks.forEach(track => track.stop()); } if (audioContext && audioContext.state !== 'closed') { audioContext.close(); } if (animationId) { cancelAnimationFrame(animationId); } isTesting = false; startBtn.textContent = 'Start Microphone Test'; statusDiv.textContent = 'Microphone test stopped.'; statusDiv.style.backgroundColor = ''; // Reset visualizer document.querySelectorAll('.bar').forEach(bar => { bar.style.height = '0%'; }); } // Clean up when page is unloaded window.addEventListener('beforeunload', () => { if (isTesting) { stopMicrophoneTest(); } }); </script></body></html>
visit: mic test