ARMAGEDDON POP

Music Philosophy Art Math Chess Programming and much more ...

April
5
Saturday
2025
2025 04 05

Simple and fun



Hit the Fifth

Click "Play reference tone", adjust your tone using the slider, and try to hit a pure fifth above the reference tone.




Your tone: 440.0 Hz

Results

    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();