Skip to content

zejiran/frettar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

47 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

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