shadcn.io is not affiliated with official shadcn/ui
Instrument Tuner Music Block for Ark UI
A needle tuner with no microphone: an instrument group, tappable strings, an Auto switch, a half dial with signed cents and the word Flat, In tune or Sharp, a simulated pitch slider in cents, and Next sample through six typed readings.
Installation
Overview
Show how a tuner reads without listening, with this instrument tuner for React with Ark UI. It holds Needlepitch, an instrument tuner, in a hairline frame with a plus mark on each corner. A Segment Group picks Guitar, Bass, Ukulele or Violin, an Auto Switch tunes to the string nearest the pitch (or you press a string to tune to it), and a half dial draws a needle from 50 cents flat to 50 sharp. The signed cents, the word Flat, In tune (within 5 cents) or Sharp, the target string with its frequency, and the nearest note are all worked out from the pitch. A Slider moves the simulated pitch a cent at a time, and the Shine Button Next sample jumps through six typed readings of plucked strings. No microphone is used: the pitch comes from the slider and the sample list. It's built from Segment Group, Switch, Slider, Shine Button and Guides, with a drawn dial and a CSS entrance only. For instrument-learning, practice and music-tool apps.
FAQ
How do I add an instrument or change the samples?
Add an entry to INSTRUMENTS with its strings as MIDI note numbers, lowest first (a guitar is 40, 45, 50, 55, 59, 64), and a list of samples, each naming a string by its place in the list and how many cents sharp or flat it is. The string names, their frequencies, the slider's range and the dial are all drawn from those numbers, so nothing is typed twice.
How are the cents and the frequency worked out?
The pitch is kept as whole cents above the lowest MIDI note, so the distance to a string is a subtraction, never a logarithm: 108 cents above A2 is 108 cents sharp. Only the frequency uses a power of two, 440 times 2 to the power of the cents above A4 over 1200, written to one decimal. Within 5 cents the word is In tune; the needle stops at 50 cents either way, and the number keeps counting.
Why no microphone, and how would I make it real?
A demo that asks for a microphone permission is not something a gallery page should do, and the pitch it heard would depend on your room. This one says on screen that no microphone is used, and the sample pitches are typed. To make a real tuner, ask for the microphone in your app, estimate the pitch from the audio, and pass it to the same dial as cents above the lowest string.
How do I use it from the keyboard?
Tab to the instrument group and use the arrow keys, then to the Auto switch, then to the strings, which are a radio group: pressing one turns Auto off and tunes to it. On the slider, the arrow keys move the pitch by one cent and Page Up and Page Down by more; the status line says the frequency and the reading when you stop. The dial and slider stay left to right in a right-to-left page.