🎸 Fretboard Demo

Scales & Numbers

Understanding musical scales and their fretboard representations is crucial for musicians. The Fretboard component supports various scale types and provides a clear visual representation of notes.

🎵 Scale Types

Understanding the different types of musical scales helps you choose the right sound for your music. Each scale has its own unique character and emotional quality:

• Major Scale: The foundation of Western music, featuring a bright, happy sound. Pattern: Root, Major 2nd, Major 3rd, Perfect 4th, Perfect 5th, Major 6th, Major 7th
• Natural Minor Scale: A more relaxed, melancholic scale. Pattern: Root, Major 2nd, Minor 3rd, Perfect 4th, Perfect 5th, Minor 6th, Minor 7th
• Harmonic Minor Scale: Similar to natural minor but with a raised 7th, creating tension. Common in classical and flamenco music.
• Melodic Minor Scale: A jazz favorite that raises both 6th and 7th when ascending, natural minor when descending.
• Pentatonic Scales: Five-note scales that are easy to play and sound great. Major pentatonic removes the 4th and 7th from major scale.
• Blues Scale: A six-note scale that adds a "blue note" (flattened 5th) to the minor pentatonic.
• Dorian Mode: A minor scale with a major 6th, giving it a jazzy, sophisticated feel.
• Phrygian Mode: A minor scale with a flattened 2nd, creating an exotic, Spanish sound.

🔢 Understanding the Numbers

When you display a scale on the fretboard, you'll see numbers that represent different aspects of the scale:

Scale Degrees (1, 2, 3, 4, 5, 6, 7)

• 1 (Root): The starting note of the scale - this is your "home base"
• 2 (Second): The second note, usually a whole step above the root
• 3 (Third): Determines if the scale is major (major 3rd) or minor (minor 3rd)
• 4 (Fourth): The fourth note, often used in chord progressions
• 5 (Fifth): The fifth note, very stable and commonly used in power chords
• 6 (Sixth): The sixth note, adds color to the scale
• 7 (Seventh): The seventh note, creates tension that resolves to the root

Intervals (0, 2, 4, 5, 7, 9, 11)

These numbers represent the distance in semitones from the root note:

• 0: Root note (0 semitones from root)
• 2: Major 2nd (2 semitones from root)
• 4: Major 3rd (4 semitones from root)
• 5: Perfect 4th (5 semitones from root)
• 7: Perfect 5th (7 semitones from root)
• 9: Major 6th (9 semitones from root)
• 11: Major 7th (11 semitones from root)

🎯 How to Use the Scale Display

1. Select a Scale Root: Choose the starting note (C, D, E, F, G, A, B)
2. Choose Scale Type: Pick the scale pattern (Major, Minor, Pentatonic, etc.)
3. View the Pattern: The fretboard will highlight all notes of that scale
4. Practice Patterns: Use the highlighted notes to practice scales and improvisation

💡 Practical Tips

• Start with Major Scales: They're the foundation for understanding other scales
• Learn the Root Note: Always know where your root note is - it's your anchor
• Practice in Different Positions: Try playing the same scale starting from different frets
• Use for Improvisation: The highlighted notes are safe to use when soloing in that key
• Combine with Chords: Scales and chords work together - learn which scales fit with which chord progressions

🎸 Example: C Major Scale

When you select C Major scale, you'll see:

• Root (1): C notes highlighted in a special color
• Scale Notes: C, D, E, F, G, A, B all highlighted across the fretboard
• Pattern: The same pattern repeats every 12 frets (one octave)

This scale works perfectly with C major chords and can be used for soloing in the key of C.

🧪 Try This Exercise

Practice this common scale pattern to improve your fretboard knowledge:

1. Select C Major Scale: Use the controls above to set root to "C" and type to "Major"
2. Find the Root Notes: Look for the specially colored C notes (these are your "home base")
3. Play the Scale: Start from any C note and play up the scale: C → D → E → F → G → A → B → C
4. Try Different Positions: Move to a different C note and play the same pattern
5. Experiment with Other Keys: Try G Major (G, A, B, C, D, E, F#) or F Major (F, G, A, Bb, C, D, E)

💡 Pro Tip: Notice how the same scale pattern appears in different positions across the fretboard. This is called "position playing" and is essential for advanced guitar techniques.

API Reference

The Fretboard component provides a comprehensive API for integration into your applications.

Properties: Configure the component with various properties to customize its behavior.

Methods: Programmatically control the component using built-in methods for chord display and scale patterns.

Events: Listen to component events to respond to user interactions and state changes.

Component Events

The Fretboard component emits various events that you can listen to:

• Initialization: Fired when the component is ready for use

• Note Selection: Fired when users click on fret positions

• Chord Changes: Fired when chord patterns are displayed

• Scale Changes: Fired when scale patterns are updated

View the Event Log tab to see real-time events as they occur.

Usage Examples

Here are some common ways to use the Fretboard component in your projects:

Basic Usage:
<fretboard></fretboard>

With Properties:
<fretboard instrument="guitar" tuning="standard"></fretboard>

Event Listeners:
fretboard.addEventListener('noteselect', handleNoteSelect);

Event Log