109 lines
3.7 KiB
Markdown
109 lines
3.7 KiB
Markdown
|
# 🎸 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](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
|
||
|
|
1. Search for a song or browse by genre/difficulty
|
||
|
|
2. Tap **🎸 Play Along** - the mic turns on automatically
|
||
|
|
3. Play the highlighted note on your guitar
|
||
|
|
4. The dot turns green, the 🎸 icon moves to the next note
|
||
|
|
5. Finish the song and get a word of encouragement!
|
||
|
|
|
||
|
|
### Lessons (beginners)
|
||
|
|
Work through all 8 lessons in order:
|
||
|
|
1. How to Hold a Guitar
|
||
|
|
2. Reading Guitar Tab
|
||
|
|
3. Your First Notes (open strings)
|
||
|
|
4. Your First Chord: Em
|
||
|
|
5. G, C, and D Chords
|
||
|
|
6. Play-Along Songs
|
||
|
|
7. Keep Going
|
||
|
|
8. Search Any Song
|
||
|
|
|
||
|
|
## Deployment
|
||
|
|
|
||
|
|
This is a single `index.html` file with no build step required.
|
||
|
|
|
||
|
|
### GitHub Pages setup
|
||
|
|
1. Fork or clone this repo
|
||
|
|
2. Go to **Settings → Pages**
|
||
|
|
3. Set Source to **Deploy from branch → main → / (root)**
|
||
|
|
4. 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:
|
||
|
|
|
||
|
|
```json
|
||
|
|
{
|
||
|
|
"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.
|