Audio Frequency Equalizer Bars — Free HTML CSS JS Snippet

<div class="eq-card">
  <div class="eq-head">
    <div>
      <span class="eq-eyebrow">Spectrum</span>
      <h2>Frequency Equalizer</h2>
    </div>
    <span class="eq-status" id="eqStatus">Idle</span>
  </div>

  <canvas class="eq-canvas" id="eqCanvas" width="600" height="180"></canvas>

  <div class="eq-controls">
    <button class="eq-btn eq-btn-play" id="eqPlayBtn">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
      Play
    </button>
    <button class="eq-btn eq-btn-stop" id="eqStopBtn" disabled>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h12v12H6z"/></svg>
      Stop
    </button>
  </div>
</div>

*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,sans-serif;background:#0b0d14;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.eq-card{font-family:system-ui,-apple-system,sans-serif;background:#12141f;color:#e9ebf5;border:1px solid #262a3b;border-radius:18px;padding:24px;max-width:520px;width:100%;margin:0 auto}
.eq-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;gap:10px}
.eq-eyebrow{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8b90a8;margin-bottom:4px}
.eq-head h2{font-size:19px;margin:0}
.eq-status{font-size:12px;font-weight:700;background:#20243a;color:#8b90a8;padding:6px 12px;border-radius:999px;white-space:nowrap;transition:all .2s}
.eq-status.eq-live{background:rgba(74,222,128,.14);color:#4ade80}
.eq-canvas{width:100%;height:150px;background:#080a10;border-radius:14px;border:1px solid #262a3b;display:block;margin-bottom:16px}
.eq-controls{display:flex;gap:10px}
.eq-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:10px;border:none;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:transform .1s, opacity .2s}
.eq-btn:active{transform:scale(.97)}
.eq-btn:disabled{opacity:.4;cursor:not-allowed}
.eq-btn-play{background:linear-gradient(135deg,#f472b6,#fb923c);color:#fff}
.eq-btn-stop{background:#20243a;color:#e9ebf5}

var canvas = document.getElementById('eqCanvas');
var ctx = canvas.getContext('2d');
var playBtn = document.getElementById('eqPlayBtn');
var stopBtn = document.getElementById('eqStopBtn');
var statusEl = document.getElementById('eqStatus');

var audioCtx = null;
var oscillators = [];
var gainNode = null;
var analyser = null;
var rafId = null;
var dataArray = null;
var barCount = 48;

function drawIdle() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  var gap = 3;
  var barWidth = (canvas.width - gap * (barCount - 1)) / barCount;
  ctx.fillStyle = '#20243a';
  for (var i = 0; i < barCount; i++) {
    var x = i * (barWidth + gap);
    ctx.fillRect(x, canvas.height - 4, barWidth, 4);
  }
}

function drawFrame() {
  analyser.getByteFrequencyData(dataArray);
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  var gap = 3;
  var barWidth = (canvas.width - gap * (barCount - 1)) / barCount;
  var step = Math.floor(dataArray.length / barCount);

  for (var i = 0; i < barCount; i++) {
    var value = dataArray[i * step] || 0;
    var heightRatio = value / 255;
    var barHeight = Math.max(4, heightRatio * canvas.height);
    var x = i * (barWidth + gap);
    var y = canvas.height - barHeight;

    var gradient = ctx.createLinearGradient(0, y, 0, canvas.height);
    gradient.addColorStop(0, '#f472b6');
    gradient.addColorStop(1, '#fb923c');
    ctx.fillStyle = gradient;
    ctx.fillRect(x, y, barWidth, barHeight);
  }

  rafId = requestAnimationFrame(drawFrame);
}

function startPlayback() {
  audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  analyser = audioCtx.createAnalyser();
  analyser.fftSize = 256;
  dataArray = new Uint8Array(analyser.frequencyBinCount);

  gainNode = audioCtx.createGain();
  gainNode.gain.value = 0.15;

  var freqs = [130.81, 164.81, 196.0, 261.63];
  oscillators = freqs.map(function (freq, i) {
    var osc = audioCtx.createOscillator();
    osc.type = i % 2 === 0 ? 'sawtooth' : 'triangle';
    osc.frequency.value = freq;
    osc.connect(gainNode);
    osc.start();
    return osc;
  });

  gainNode.connect(analyser);
  analyser.connect(audioCtx.destination);

  playBtn.disabled = true;
  stopBtn.disabled = false;
  statusEl.textContent = 'Playing';
  statusEl.classList.add('eq-live');

  drawFrame();
}

function stopPlayback() {
  if (rafId) {
    cancelAnimationFrame(rafId);
    rafId = null;
  }
  oscillators.forEach(function (osc) {
    try { osc.stop(); } catch (e) {}
    osc.disconnect();
  });
  oscillators = [];

  if (gainNode) { gainNode.disconnect(); gainNode = null; }
  if (analyser) { analyser.disconnect(); analyser = null; }
  if (audioCtx) {
    audioCtx.close();
    audioCtx = null;
  }

  playBtn.disabled = false;
  stopBtn.disabled = true;
  statusEl.textContent = 'Idle';
  statusEl.classList.remove('eq-live');

  drawIdle();
}

playBtn.addEventListener('click', startPlayback);
stopBtn.addEventListener('click', stopPlayback);

drawIdle();