LiveCaptureInteractiveThe tuner locks in 44 ms.
A guitar tuner for your browser and the pedal.
Sound
A guitar string, drawn by the graphics card.
A guitar string, plucked and drawn as it sounds: a rolling 3D picture of its frequencies.
LiveWhat it does
Pluck any of six strings and watch the harmonics rise out of the sound as a landscape you can tilt. The analysis runs on the graphics card with WebGPU, and the page falls back to a plain Canvas drawing where WebGPU isn't available.
Who it’s for
Anyone curious what a note looks like, and anyone who wants to see WebGPU do something useful.
Why we built it
The strobe on our tuner shows one number. We wanted to see the whole sound, and to learn WebGPU by building something we would use.
What we’re proud of
The analysis runs on the graphics card, it reads the pitch of every pluck, and it has a text version and a still mode.
Try it
The live piece
Pluck one
Text version: how to use the spectrogram
- Press Start sound, then pluck any of six guitar strings with its button or with the keys 1 to 6. The sound is a plucked string computed in the page, so there is no sound file.
- As it rings, a Fourier transform turns the sound into a rolling 3D picture of its frequencies, drawn as a landscape of ridges. The big number is the fundamental pitch it measured, next to the pitch that string should have.
- Every pluck is also written into a table below the picture, so the same numbers are there as text, and a polite status line says them as they arrive.
- Drag the picture, or use the arrow keys on it, to tilt and turn the view, or use the two sliders. Pause freezes it. Use microphone shows the sound of your own guitar instead, if you allow it.
- If your device asks for less motion, nothing drifts: each pluck is laid down as a still picture. If your browser has no WebGPU, the same picture is drawn with Canvas and the page says which one it is using.
Technologies used
What it’s built with.
- WebGPUThe browser's newer way to use the graphics card, for drawing and for compute. Our spectrogram runs its sound analysis on it, with a plain Canvas version for browsers without it.
- Canvas 2DThe browser's plain drawing surface. Our tuner's strobe and the rig's controls are drawn on it, so they work almost everywhere.
- Web AudioThe browser's own audio engine. The Squatch Rig plays through it live.
Get in touch
Want something like this? Say hello.
A person reads every message.
Email [email protected]
Text us
Text us: +1 888-344-3607. You text first; we reply only in that conversation, about your question. No marketing. Msg & data rates may apply. Reply STOP to opt out, HELP for help. SMS program
Our goods: shop.squatch.ccThe studio: squatch.cc