Chromatic Harmony 101
Chromatic Harmony 101: Add Color to Your Music
Explore the vibrant world of chromatic harmony through interactive learning and musical experimentation
Interactive Chromatic Piano
Click the keys to hear the difference between diatonic and chromatic notes. Chromatic notes are highlighted in gold.
Tempo:
120 BPM
Chromatic Chord Progressions
Experience how chromatic chords add emotional depth to traditional progressions.
Key Selection
Progression Type
Understanding Chromatic Harmony
What is Chromatic Harmony?
Chromatic harmony involves notes outside the primary key's diatonic scale, introducing tension and color that can transform a piece from predictable to captivating. These notes act as secondary hues, blending in to create shades that evoke nuance and complexity.
Example:
In C major, the notes C-D-E-F-G-A-B are diatonic. Adding notes like C#, D#, F#, G#, A# creates chromatic color.
Secondary Dominants
Secondary dominants temporarily tonicize non-tonic chords, adding forward momentum. This creates a chain of resolutions, propelling the music with enhanced harmonic interest.
Example:
In C major: C - A7 - Dm - G7 - C. The A7 is V7/vi, creating temporary tension before resolving to Dm.
Chromatic Mediants
Chromatic mediants offer relational shifts between chords sharing one common tone while differing by thirds. This technique bridges distant keys, facilitating modulations that feel organic rather than abrupt.
Example:
C major to E♭ major: Both share the note G, but E♭ major creates a darker, more mysterious color.
Harmonic Visualization
Watch how chromatic harmony creates visual patterns in 3D space, representing tension and resolution.
Chromatic Composer
Create your own chromatic progressions and hear them instantly.
Chord Palette
Your Progression
Click chords above to build your progression
Implementation Code
Explore the Web Audio API code that powers this chromatic harmony experience.
ChromaticHarmonyEngine.js
// Chromatic Harmony Engine
class ChromaticHarmonyEngine {
constructor() {
this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
this.masterGain = this.audioContext.createGain();
this.masterGain.connect(this.audioContext.destination);
this.masterGain.gain.value = 0.3;
}
// Generate chromatic chord with tension values
generateChromaticChord(root, quality, chromaticTension = 0) {
const frequencies = this.getChordFrequencies(root, quality);
// Add chromatic alterations based on tension
if (chromaticTension > 0.3) {
frequencies.push(frequencies[2] * Math.pow(2, 1/12)); // Add sharp 5th
}
if (chromaticTension > 0.6) {
frequencies.push(frequencies[0] * Math.pow(2, 10/12)); // Add 7th
}
return frequencies;
}
// Create secondary dominant
createSecondaryDominant(targetChord, key) {
const fifthAbove = (targetChord + 7) % 12;
return this.generateChromaticChord(fifthAbove, 'dominant7', 0.8);
}
// Play chord progression with chromatic analysis
playProgression(chords, tempo = 120) {
const chordDuration = 60 / tempo;
let currentTime = this.audioContext.currentTime;
chords.forEach((chord, index) => {
const chromaticContent = this.analyzeChromaticContent(chord);
this.playChord(chord.frequencies, currentTime, chordDuration, chromaticContent);
currentTime += chordDuration;
});
}
// Analyze chromatic content in chord
analyzeChromaticContent(chord) {
const diatonicNotes = [0, 2, 4, 5, 7, 9, 11]; // C major scale
let chromaticCount = 0;
chord.notes.forEach(note => {
if (!diatonicNotes.includes(note % 12)) {
chromaticCount++;
}
});
return chromaticCount / chord.notes.length;
}
}
// Usage Example
const engine = new ChromaticHarmonyEngine();
const progression = [
{ root: 0, quality: 'major' }, // C major
{ root: 9, quality: 'dominant7' }, // A7 (V7/vi)
{ root: 2, quality: 'minor' }, // D minor
{ root: 7, quality: 'dominant7' }, // G7
{ root: 0, quality: 'major' } // C major
];
engine.playProgression(progression, 120);
留言
發佈留言