A practice layer on top of YouTube.
GuitarTuna users learn by watching YouTube. But YouTube has no loop, no pitch overlay, no tempo control. I built this extension at a Yousician internal hackathon to answer one question: what if you could practice with YouTube the same way you practice with GuitarTuna? Eight features shipped in 48 hours.
YouTube is a great teacher with no controls.
Learning to play guitar from YouTube tutorials is genuinely effective. Millions of players do it. But the YouTube player was built for passive watching, not active learning. You can’t loop a four-bar phrase. You can’t slow a lick down without installing a third-party app. You definitely can’t see the chord name of what’s being played at 00:43.
GuitarTuna already had the technology — pitch detection, BPM tracking, chord recognition. The problem was context: users were leaving the app to go to YouTube for lessons, then coming back to GuitarTuna to practise. The extension idea was to close that loop.
Content script as host.
Content Script
Injects into YouTube video pages. Detects player mount and attaches UI overlay.
YouTube IFrame API
Hooks into the YouTube player for playback control: rate, seek, loop boundaries.
Web Audio API
Captures tab audio for real-time pitch detection and BPM analysis in the overlay.
chrome.storage
Persists loop points, speed preferences, and session data across tabs and reloads.
Eight features, 48 hours.
A/B Section Loop
Set a start and end timestamp with two keystrokes. The video loops that segment endlessly until you clear it — the most-requested missing feature in YouTube.
Variable Speed Control
Fine-grained playback from 0.25× to 2×, with a dedicated slider in the overlay UI rather than YouTube’s buried settings menu. Preserves pitch at reduced speeds.
Live Pitch Detection
Reads tab audio via the Web Audio API and displays the detected note in real time. Useful for identifying the key of a tutorial or matching a reference pitch.
Chord Display Overlay
Analyses audio input and shows the most likely chord name above the player. Approximate, not perfect — but good enough for ear training and confirming what you heard.
Metronome Sync
A tap-tempo metronome that can sync to the detected BPM of the playing track. Outputs an audible click so you can practise in time without a separate app.
Practice Timer
Tracks time spent on a specific video or loop segment. Intended to map to GuitarTuna’s existing streak and session mechanics as a future integration point.
Session Bookmarks
Saves loop points and speed settings per video URL in chrome.storage.sync. Reloading the page or returning to the video restores your last practice setup automatically.
Keyboard Shortcuts
Full keyboard control for every feature: set loop in/out, adjust speed, toggle metronome, start/stop timer. Keeps hands on the guitar rather than the mouse.
What a hackathon teaches you.
Shipping eight features in two days means you become comfortable making fast decisions about what to cut, what to approximate, and what must work flawlessly. The loop feature had to be perfect — that was the core job. Pitch detection could be approximate. The timer just had to not lose state on reload.
Chrome Manifest v3 was the main technical friction. The migration from background pages to service workers broke several Web Audio API patterns. The solution was to do audio processing in the content script rather than the background script, which kept it inside the page’s audio context and sidestepped the service worker lifetime issue entirely.
The extension isn’t in the Chrome Web Store — it was an internal demo. But the experience of reading Chrome extension docs, shipping quickly, and navigating a browser API migration is directly transferable to the kind of technical SEO engineering I do in production.