Circle of Fifths

Interactive music theory education with visual and audio feedback

Learning music theory through an interactive Circle of Fifths visualization. This educational tool combines visual design with audio feedback to help users understand key relationships, scales, and chord progressions.

JavaScript Web Audio API Music Theory Visualization
View on GitHub Live Demo
Screenshot of Circle of Fifths

The Problem

Learning music theory traditionally requires memorizing abstract relationships between keys, scales, and chords. The Circle of Fifths is fundamental to understanding Western music, but static diagrams fail to convey the auditory relationships between notes.

The Solution

Created an interactive visualization that combines the visual Circle of Fifths with Web Audio API synthesis. Users can click any key to hear its root note, instantly understanding the relationship between visual position and pitch.

The Results

  • Interactive circle showing all 12 major and minor keys
  • Real-time audio synthesis using Web Audio API
  • Visual display of relative major/minor relationships
  • Perfect fifth and fourth interval highlighting
12 major
Keys
Web Audio
Audio
All 12
Intervals
<10ms
Latency

The Circle of Fifths is an interactive visualization for learning music theory. Combining visual design with audio feedback, it helps users understand key relationships, scales, and chord progressions.

Circle of Fifths

CGDAEBF#DbAbEbBbFAmEmBmF#mC#mG#mD#mBbmFmCmGmDmClick
C Major
Relative minor: Am

Perfect Fifth: G

Perfect Fourth: F

Click any key to hear its root note. The outer ring shows major keys, inner ring shows relative minors.

Key Features

  • Interactive Visualization: Click and explore the circle of fifths
  • Audio Feedback: Hear scales and chords using Web Audio API
  • Key Relationships: Understand relative majors/minors and chord progressions
  • Educational Design: Clear visual representation of music theory concepts

Technical Implementation

The Web Audio API provides real-time audio synthesis:

const A4_FREQUENCY = 440; // Hz
const SEMITONE_RATIO = Math.pow(2, 1/12);

function noteToFrequency(note, octave) {
  const noteIndex = ['C', 'C#', 'D', 'D#', 'E', 'F', 
                     'F#', 'G', 'G#', 'A', 'A#', 'B'].indexOf(note);
  const semitonesFromA4 = (octave - 4) * 12 + (noteIndex - 9);
  return A4_FREQUENCY * Math.pow(SEMITONE_RATIO, semitonesFromA4);
}

Each key in the circle is positioned 30 degrees apart, representing the perfect fifth interval that defines the circle’s structure.

Was this helpful?