Visualizer lab.

import {
  AudioProvider,
  SpectrumCanvas,
  WaveformCanvas,
  useTone,
} from "@webaudio-kit/react";

function VisualizerOnly() {
  const tone = useTone({ frequency: 523.25, gain: 0.1, type: "triangle" });

  return (
    <>
      <button onClick={() => void tone.play({ durationMs: 700 })}>
        Pulse visualizer
      </button>
      <WaveformCanvas aria-label="Waveform analyser" />
      <SpectrumCanvas aria-label="Spectrum analyser" />
    </>
  );
}

export function App() {
  return (
    <AudioProvider>
      <VisualizerOnly />
    </AudioProvider>
  );
}