---
title: "Circle of Fifths"
description: "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."
impact: "Interactive music theory education with visual and audio feedback"
github_url: "https://github.com/cameronrye/circle-of-fifths"
demo_url: "https://cameronrye.github.io/circle-of-fifths/"
technologies: ["JavaScript", "Web Audio API", "Music Theory", "Visualization"]
featured: false
order: 14
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."
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."
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"]
metrics: [{"label":"Keys","value":"12 major"}, {"label":"Audio","value":"Web Audio"}, {"label":"Intervals","value":"All 12"}, {"label":"Latency","value":"<10ms"}]
canonical_url: https://rye.dev/projects/circle-of-fifths/
---

import CircleOfFifthsDemo from '../../components/demos/CircleOfFifthsDemo.tsx';

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.

<div class="my-8 p-6 bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm rounded-xl border border-gray-200/50 dark:border-gray-700/50">
  <CircleOfFifthsDemo client:visible />
</div>

## 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:

```javascript
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.