Loudness Difference Game
Listen to the original and altered versions of the audio, and guess the gain difference in dB.
document.addEventListener(‚DOMContentLoaded‘, function () { // Audio file URL const audioURL = ‚https://jannis.herberteden.de/wp-content/uploads/sites/21/2025/01/Rhodes.9.1.mp3‘; // Random dB adjustment within -12 to +12 dB const dBAdjustment = (Math.floor(Math.random() * 49) – 24) / 2; // -12 to +12 in 0.5 steps const gainFactor = Math.pow(10, dBAdjustment / 20); // Convert dB to gain factor // Audio Context and Nodes const audioContext = new (window.AudioContext || window.webkitAudioContext)(); let audioBuffer = null; let isPlayingOriginal = true; // Create Gain Node const gainNode = audioContext.createGain(); // Fetch and Decode Audio fetch(audioURL) .then(response => response.arrayBuffer()) .then(data => audioContext.decodeAudioData(data)) .then(buffer => { audioBuffer = buffer; document.getElementById(‚play-original‘).disabled = false; document.getElementById(‚play-altered‘).disabled = false; document.getElementById(’submit-guess‘).disabled = false; }) .catch(error => console.error(‚Error loading audio:‘, error)); // Play Audio function playAudio(useAlteredGain) { const sourceNode = audioContext.createBufferSource(); sourceNode.buffer = audioBuffer; sourceNode.loop = true; if (useAlteredGain) { gainNode.gain.value = gainFactor; } else { gainNode.gain.value = 1; } sourceNode.connect(gainNode).connect(audioContext.destination); sourceNode.start(0); return sourceNode; } let currentSource = null; // Event Listeners for Buttons document.getElementById(‚play-original‘).addEventListener(‚click‘, function () { if (currentSource) currentSource.stop(); currentSource = playAudio(false); // Play original version isPlayingOriginal = true; }); document.getElementById(‚play-altered‘).addEventListener(‚click‘, function () { if (currentSource) currentSource.stop(); currentSource = playAudio(true); // Play altered version isPlayingOriginal = false; }); // Submit Guess document.getElementById(’submit-guess‘).addEventListener(‚click‘, function () { const userGuess = parseFloat(document.getElementById(‚user-guess‘).value); const tolerance = 0.5; // Allowable margin of error if (Math.abs(userGuess – dBAdjustment) <= tolerance) { document.getElementById('feedback').textContent = `Correct! The adjustment was ${dBAdjustment.toFixed(1)} dB.`; } else { document.getElementById('feedback').textContent = `Incorrect. The adjustment was ${dBAdjustment.toFixed(1)} dB.`; } }); });