Music Philosophy Art Math Chess Programming and much more ...
Click "Play reference tone", adjust your tone using the slider, and try to hit a pure fifth above the reference tone.
The Code For the basic version. To see the ongoing version, just choose "Show source"
const context = new (window.AudioContext || window.webkitAudioContext)();
const baseFrequency = 440; // The reference tone is always 440 Hz
const targetFrequency = baseFrequency * 1.5; // Perfect fifth (660 Hz)
const results = [];
function playTone(frequency, duration = 1.2) {
const oscillator = context.createOscillator();
const gainNode = context.createGain();
oscillator.type = 'sine';
oscillator.frequency.value = frequency;
oscillator.connect(gainNode);
gainNode.connect(context.destination);
oscillator.start();
gainNode.gain.setValueAtTime(1, context.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.001, context.currentTime + duration);
oscillator.stop(context.currentTime + duration);
}
function playReferenceTone() {
// Check if the "long tone" option is selected
const longTone = document.getElementById("longTone").checked;
const duration = longTone ? 3.0 : 1.2;
// Play the reference tone at 440 Hz without changing the slider
playTone(baseFrequency, duration);
}
function playUserTone() {
const freq = parseFloat(document.getElementById("pitchSlider").value);
playTone(freq);
}
function updateFrequencyLabel() {
const freq = parseFloat(document.getElementById("pitchSlider").value);
document.getElementById("userFreq").textContent = freq.toFixed(1);
}
function submitGuess() {
const guessedFreq = parseFloat(document.getElementById("pitchSlider").value);
const diffHz = guessedFreq - targetFrequency;
const ratio = guessedFreq / targetFrequency;
const centDiff = 1200 * Math.log2(ratio);
const msg = `Your tone: ${guessedFreq.toFixed(1)} Hz — Deviation: ${centDiff.toFixed(1)} cents (${diffHz.toFixed(1)} Hz)`;
results.push(msg);
updateResults();
}
function updateResults() {
const resultList = document.getElementById("results");
resultList.innerHTML = "";
results.slice().reverse().forEach(result => {
const li = document.createElement("li");
li.textContent = result;
resultList.appendChild(li);
});
}
// Init
updateFrequencyLabel();