A fun, interactive web app for learning to read musical notes on treble and bass clefs. Perfect for piano students, music theory beginners, or anyone wanting to improve their sight-reading skills!
- Four Practice Modes:
- Staff → Piano: See a note on staff, identify it on piano or buttons
- Piano → Staff: See a highlighted piano key, place the note on staff
- Duration Practice: Learn note values (Semibreve, Minim, Crotchet, Quaver, Semiquaver)
- Place Duration: Combine duration and pitch - place specific note types at specific positions
- Interactive Learning: Click buttons, piano keys, or staff positions
- Dual Clef Support: Practice treble clef, bass clef, or both
- Visual Piano Keyboard: See the connection between staff notation and piano keys
- Sharps and Flats: Optional practice with accidentals
- Learning Aids:
- Show Middle C reference guide
- Display helpful mnemonics (Every Good Boy Does Fine, etc.)
- Toggle piano key labels on/off
- Hover preview when placing notes on staff
- Progress Tracking: Score counter and streak tracking
- Audio Feedback: Hear the correct note when you get it right
- Responsive Design: Works great on desktop and mobile devices
- Keyboard Support: Use your computer keyboard (A-G keys) for quick practice
Visit https://jonathanleane.github.io/ClefHanger/ to start practicing immediately!
-
Clone this repository:
git clone https://github.com/jonathanleane/ClefHanger.git cd ClefHanger -
Open
index.htmlin your web browseropen index.html # macOS # or start index.html # Windows # or just drag the file into your browser
That's it! No build process or dependencies required.
- A note appears on the musical staff
- Identify the note by either:
- Clicking the letter button (C, D, E, F, G, A, B)
- Clicking the corresponding piano key
- Pressing the letter on your keyboard
- Get instant feedback and hear the note when correct
- A piano key is highlighted
- Click on the staff where that note should be placed
- See a preview as you hover over the staff
- Get feedback on your placement accuracy
- A note with a specific duration appears on the staff
- Identify how many beats it gets (4, 2, 1, ½, or ¼)
- Learn both American names (Whole, Half, etc.) and British names (Semibreve, Minim, etc.)
- You're given an instruction like "Place a Semibreve on C"
- First, select the correct duration from the buttons
- Then, click on the staff at the correct pitch
- Get specific feedback on what was wrong (if anything)
- Start with one clef: Uncheck one of the clef options to focus on just treble or bass
- Use the helpers: Turn on "Show Middle C" and "Show Mnemonics" for visual guides
- Remember the mnemonics:
- Treble lines: Every Good Boy Does Fine (E-G-B-D-F)
- Treble spaces: FACE (F-A-C-E)
- Bass lines: Good Boys Do Fine Always (G-B-D-F-A)
- Bass spaces: All Cows Eat Grass (A-C-E-G)
Built with vanilla JavaScript, HTML5, and CSS3. No frameworks or build tools required!
- Pure JavaScript: No dependencies, lightweight and fast
- SVG Graphics: Clean, scalable musical notation
- Web Audio API: For playing note sounds
- Responsive CSS: Adapts to any screen size
- Local Storage: (Coming soon) Save your progress and settings
Works on all modern browsers:
- Chrome / Edge
- Firefox
- Safari
- Mobile browsers (iOS Safari, Chrome for Android)
Contributions are welcome! Feel free to:
- Report bugs
- Suggest new features
- Submit pull requests
- Difficulty levels (limited note ranges for beginners)
- Timed practice mode
- Progress statistics and charts
- More instrument sounds
- Ledger line practice mode
- Interval training
- Chord recognition
This project is open source and available under the MIT License.
- Inspired by the need for a simple, free tool to practice note reading
- Thanks to all music teachers who use mnemonics to help students learn
Made with ❤️ for music learners everywhere. Happy practicing!