Music Theory Tutor
Learn Notes
Press the button to hear a note.
Learn Scales
Learn Chords
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #333;
color: white;
padding: 20px 0;
}
h1, h2 {
margin: 10px 0;
}
button {
padding: 10px 20px;
font-size: 16px;
margin: 10px;
cursor: pointer;
}
button:hover {
background-color: #ddd;
}
section {
margin: 20px auto;
width: 80%;
max-width: 600px;
padding: 10px;
background-color: white;
border: 1px solid #ccc;
border-radius: 10px;
}
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
function playFrequency(frequency) {
const oscillator = audioContext.createOscillator();
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);
oscillator.connect(audioContext.destination);
oscillator.start();
oscillator.stop(audioContext.currentTime + 1); // Play note for 1 second
}
const notes = {
C: 261.63,
D: 293.66,
E: 329.63,
F: 349.23,
G: 392.00,
A: 440.00,
B: 493.88
};
function getRandomNote() {
const noteNames = Object.keys(notes);
const randomNote = noteNames[Math.floor(Math.random() * noteNames.length)];
return { name: randomNote, frequency: notes[randomNote] };
}
function playNote() {
const randomNote = getRandomNote();
playFrequency(randomNote.frequency);
document.getElementById('note-name').textContent = `You played: ${randomNote.name}`;
}
const scales = {
'C': [261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 493.88],
'G': [392.00, 440.00, 493.88, 523.25, 587.33, 659.25, 739.99],
'A': [440.00, 493.88, 523.25, 587.33, 659.25, 698.46, 783.99]
};
function playScale() {
const selectedScale = document.getElementById('scale-select').value;
const scaleNotes = scales[selectedScale];
scaleNotes.forEach((frequency, index) => {
setTimeout(() => {
playFrequency(frequency);
}, index * 500); // Play each note half a second apart
});
}
const chords = {
'Cmaj': [261.63, 329.63, 392.00],
'Gmaj': [392.00, 493.88, 587.33],
'Amin': [440.00, 523.25, 587.33]
};
function playChord() {
const selectedChord = document.getElementById('chord-select').value;
const chordNotes = chords[selectedChord];
chordNotes.forEach(frequency => {
playFrequency(frequency);
});
}
