Learning guitar can be overwhelming. Traditional tools rely on robotic MIDI sounds, hard-to-read tabs, or assume you’ve got a full studio setup. I wanted to build something simple and intuitive — where creativity starts with your voice.
Riffs was born from a single idea:
Hum a melody, and immediately turn it into something you can build on.
Riffs is a browser-based tool that lets users:
- 🎤 Hum a melody into their microphone
- 🎼 Detect and convert pitch into musical notes
- 🎸 Map notes to guitar strings and frets
- 🎹 Visualize them in a piano-roll-style editor
- ✏️ Edit notes directly via click, drag, or delete
All of this happens in-browser — no plugins, no installations.
Next.js– Core web frameworkTypeScript– Strong typing for safety and scalabilityReact– Interactive and modular frontendTailwindCSS– Rapid, utility-first stylingpitchy– Real-time pitch detectionFL Studio– Source of authentic piano/guitar sample sounds
- Handling noisy environments for accurate pitch detection
- Mapping pitch to realistic guitar fret/string combinations
- Designing an intuitive piano-roll UI
- Managing state cleanly across a backend-less architecture
- Built a fully custom, interactive visual note editor from scratch
- Created a voice-to-note pipeline in under 36 hours
- Delivered smooth UX using real guitar samples, not generic MIDI
- Made a creative tool that feels responsive and musical
- Real-time audio processing is viable directly in the browser
- Simplicity in UI is key for creative tools
- Pitch-to-note conversion bridges the gap between idea and sound
- Great UX can exist even without real-time audio playback
- Add playback using real guitar/piano samples
- Introduce tempo, measures, and rhythmic structure
- Support multi-track editing and harmonies
- Enable cloud saving and melody remixing
- Export to formats like MIDI, tablature, or Guitar Pro
- Integrate AI-based suggestions and harmony generation
Riffs is a musical sandbox for guitarists and creators.
- GitHub: @SecretariatV
- Email: oliver.b25.f@gmail.com
- Telegram: @ares_orb
- Twitter (X): @OVB_Coder