Microphone Test
Microphone Test Tool
Microphone is OFF
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #74ebd5, #acb6e5);
color: #333;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.container {
text-align: center;
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 400px;
}
h1 {
margin: 0 0 20px;
color: #4A90E2;
}
.status {
font-size: 1.2em;
margin-bottom: 20px;
color: #666;
}
.btn {
background: #4A90E2;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
margin: 10px;
}
.btn:hover {
background: #357ABD;
}
.hidden {
display: none;
}
.visualizer {
width: 100%;
height: 150px;
border: 2px solid #4A90E2;
border-radius: 8px;
margin-top: 20px;
}
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const statusDiv = document.getElementById('status');
const canvas = document.getElementById('visualizer');
const canvasCtx = canvas.getContext('2d');
let audioContext;
let analyser;
let microphone;
let animationId;
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
startBtn.addEventListener('click', async () => {
try {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
microphone = audioContext.createMediaStreamSource(stream);
analyser = audioContext.createAnalyser();
microphone.connect(analyser);
analyser.fftSize = 256;
startVisualizer();
statusDiv.textContent = 'Microphone is ON';
statusDiv.style.color = '#28a745';
startBtn.classList.add('hidden');
stopBtn.classList.remove('hidden');
} catch (err) {
statusDiv.textContent = 'Microphone access denied!';
statusDiv.style.color = 'red';
}
});
stopBtn.addEventListener('click', () => {
if (audioContext) {
audioContext.close();
}
cancelAnimationFrame(animationId);
statusDiv.textContent = 'Microphone is OFF';
statusDiv.style.color = '#666';
startBtn.classList.remove('hidden');
stopBtn.classList.add('hidden');
clearCanvas();
});
function startVisualizer() {
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
function draw() {
animationId = requestAnimationFrame(draw);
analyser.getByteFrequencyData(dataArray);
canvasCtx.fillStyle = '#fff';
canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
const barWidth = (canvas.width / bufferLength) * 2.5;
let barHeight;
let x = 0;
for (let i = 0; i < bufferLength; i++) {
barHeight = dataArray[i];
canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 150)`;
canvasCtx.fillRect(x, canvas.height - barHeight / 2, barWidth, barHeight / 2);
x += barWidth + 1;
}
}
draw();
}
function clearCanvas() {
canvasCtx.fillStyle = '#fff';
canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
}
