Visualize and display microphone audio levels in real-time.

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Microphone Tester</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
      padding: 20px;
    }
    canvas {
      border: 1px solid #ccc;
      margin-top: 20px;
      display: block;
      margin: 0 auto;
    }
    #status {
      font-weight: bold;
      color: #333;
      margin-top: 10px;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      margin-top: 10px;
    }
  </style>
</head>
<body>

  <h1>🎙️ Microphone Tester</h1>
  <p>Click the button to test if your microphone is working.</p>
  <button onclick="startMicTest()">Start Mic Test</button>
  <p id="status">Status: Idle</p>
  <canvas id="visualizer" width="600" height="100"></canvas>

  <script>
    let animationId;

    function startMicTest() {
      const canvas = document.getElementById("visualizer");
      const canvasCtx = canvas.getContext("2d");
      const statusText = document.getElementById("status");

      // Check browser support
      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
        statusText.textContent = "❌ Error: getUserMedia not supported in this browser.";
        console.error("getUserMedia not supported.");
        return;
      }

      navigator.mediaDevices.getUserMedia({ audio: true })
        .then(stream => {
          statusText.textContent = "✅ Microphone access granted. Visualizing audio...";

          const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
          const source = audioCtx.createMediaStreamSource(stream);
          const analyser = audioCtx.createAnalyser();
          analyser.fftSize = 256;
          const bufferLength = analyser.frequencyBinCount;
          const dataArray = new Uint8Array(bufferLength);

          source.connect(analyser);

          function draw() {
            animationId =...