084a726c6dd87dba31016c769f7fb9e0e592bd2f
🎸 GuitarTeacher
An interactive, mobile-friendly web app for learning guitar - built entirely as a single HTML file with no dependencies or build tools required.
Live app: https://justinoros.github.io/guitar-teacher
Features
- 8 progressive lessons - from how to hold a guitar all the way to playing real songs
- Interactive fretboard - visual dot-based tab display showing exactly which string and fret to play
- Microphone pitch detection - the app listens through your mic and confirms when you play the right note
- 🎸 Play Along mode - a guitar icon moves across the fretboard dot by dot, waits for you to play each note, turns green when correct, and gives you encouragement when you finish
- 70+ songs across Country, Rock, Classic Rock, Pop, Folk/Indie, and Rap - searchable by title, artist, genre, or difficulty
- Browse by difficulty - filter songs by Beginner, Intermediate, or Advanced
- Lyrics links - one tap opens the lyrics on Genius or Google so you can sing along
- Morgan Wallen library - 12+ Morgan Wallen songs built in
- Offline-capable - once loaded, works without an internet connection
Song Library Includes
| Genre | Artists |
|---|---|
| Country | Morgan Wallen, Kane Brown, Luke Combs, Thomas Rhett, Luke Bryan, Brett Young, Ella Langley, Dierks Bentley, Keith Urban, Lady Antebellum, Josh Turner, Old Dominion, Bailey Zimmerman, Jason Aldean, Lee Brice |
| Classic Rock | Pink Floyd, Eagles, Eric Clapton, Van Morrison, Lynyrd Skynyrd, Bob Dylan, The Animals |
| Rock | Nirvana, Radiohead, The White Stripes, Deep Purple, The Cranberries, Bloodhound Gang, Gotye |
| Pop/Rock | Coldplay, Oasis, The Cranberries |
| Pop | Ed Sheeran, Sam Smith, Vance Joy, Lady Gaga |
| Folk/Indie | The Beatles, Jack Johnson, The Lumineers, Tracy Chapman |
| Rap | Dan Henig (acoustic Get Low) |
How to Use
Play Along
- Search for a song or browse by genre/difficulty
- Tap 🎸 Play Along - the mic turns on automatically
- Play the highlighted note on your guitar
- The dot turns green, the 🎸 icon moves to the next note
- Finish the song and get a word of encouragement!
Lessons (beginners)
Work through all 8 lessons in order:
- How to Hold a Guitar
- Reading Guitar Tab
- Your First Notes (open strings)
- Your First Chord: Em
- G, C, and D Chords
- Play-Along Songs
- Keep Going
- Search Any Song
Deployment
This is a single index.html file with no build step required.
GitHub Pages setup
- Fork or clone this repo
- Go to Settings → Pages
- Set Source to Deploy from branch → main → / (root)
- Your app will be live at
https://[your-username].github.io/guitar-teacher
Run locally
Just open index.html in any browser. No server needed.
Tech
- React 18 (loaded from CDN)
- Babel standalone (JSX transpiled in browser)
- Web Audio API for real-time pitch detection via autocorrelation
- SVG for fretboard rendering
- Zero npm dependencies, zero build tools
Contributing
Pull requests welcome! To add songs, edit the SONG_LIBRARY array in index.html. Each song follows this shape:
{
"title": "Song Title",
"artist": "Artist Name",
"genre": "Country",
"diff": "Beginner",
"chords": ["G", "C", "D"],
"capo": 0,
"parts": [
{
"name": "Verse",
"tab": {
"e": "--3---0---",
"B": "--3---1---",
"G": "--0---0---",
"D": "--0---2---",
"A": "--2---3---",
"E": "3---------"
},
"notes": ["G4", "C4", "D3"]
}
],
"tips": "Optional beginner tip for this song."
}
Tab strings must all be the same length. Notes use format E4, A2, G3 etc.
Made with ❤️ for guitar beginners everywhere.
Description
An interactive, mobile-friendly web app for learning guitar built entirely as a single HTML file with no dependencies or build tools required.
986 KiB
Languages
HTML
50.1%
JavaScript
49.9%