Skip to content

zejiran/frettar

Repository files navigation

Logo

🎸 Frettar

A modern, interactive web application for marking guitar fret positions, designed specifically for guitar classes and music education.
Create fretboard maps now »

This fretboard map maker allows you to export your layout creations as images to share them, perfect for creating note layouts on the fretboard to represent scales, chords, and more.

UI Screenshot

✨ Features

🎯 Interactive Fretboard

  • 24-fret guitar fretboard with standard tuning (E-A-D-G-B-E)
  • Click to select/deselect any fret position
  • Visual note names displayed on each fret
  • Fret markers at traditional positions (3rd, 5th, 7th, 9th, 12th, etc.)

🔊 Audio Playback

  • Real-time note playback - hear guitar notes when clicking frets
  • Adjustable note duration - control how long notes play (0.5s - 5s)
  • Volume control - adjust playback volume with slider
  • Play all notes - play all selected frets simultaneously as a chord
  • Web Audio API - realistic guitar-like sound synthesis
  • Browser compatible - works across modern browsers

🎨 Customization

  • Color picker with predefined color palette
  • Custom color selection for different marking categories
  • Text annotations - right-click any selected fret to add notes

💾 Save & Load System

  • Local storage - all data saved in your browser
  • Named configurations - save multiple fretboard setups
  • Search and filter saved configurations
  • Export/import configurations as JSON files
  • Delete management with confirmation prompts

📸 Export Options

  • PNG image export - download your fretboard as an image with custom titles
  • Custom titles - add titles that appear on exported images

📚 Educational Features

  • Perfect for guitar classes and music education
  • Chord diagrams - mark chord positions and fingerings
  • Scale patterns - visualize scale shapes across the fretboard
  • Music theory - show intervals, note relationships with both sharp/flat notation
  • Practice aids - create custom exercises and patterns
  • Enharmonic equivalents - displays both sharp and flat names (e.g., C#/Db)
  • Audio learning - combine visual and auditory learning for better retention
  • Interactive exercises - students can hear what they're marking on the fretboard

📝 License

License

Logo

About

🎵 Your guitar fretboard map maker

Topics

Resources

License

Stars

Watchers

Forks

Contributors