usePitch

The pitch of a signal as a live source: the note nearest the sound and its offset in cents, steadied by a median and held a moment after the sound stops, with no React render per reading


pnpm dlx shadcn@latest add @audio-ui/use-pitch

import { usePitch } from "@/hooks/use-pitch";

Files	`hooks/use-pitch.ts`
Depends on	Nothing
npm	`@audio-ui/react`, `@audio-ui/engine`
Used by	`tuner`

Export	Kind	What it is
`PitchReading`	interface	What a tuner shows: the note nearest the sound, and how far from it the sound is.
`UsePitchOptions`	interface
`usePitch`	function	The pitch of a signal, live: `null` while nothing clear is playing.

Usage

The pitch of a signal, live, from an AnalyserNode: the nearest note, how many cents off it is, and how clear the sound is. YIN from @audio/pitch-yin, run about twenty times a second, the median of the last few readings, and a gate on quiet so silence reads nothing.

import { useMicrophone } from "@/hooks/use-microphone";
import { usePitch } from "@/hooks/use-pitch";

const microphone = useMicrophone();
const pitch = usePitch(microphone.analyser, { reference: 440 });
// pitch.getSnapshot(): { name: "A", octave: 4, cents: -3, frequency, pitch, confidence } | null

<TunerDisplay source={pitch} />;

It returns a live source, so a reading costs no React render: subscribe in the leaf that shows it. The last note holds for holdMs after the sound stops, so a string's decay does not flicker. The Tuner is built on it.

Options · 6

useMicrophone useAudioLevels

Built by Ouest Labs, the source code is available on GitHub.

RSS