<!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