Riff Boi

"I play a riff and the tabs just show up."

I've played guitar for six years, mostly technical metal and instrumental stuff. When I improvise I find riffs I want to keep, but stopping to write them down by hand kills the flow. Riff Boi listens while I play, writes the tab as I go, and saves the riff so I don't lose it.

I made it for the Beginner's Paradise – FirstCommit hackathon (2026).

Try it: https://riffboi.com (allow the mic when your browser asks)

What it does

• Writes tab live while you play single notes.
• Hears string bends and writes them like real tab: 7b9 for a bend, 7b9r7 for a bend and release, 7pb9r7 for a pre-bend.
• Draws the tab like a tab site (Songsterr style): string lines with the fret numbers on them, bar lines, and the rhythm underneath, at the tempo you set, in the time signature you pick (2/4 to 12/8). It can also work out the tempo from how you played (Auto detect tempo), even when your timing drifts a little, and says when it isn't sure. On a saved riff, typing a new tempo plays it faster or slower, and Detect tempo reads the rhythm again if the tempo was wrong. You can turn off Show note lengths to just see the notes.
• Saves each riff to a Latest Riffs list that's still there next time you open it. You can rename or delete riffs there, or delete them all (it asks first).
• Shows how sure it is about the tab, with a hint when something's off, like background noise or an out-of-tune guitar, and fades the notes it wasn't sure about, so you know which ones to check.
• Lets you write a tab by hand too (Write a tab): pick a string, a fret and a note value for each note.
• Keeps the real sound of each riff (your recording, or the file you uploaded), so you can listen to how you actually played it or download it. It's kept in your browser and never uploaded.
• Plays a riff back with a plucked-string sound, so you can hear what the tab says. For practice it can slow down (75% or 50%), loop, and click on the beat.
• Lets you fix a saved riff's tab: drag a note to another string (the string is a best guess), or tap it to change its fret, mark a hammer-on, pull-off or slide, mark a natural harmonic (written <12>), or delete it.
• Copies a riff as text tab (with bar lines), to paste into a message or a forum, or saves it as a .txt file (Save .txt).
• Says which key and scale a riff sounds like, like E minor pentatonic.
• Shares a riff with a link: the riff is packed into the link itself, so nothing is uploaded anywhere.
• Gets the tab of a recording too: upload an mp3, wav or m4a.
• Turns sheet music into tab: upload a MusicXML file (.musicxml, .xml or .mxl) and it picks strings and frets for the melody the same way, keeping the tempo and time signature. To start from a photo of sheet music, open it in Audiveris (free) and save it as MusicXML. It reads one melody, one note at a time; rests make the note before them longer for now.
• Camera (beta): watches your fretting hand to pick the right string. A 5-second setup shows it where your frets are: open Settings, turn on Camera (beta), tap Set up camera, play the 3rd fret and then the 12th fret on the low E, and it draws your frets on the video. The hand tracking is Google's MediaPipe, running in your browser; the video never leaves your device.
• Has a tuner built in.
• Tells you when it can't hear your guitar. It listens to your computer's default input, so to use an audio interface, pick it as the input in your computer's sound settings.

Run it

The quickest way is the live version at https://riffboi.com. To run it on your own computer instead, you'll need Chrome (other modern browsers should work too), Python 3 for a small local server (Macs usually have it already), a mic or an audio interface, and internet the first time the page loads, because it downloads the pitch detection library.

git clone https://github.com/riff-boi/riff-boi.git
cd riff-boi
python3 -m http.server 8000

On Windows, try py -m http.server 8000 if python3 doesn't work. No git? Click Code, then Download ZIP on GitHub, unzip it and open a terminal in that folder.

Then open http://localhost:8000 in Chrome, click New Riff, allow the mic and play some single notes. Click Stop to save the riff. On a computer, Space starts and stops recording too.

The server is needed because browsers block the mic and JavaScript modules on a page opened straight from a file. On localhost they're allowed.

No guitar around? A piano or keyboard app playing single notes should work too, or upload a recording of single notes.

