shadcn.io is not affiliated with official shadcn/ui
Ear Training Music Block for Vue
An interval trainer with no sound: a drawn two-octave keyboard lights two notes, you name the interval from four options, three typed ten-question decks by difficulty, a reference tune after Check, score and streaks, and a results card.
Installation
Overview
Teach intervals by showing them, with this ear-training trainer for Vue with Ark UI. It holds Earquest, an ear-training app, in a hairline frame with a plus mark on each corner. A drawn two-octave keyboard lights two keys, 1 for the root and 2 for the note above it, and you name the interval from four options; press 1 to 4 to choose, then Enter or the Shine Button to check. A Segment Group picks the difficulty: Beginner has the minor 3rd to the octave, Intermediate and Advanced add more, each a typed deck of ten questions in a fixed order. Check gives the notes, the semitone count and a reference tune, and the strip keeps the score and the streak with the best streak. After the tenth, a results card lists all ten with Play again. This demo shows the interval instead of playing it; with audio the notes would sound. It's built from Segment Group, Shine Button, Sliding Number and Guides, with a drawn keyboard and a CSS entrance only. For ear-training, theory and music-education apps.
FAQ
How do I write my own decks?
Edit the three parse lists: each line is the root note as a MIDI number (60 is middle C), the number of semitones up, and the four options, which are semitone counts in rising order. INTERVALS holds every interval's name and its reference line. The keyboard, the options, the answer and the results are all drawn from those lines. Keep the top note at 83 or lower, which is the top key of the drawn keyboard.
Why does nothing play, and how would I add sound?
The block never creates an audio context: it shows the interval and says so on screen, which keeps the demo silent and the same for everyone. To add sound, play the root and then the second note with an audio engine when a question appears, from the MIDI numbers already in the deck, and add a Replay button next to the keyboard.
How are the score and streaks worked out?
They are derived from the list of results, a correct or missed entry per question. The score counts the correct ones, the streak counts correct answers in a row at the end, and the best streak is the longest run anywhere. Changing the difficulty starts a new round and clears them.
How do I use it from the keyboard?
Tab to the difficulty group and use the arrow keys, then to the options: press 1 to 4 to choose one, then Enter to check, and Enter again for the next question, which moves focus to its heading. Choosing does not check, so a stray key costs nothing. A screen reader hears the root and the second note by name in the keyboard's caption, since the lit keys cannot be seen.