Component Preview

Interactive demonstration of the ChordWheel component

🎛️ Interactive Controls

ChordWheel component loaded! Use the controls above to interact with the component.

Component Overview

The ChordWheel component provides an intuitive circular interface for playing chords, featuring major chords on the outer ring and minor chords on an inner ring. It supports multiple progression modes and harmonic relationships.

This interactive demo allows you to explore all the features and capabilities of the ChordWheel component. Use the controls above to modify the component's behavior and see the results in real-time.

🎹 Keyboard Controls

You can play chords using your computer keyboard:

  • Number Keys 1-12: Play the corresponding chord buttons
  • Key 1: 12 o'clock position (top chord)
  • Keys 2-12: Proceed clockwise around the chord wheel
  • Multiple Keys: Press multiple number keys simultaneously for layered chords

🎡 Chord Modes

  • Circle of Fifths: Chords arranged in perfect fifths for smooth harmonic transitions
  • Diatonic: Chords from the current key's scale (I, ii, iii, IV, V, vi, vii°)
  • Chromatic: All 12 chromatic chords for maximum harmonic freedom
  • Jazz ii-V-I: Common jazz progression patterns with extended harmonies
  • Blues: Classic blues progression chords (I, IV, V) with 7th extensions

API Reference

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

Attributes

  • key: Musical key (C, C#, D, D#, E, F, F#, G, G#, A, A#, B)
  • scale: Scale type (major, minor)
  • mode: Chord progression mode (circle-of-fifths, diatonic, chromatic, jazz-ii-v-i, blues)
  • size: Visual size (small, medium, large)

Events Received

  • set-key: Changes the chord wheel's key and scale
  • set-mode: Changes the chord progression mode
  • mute: Mutes all audio output
  • unmute: Unmutes audio output

Events Dispatched

  • chord-played: When a chord is played (contains chord, notes, duration, index)
  • key-changed: When key/scale changes (contains key, scale, chords)
  • mode-changed: When progression mode changes (contains mode, chords)

Component Events

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

  • Chord Playback: Fired when chords are played, including chord data and notes
  • Key Changes: Fired when the musical key is modified
  • Mode Changes: Fired when the chord progression mode is modified
  • Scale Changes: Fired when the scale type is modified
  • Audio Events: Mute/unmute and audio context status changes

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

Usage Examples

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

Basic Usage

<chord-wheel></chord-wheel>

With Properties

<chord-wheel key="G" scale="major" mode="diatonic" size="large"></chord-wheel>

Event Listeners

chordWheel.addEventListener('chord-played', handleChordPlayed);

chordWheel.addEventListener('key-changed', handleKeyChanged);

chordWheel.addEventListener('mode-changed', handleModeChanged);

Programmatic Control

chordWheel.setAttribute('key', 'F');

chordWheel.setAttribute('mode', 'blues');

chordWheel.dispatchEvent(new CustomEvent('mute'));

Event Log

Component initialized