🎸 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.

3.7 KiB Raw Permalink Blame History