Audio visualizer for a website, with the Web Audio API

<div style="position:fixed;inset:0;background:#0e0b16">
  <canvas id="viz" style="position:absolute;inset:0;width:100%;height:100%"></canvas>
  <button id="play" aria-pressed="false" style="position:absolute;left:24px;bottom:24px;padding:10px 18px;border:0;border-radius:99px;background:#ff9e5e;color:#0e0b16;font:600 15px system-ui">Play demo</button>
</div>
<script>
const canvas = document.getElementById('viz')
const button = document.getElementById('play')
const g = canvas.getContext('2d')
const BANDS = 48, LOW = 40, HIGH = 16000 // log-spaced bands, in Hz
const still = matchMedia('(prefers-reduced-motion: reduce)').matches
const level = new Float32Array(BANDS)
let ctx, analyser, bins, noise, timer, playing = false, next = 0, step = 0

function size() {
  const dpr = Math.min(devicePixelRatio, 2)
  canvas.width = canvas.clientWidth * dpr
  canvas.height = canvas.clientHeight * dpr
}
size(); addEventListener('resize', () => { size(); if (still) draw(0) })

// A small synth loop, so there is no file to load. For a real track:
// ctx.createMediaElementSource(audioElement).connect(analyser)
function note(type, freq, t, len, vol, drop) {
  const o = ctx.createOscillator(), v = ctx.createGain()
  o.type = type; o.frequency.setValueAtTime(freq, t)
  if (drop) o.frequency.exponentialRampToValueAtTime(drop, t + len)
  v.gain.setValueAtTime(vol, t); v.gain.exponentialRampToValueAtTime(0.001, t + len)
  o.connect(v).connect(analyser); o.start(t); o.stop(t + len)
}
function hat(t) {
  const n = ctx.createBufferSource(), f = ctx.createBiquadFilter(), v = ctx.createGain()
  n.buffer = noise
  f.type = 'highpass'; f.frequency.value = 7000
  v.gain.setValueAtTime(0.25, t); v.gain.exponentialRampToValueAtTime(0.001, t + 0.05)
  n.connect(f).connect(v).connect(analyser); n.start(t)
}
const ROOTS = [55, 55, 65.4, 49] // A, A, C, G
function schedule() { // queue sixteenth notes a little ahead of the clock
  while (next < ctx.currentTime + 0.12) {
    const root = ROOTS[Math.floor(step / 16) % 4], s = step % 16
    if (s % 4 === 0) note('sine', 150, next, 0.3, 0.7, 40)
    if (s % 2 === 1) hat(next)
    if (s % 4 !== 0) note('sawtooth', root, next, 0.12, 0.18)
    note('triangle', root * [4, 6, 8, 5][s % 4], next, 0.1, 0.08)
    next += 0.125; step++
  }
}

button.addEventListener('click', async () => {
  if (!ctx) { // audio may only start after a click
    ctx = new AudioContext()
    analyser = ctx.createAnalyser()
    analyser.fftSize = 2048; analyser.smoothingTimeConstant = 0
    analyser.connect(ctx.destination)
    bins = new Uint8Array(analyser.frequencyBinCount)
    noise = ctx.createBuffer(1, ctx.sampleRate * 0.05, ctx.sampleRate)
    noise.getChannelData(0).forEach((_, i, d) => (d[i] = Math.random() * 2 - 1))
    next = ctx.currentTime + 0.05
  }
  playing = !playing
  if (playing) { await ctx.resume(); timer = setInterval(schedule, 25); schedule() }
  else { clearInterval(timer); await ctx.suspend() }
  button.textContent = playing ? 'Pause' : 'Play demo'
  button.setAttribute('aria-pressed', playing)
})

function target(i, t) {
  if (!playing || still) return 0.1 + 0.06 * Math.sin(t * 1.5 + i * 0.35) // idle: breathe
  const hz = (b) => LOW * Math.pow(HIGH / LOW, b / BANDS)
  const per = ctx.sampleRate / analyser.fftSize
  const a = Math.floor(hz(i) / per), z = Math.max(a + 1, Math.ceil(hz(i + 1) / per))
  let sum = 0
  for (let k = a; k < z; k++) sum += bins[k]
  return Math.pow(sum / (z - a) / 255, 1.6) // a curve that keeps quiet bands low
}

let last = performance.now()
function draw(now) {
  const dt = Math.min(0.1, Math.max(0, now - last) / 1000); last = now
  if (playing && !still) analyser.getByteFrequencyData(bins)
  const w = canvas.width, h = canvas.height, gap = w / BANDS
  g.fillStyle = '#0e0b16'; g.fillRect(0, 0, w, h)
  for (let i = 0; i < BANDS; i++) {
    const v = target(i, now / 1000)
    const speed = v > level[i] ? 0.02 : 0.18 // rise fast, fall slowly
    level[i] = still ? v : level[i] + (v - level[i]) * (1 - Math.exp(-dt / speed))
    const bar = Math.max(2, level[i] * h * 0.7)
    g.fillStyle = 'hsl(' + (24 + level[i] * 20) + ',100%,' + (55 + level[i] * 25) + '%)'
    g.fillRect(i * gap + gap * 0.15, h * 0.85 - bar, gap * 0.7, bar)
  }
  if (!still) requestAnimationFrame(draw)
}
requestAnimationFrame(draw)
</script>