Components
Time and sequencing
Blocks
The note and the pitch of a sound, live from the microphone, with a needle on a scale of cents.
Audio UI
"use client";
import { Button } from "@/components/ui/button";Tells you which note a sound is and how far from it you are: tune a guitar, check a vocal, find the key of a sample. The note, the needle and the frequency follow the sound frame by frame without re-rendering React, and everything runs on the Web Audio API: the microphone, an AnalyserNode and a pitch detector with no audio library.
Three pieces, each with one job: useMicrophone gives the signal, usePitch finds its pitch, Tuner shows it.
import { Tuner } from "@/components/audio-ui/tuner";
import { useMicrophone } from "@/hooks/use-microphone";
import { usePitch } from "@/hooks/use-pitch";
const microphone = useMicrophone();
const pitch = usePitch(microphone.analyser);
<button onClick={microphone.start} type="button">Listen</button>
<Tuner source={pitch} />;Call start from a click: the browser asks for permission then, and a suspended audio context resumes. The microphone is released on stop and when the component unmounts.
The signal is raw: echo cancellation, noise suppression and automatic gain are what a call needs, and they flatten the very level a tuner reads. The analyser is never connected to the speakers, so nothing plays back.
usePitch takes any AnalyserNode, not only the microphone's: tap a synth, a track or the master bus and the tuner shows what plays.
const analyser = ctx.createAnalyser();
analyser.fftSize = 4096; // two periods of the lowest pitch: 4096 at 48 kHz reaches about 40 Hz
synth.connect(analyser);
const pitch = usePitch(analyser, { minHz: 60, maxHz: 1200, reference: 432 });The detector is the YIN algorithm, in @audio-ui/core/pitch: detectPitch(samples, sampleRate) for the frequency of an array of samples, nearestNote(frequency) for the note and its offset in cents, and noteToFrequency for the way back. They are pure functions with no React and no Web Audio, so you can use them off the audio thread, in a test or in any framework.
The tuner is a meter of cents, from -50 to +50, and its text value reads the note and how far off it is: "A 4, 12 cents flat", "A 4, in tune", "No sound". The display itself is hidden from assistive technology, so a screen reader does not read a new figure twenty times a second.
Props · 3
usePitch returns: the note, its octave, the offset in cents and the frequency, or null while nothing clear is playing.Props · 5
null otherwise.Props · 8
fftSize of at least two periods of minHz.Browse 1 production-ready audio/ui Tuner components for players, mixers, and synth interfaces. These examples use the headless primitives from @audio-ui/react and stay fully compatible with Shadcn Create so radius, color, and typography match your configured theme.
Browse all 1 Shadcn Tuner components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the audio/ui library.