If it can't hear your guitar, add ?debug to the address (like https://riffboi.com/?debug). The Recording and Tuner screens then show what the mic is picking up: how loud and how clear the sound is, its pitch, and whether the browser's sound is running. After a recording, ?debug can also save its readings (JSON) and its raw sound (WAV), for testing.

How it works

The browser's Web Audio API listens to the mic 60 times a second, and Pitchy works out the pitch of each slice of sound and how clear it is. js/notes.js turns those pitches into notes. It decides when a new note starts (a pick, a pitch change, a hammer-on) and ignores harmonics and background noise. It also follows the pitch closely to hear bends: a bend glides smoothly through the pitches in between, while a hammer-on or slide jumps from fret to fret. js/tab.js picks a string and fret for each note. The sound can't tell you which string you played, so it goes with the spot that needs the least hand movement, and it keeps bends away from the nut, where they're hard to play. js/rhythm.js turns when each note started into note values (quarter, eighth and so on) using your tempo and time signature, and it can work out the tempo from your playing when Auto is on. js/tabsvg.js draws the tab picture. js/confidence.js scores how clear, in tune, quiet and steady the notes were, and js/editor.js turns a tab you write by hand into the same kind of riff, js/playback.js plays a tab back with a plucked-string sound made from noise (the Karplus-Strong trick), js/upload.js reads a recording with the same steps as listening live, just all at once, js/musicxml.js reads the melody from sheet music saved as MusicXML, js/scale.js works out the key and scale, js/share.js packs a riff into a link, js/storage.js saves riffs in the browser's localStorage and js/sounds.js keeps each riff's real sound in IndexedDB, so there's no server and no accounts. For the camera beta, js/camera.js sends camera frames to MediaPipe's hand tracking, which runs in a background worker (js/hand-worker.js) so listening never has to wait for it, and js/neck.js works out where the frets are from the 2-note setup and which string fits where your hand was.

The full plan is in devpost/spec.md.

Built with

Plain HTML, CSS and JavaScript (no framework), the Web Audio API, Pitchy 4.1.0 from the jsDelivr CDN, localStorage, IndexedDB and the MediaRecorder API (for Your sound), MediaPipe's Hand Landmarker (tasks-vision) in a Web Worker for the camera beta, and the UnifrakturCook and Oswald fonts from Google Fonts. It's hosted on Vercel. Node.js is only used for the test scripts.

Tests

With Node.js 18 or newer:

node tools/check.mjs
node tools/score.mjs

check.mjs runs 244 checks on the note, bend, rhythm, time signature, tempo, tab, confidence, mic, saving, tab editor, playback, upload, scale finder and share link logic, no guitar needed. score.mjs scores Riff Boi against recordings of me playing, where I wrote down exactly what I played. Right now it gets 116 of 118 notes right (98%), including all 3 test bends, and puts all 87 checked notes on the right string.

What it can't do yet

It only hears single notes, so no chords or power chords yet. It assumes standard tuning. The string and fret are a best guess, because the sound doesn't say which string you played (drag a note on a saved riff to move it, or try the camera beta). A really soft first note can get missed. A pre-bend only shows up once you release it, since until then it sounds just like a normal note, and a very slow bend (slower than about 0.4 seconds for a whole step) can come out as separate notes. Auto tempo can come out at double or half speed (the same notes written twice as long or half as long), and with no steady beat it's only a guess (it says "not sure"). It doesn't write triplets yet. On an iPhone, the silent switch can mute playback. Uploaded recordings can be up to 5 minutes long.

How I made it

My planning docs and learning log are in devpost/: the scope, the product plan, the tech spec, the build checklist and notes on what I learned along the way.

AI use

I built Riff Boi with Claude Code as a coding partner. The idea, the features and the design choices were mine, and I recorded and labeled the test riffs and tested everything on my guitar. Claude Code wrote most of the code and tests and explained it to me as we went. It also helped write the docs, like this README and my Devpost story, from my notes.

Made by KoderNinja.