27:T767d,
/** How many bands each channel is drawn in, low to high. */
const BANDS = 32

/** Your own drawing of the sound: anything inside a player reads it through
 *  `useSoundSource`. Here a stereo spectrum, the left channel rising from the middle
 *  line and the right falling from it, each in 32 bands spaced as hearing is (more
 *  of them low, where the sound is), written straight to the bars' style each
 *  frame, never a render. Before the sound is tapped (a page may start sound only
 *  after a press) it says so instead of drawing silence. */
function Meter() {
  const source = useSoundSource()
  const bars = React.useRef<(HTMLSpanElement | null)[]>([])
  const heard = source?.analysers != null
  React.useEffect(() => {
    const analysers = source?.analysers
    if (!analysers || !source.playing) return
    const bins = analysers.map(
      (a) => new Uint8Array(new ArrayBuffer(a.frequencyBinCount)),
    )
    // Each band's bins, by a power curve: band k covers [n·(k/B)², n·((k+1)/B)²).
    const edges = (n: number) =>
      Array.from({ length: BANDS + 1 }, (_, k) =>
        Math.max(k, Math.round(n * (k / BANDS) ** 2)),
      )
    let frame = 0
    const tick = () => {
      analysers.forEach((a, side) => {
        const b = bins[side] as Uint8Array<ArrayBuffer>
        a.getByteFrequencyData(b)
        const e = edges(b.length)
        for (let k = 0; k < BANDS; k++) {
          const from = e[k] as number
          const to = Math.max(from + 1, e[k + 1] as number)
          let peak = 0
          for (let i = from; i < to; i++) peak = Math.max(peak, b[i] ?? 0)
          const bar = bars.current[side * BANDS + k]
          if (bar) bar.style.transform = `scaleY(${peak / 255})`
        }
      })
      frame = requestAnimationFrame(tick)
    }
    frame = requestAnimationFrame(tick)
    return () => cancelAnimationFrame(frame)
  }, [source])
  return (
    <div className="relative grid h-28 grid-rows-2 gap-px">
      {[0, 1].map((side) => (
        <div
          key={side}
          className={`flex gap-0.5 ${side === 0 ? "items-end" : "items-start"}`}
        >
          {Array.from({ length: BANDS }, (_, k) => (
            <span
              // biome-ignore lint/suspicious/noArrayIndexKey: a fixed run of bands
              key={k}
              ref={(el) => {
                bars.current[side * BANDS + k] = el
              }}
              className={`h-full flex-1 scale-y-[0.02] rounded-full bg-foreground/80 ${side === 0 ? "origin-bottom" : "origin-top opacity-60"}`}
            />
          ))}
        </div>
      ))}
      {!heard && (
        <p className="absolute inset-0 m-0 grid place-items-center font-mono text-muted-foreground text-xs">
          press play to hear it drawn
        </p>
      )}
    </div>
  )
}

<VideoPlayback
  src="/bunny-stereo.mp4"
  poster="/bunny-poster.jpg"
  label="Big Buck Bunny, stereo"
  loop
  sound
>
  <div className="mx-auto flex w-full max-w-md flex-col gap-4">
    <VideoPicture aspect="16 / 9" />
    <Meter />
    <PlayerBar label="Big Buck Bunny, stereo">
      <PlayerSound />
    </PlayerBar>
  </div>
</VideoPlayback>
26:["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$27"}}]