Canvas Audio Frequency Bars — Free Web Audio API Visualizer

<section class="cab-wrap">
  <span class="cab-tag">web audio api · analysernode</span>
  <h1>Frequency bars</h1>
  <p id="cabStatus">Click "Use microphone" to visualize real audio, or watch the simulated preview below.</p>

  <div class="cab-stage">
    <canvas class="cab-canvas" id="cabCanvas" width="640" height="220"></canvas>
  </div>

  <div class="cab-actions">
    <button class="cab-btn primary" id="cabMicBtn">Use microphone</button>
    <button class="cab-btn" id="cabSimBtn">Simulated preview</button>
  </div>
  <p class="cab-note">If microphone access is blocked (common inside a sandboxed preview iframe), the bars automatically fall back to a sine-driven simulation — the demo never sits blank.</p>
</section>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:radial-gradient(120% 90% at 50% 0%,#1a1030,#050308 60%);color:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:26px}
.cab-wrap{width:100%;max-width:720px;text-align:center}
.cab-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#f0abfc;background:rgba(240,171,252,.1);border:1px solid rgba(240,171,252,.3);padding:5px 12px;border-radius:99px;margin-bottom:14px}
.cab-wrap h1{font-size:clamp(28px,6vw,40px);font-weight:800;letter-spacing:-.03em}
.cab-wrap p{font-size:14px;color:#b7a9d1;margin-top:8px;line-height:1.6}
.cab-stage{margin:24px 0 18px;border-radius:16px;overflow:hidden;border:1px solid rgba(240,171,252,.2);background:#0a0712}
.cab-canvas{display:block;width:100%;height:220px}
.cab-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.cab-btn{padding:12px 22px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#e8e2f5;font:600 13px system-ui;cursor:pointer;transition:background .15s,border-color .15s}
.cab-btn:hover{background:rgba(255,255,255,.11)}
.cab-btn.primary{background:linear-gradient(135deg,#c084fc,#f472b6);border-color:transparent;color:#1a0620;font-weight:700}
.cab-note{font-size:11.5px;color:#7c7091;max-width:520px;margin:0 auto;line-height:1.6}

var canvas = document.getElementById('cabCanvas');
var ctx = canvas.getContext('2d');
var statusEl = document.getElementById('cabStatus');
var micBtn = document.getElementById('cabMicBtn');
var simBtn = document.getElementById('cabSimBtn');

var W = canvas.width, H = canvas.height;
var BAR_COUNT = 64;
var mode = 'idle'; // 'idle' | 'mic' | 'sim'
var raf = null;

var audioCtx = null;
var analyser = null;
var freqData = null;
var micStream = null;

function drawBars(values) {
  ctx.clearRect(0, 0, W, H);
  var gap = 3;
  var barWidth = (W - gap * (BAR_COUNT - 1)) / BAR_COUNT;

  for (var i = 0; i < BAR_COUNT; i++) {
    var v = values[i] / 255;
    var barH = Math.max(3, v * (H - 10));
    var x = i * (barWidth + gap);
    var y = H - barH;

    var grad = ctx.createLinearGradient(0, y, 0, H);
    grad.addColorStop(0, '#f0abfc');
    grad.addColorStop(1, '#7c3aed');
    ctx.fillStyle = grad;
    ctx.beginPath();
    ctx.roundRect(x, y, barWidth, barH, 3);
    ctx.fill();
  }
}

// --- Simulated fallback: a sine/noise blend so the preview always animates,
// mic access or not. This is what runs by default and whenever getUserMedia
// is denied, unsupported, or blocked by the surrounding iframe's permissions
// policy (common for third-party embeds and sandboxed previews).
var simT = 0;
function simulatedFrame() {
  simT += 0.045;
  var values = new Uint8Array(BAR_COUNT);
  for (var i = 0; i < BAR_COUNT; i++) {
    var base = Math.sin(i * 0.35 + simT * 2.2) * 0.5 + 0.5;
    var wobble = Math.sin(i * 0.9 - simT * 3.4) * 0.5 + 0.5;
    var envelope = Math.sin(simT * 0.6) * 0.3 + 0.7;
    values[i] = Math.min(255, Math.max(0, (base * 0.6 + wobble * 0.4) * envelope * 255));
  }
  return values;
}

function loop() {
  if (mode === 'mic' && analyser && freqData) {
    analyser.getByteFrequencyData(freqData);
    drawBars(freqData);
  } else {
    drawBars(simulatedFrame());
  }
  raf = requestAnimationFrame(loop);
}

function startSimulated(message) {
  stopMic();
  mode = 'sim';
  statusEl.textContent = message || 'Simulated preview — sine-driven bars, no microphone involved.';
}

function stopMic() {
  if (micStream) {
    micStream.getTracks().forEach(function (t) { t.stop(); });
    micStream = null;
  }
}

async function startMic() {
  if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    startSimulated('This browser (or iframe context) has no getUserMedia support — showing the simulated preview instead.');
    return;
  }

  try {
    statusEl.textContent = 'Requesting microphone access…';
    micStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });

    audioCtx = audioCtx || new (window.AudioContext || window.webkitAudioContext)();
    if (audioCtx.state === 'suspended') await audioCtx.resume();

    var source = audioCtx.createMediaStreamSource(micStream);
    analyser = audioCtx.createAnalyser();
    analyser.fftSize = 256;
    analyser.smoothingTimeConstant = 0.82;
    freqData = new Uint8Array(analyser.frequencyBinCount);
    source.connect(analyser);

    mode = 'mic';
    statusEl.textContent = 'Live microphone input — try clapping or talking.';
  } catch (err) {
    // Permission denied, no device, or (very commonly inside a sandboxed
    // preview iframe) the "microphone" Permissions-Policy simply isn't
    // granted to this frame. Whatever the cause, fail into the simulation
    // rather than leaving the canvas blank.
    startSimulated('Microphone unavailable (' + (err && err.name ? err.name : 'blocked') + ') — showing the simulated preview instead.');
  }
}

micBtn.addEventListener('click', startMic);
simBtn.addEventListener('click', function () { startSimulated(); });

window.addEventListener('beforeunload', stopMic);

startSimulated('Simulated preview — sine-driven bars, no microphone involved.');
raf = requestAnimationFrame(loop);