Riffs

Riffs is a creative music app where you can hum a melody, convert it into guitar tabs, edit it, and jam out in a Guitar Hero-style game-play experience.

Comment 1

🎸 Riffs — Hum. Play. Create.

🧠 Inspiration

Learning guitar often feels intimidating. Traditional tools rely on robotic MIDI playback, confusing tabs, or assume you have a studio setup. We wanted to create something that feels natural, creative, and instant.
Riffs was born from a simple idea:

Hum a melody, and immediately turn it into something you can build on.

💡 What it does

Riffs is a browser-based tool that lets users:

  1. Hum a melody into their microphone
  2. Detect the pitches and convert them into notes
  3. Automatically map those notes to guitar string+fret positions
  4. Display the result on a piano-roll-style editor
  5. Allow full editing of notes with click, drag, and delete interactions

It’s a seamless pipeline from voice to visual melody creation — all in-browser, no plugins required.

🛠️ How we built it

  • pitchy – for pitch detection
  • TypeScript – to ensure strong type safety
  • React – for dynamic UI
  • TailwindCSS – for rapid and clean styling
  • FL Studio – to generate authentic piano and guitar samples

🚧 Challenges we ran into

  • Pitch detection in a noisy hackathon environment
  • Accurately converting notes realistic guitar positions
  • Designing a piano roll editor that feels intuitive and musical
  • Managing app state across pages without a backend

🏆 Accomplishments we're proud of

  • Built a custom visual note editor from scratch in under 36 hours
  • Seamlessly converted voice input into playable, editable data
  • Used real guitar samples for future playback instead of default MIDI
  • Delivered a clean UX with clear and musical visual feedback

📚 What we learned

  • Real-time browser audio processing is very possible
  • Less is more when it comes to UI/UX in creative tools
  • A good editing experience doesn’t need audio playback to feel musical
  • Pitch-to-note conversion is a powerful creative bridge

🚀 What's next for Riffs

  • Integrating our guitar samples for live playback
  • Adding tempo, measure lines, and rhythmic structure
  • Supporting multiple tracks or layers
  • Saving riffs to the cloud and letting users remix each other's melodies
  • Exporting riffs to MIDI, tablature, or Guitar Pro formats
  • Exploring AI tools to suggest chords or harmonize based on your input

🌟 TL;DR

Riffs is a musical sandbox for guitarists and creators.
Hum your melody. See it. Shape it. Share it.

Built With

+ 19 more
Share this project:

Updates