var AudioContext = window.AudioContext || window.webkitAudioContext || false; if (AudioContext) { initialize(); } else { alert('Unfortunately, this broswer does not support the AudioContext API, which makes it possible to play sound. Please ensure this browser is up-to-date, or try using a different browser.'); } var ctxAudio, oscillator, gainNode, canvas, ctxCanvas, coefficientsTable, dropdown, dialog; function initialize() { document.addEventListener('DOMContentLoaded', () => { ctxAudio = new AudioContext(); oscillator = ctxAudio.createOscillator(); gainNode = ctxAudio.createGain(); gainNode.gain.value = 0.5; canvas = document.getElementById('waveform-graph'); let rect = canvas.getBoundingClientRect(); dpr = window.devicePixelRatio || 1; canvas.width = rect.width * dpr; canvas.height = rect.height * dpr; ctxCanvas = canvas.getContext('2d'); coefficientsTable = document.getElementsByTagName('tbody')[0]; dropdown = document.getElementsByTagName('select')[0]; dialog = document.getElementById('about'); // Build the table and load the default coefficients into it and the audioContext for (let n = 0; n <= 21; n++) { addRow(); } // Set the PeriodicWave and draw the graph of the waveform loadPreset(); setFrequency(440); // Allow the user's keyboard to be used to make sound document.addEventListener('keydown', e => playNote(e)); document.addEventListener('keyup', pauseNote); }); } var wave; // Recreate the PeriodicWave according to changes in reals or imags function setWave() { if (reals.length >= 2) { wave = ctxAudio.createPeriodicWave(new Float32Array(reals), new Float32Array(imags), { disableNormalization: true }); oscillator.setPeriodicWave(wave); } } var frequency; // Set the frequency at which the sound is played function setFrequency(freq) { frequency = freq; oscillator.frequency.value = frequency; document.getElementById('frequency').value = frequency; drawGraph(); } var first = true; // Start the playback function play() { if (first) { oscillator.start(); oscillator.connect(gainNode); gainNode.connect(ctxAudio.destination); first = false; } else { ctxAudio.resume(); } document.getElementById('playpause').innerText = 'Pause'; } // Suspend the playback function pause() { ctxAudio.suspend(); document.getElementById('playpause').innerText = 'Play'; } // Stop or continue the playback of the waveform's sound function playpause() { if (ctxAudio.state === 'suspended' || first) { play(); } else if (ctxAudio.state === 'running') { pause(); } } const keyToNote = { 65: 3, 87: 4, 83: 5, 69: 6, 68: 7, 70: 8, 84: 9, 71: 10, 89: 11, 72: 12, 85: 13, 74: 14, 75: 15, 79: 16, 76: 17, 80: 18, 186: 19 }; var note; var fired = false; // Play a note from a key on the keyboard function playNote(keyCode) { note = keyToNote[event.keyCode]; if (note && !fired) { setFrequency(noteToFrequency(note)); play(); fired = true; } } // Stop a note from playing function pauseNote() { if (note && fired) { fired = false; pause(); } } var reals = []; var imags = []; // Inverse Fourier Transform function amplitude(t) { let a = 0; for (let n = 0; n < reals.length; n++) { a += reals[n] * Math.cos(n * t) + imags[n] * Math.sin(n * t); } return a; } // Update a coefficient in reals or imags function setCoefficient(harmonic, component, value) { if (component == 'real') { reals[harmonic] = parseFloat(value); } else if (component == 'imag') { imags[harmonic] = parseFloat(value); } document.getElementsByClassName(component)[harmonic].value = value; } // Scales the waveform so that its amplitude is 1. If it goes above 2, then it gets clipped. function normalizeWaveform() { let maximum = 0; for (let n = 0; n < 2 * Math.PI; n += 0.001) { let test = Math.abs(amplitude(n)); if (test > maximum) { maximum = test; } } for (let n = 0; n < reals.length; n++) { setCoefficient(n, 'real', reals[n] / maximum); setCoefficient(n, 'imag', imags[n] / maximum); } setWave(); drawGraph(); } function sineHat(n) { return n == 1 ? [0, 1] : [0, 0]; } function squareHat(n) { if (n % 2 === 0) { return [0, 0]; } else { return [0, 4 / Math.PI / n]; } } function sawtoothHat(n) { if (n === 0) { return [0, 0]; } else { return [0, -2 / Math.PI * Math.pow(-1, n) / n]; } } function triangleHat(n) { if (n % 2 === 0) { return [0, 0]; } else { return [0, 8 / (Math.PI * Math.PI) * Math.pow(-1, 0.5 * (n - 1)) / (n * n)]; } } function parabolaHat(n) { if (n === 0) { return [0, 0]; } else { return [6 / (Math.PI * Math.PI) * Math.pow(-1, n) / (n * n), 0]; } } function exponentialHat(n) { let c = (Math.exp(2 * Math.PI) - 1) / (Math.exp(2 * Math.PI) * (Math.PI - 0.5) - 0.5); if (n === 0) { return [0, 0]; } else { return [c * Math.pow(-1, n) / (n * n + 1), -c * n * Math.pow(-1, n) / (n * n + 1)]; } } function ellipseHat(n) { if (n % 2 === 0) { return [0, 0]; } else { return [4 / Math.PI * integrate('Math.sqrt(Math.abs(1 - Math.pow(2 * t / Math.PI, 2))) * Math.cos(n * t)', 0, Math.PI / 2), 0]; } } var lastHarmonic = -1; // Push a row to the table of coefficients function addRow() { if (coefficientsTable.hasChildNodes()) { coefficientsTable.lastChild.removeEventListener('focusin', addRow); } lastHarmonic++; let row = document.createElement('tr'); let label = `${lastHarmonic}`; let realTD = ``; let imagTD = ``; reals.push(0); imags.push(0); row.innerHTML = label + realTD + imagTD; coefficientsTable.appendChild(row); setWave(); coefficientsTable.lastChild.addEventListener('focusin', addRow); } // Push ten rows to the table function addTenRows() { for (let n = 0; n < 10; n++) { addRow(); } } // Pop a row from the table of coefficients function removeRow() { if (lastHarmonic !== 0) { lastHarmonic--; reals.pop(); imags.pop(); coefficientsTable.removeChild(coefficientsTable.lastChild); coefficientsTable.lastChild.addEventListener('focusin', addRow); setWave(); drawGraph(); } } // Pop ten rows from the table function removeTenRows() { for (let n = 0; n < 10; n++) { removeRow(); } } // This function is called when the value of a coefficient input changes function coefficientInputOnchange(harmonic, component) { if (component == 'real') { reals[harmonic] = document.getElementsByClassName('real')[harmonic].value; } else if (component == 'imag') { imags[harmonic] = document.getElementsByClassName('imag')[harmonic].value; } setWave(); drawGraph(); } var preset, n; // Set each coefficient to a particular value respective to the type of sound wave chosen by the user function loadPreset() { preset = new Function(`return ${dropdown.options[dropdown.selectedIndex].value}(n)`); for (n = 0; n < lastHarmonic; n++) { let [real, imag] = preset(n); setCoefficient(n, 'real', real); setCoefficient(n, 'imag', imag); } setCoefficient(lastHarmonic, 'real', 0); setCoefficient(lastHarmonic, 'imag', 0); setWave(); drawGraph(); } // Set all the coefficients to 0 function clearCoefficients() { for (let n = 0; n <= lastHarmonic; n++) { setCoefficient(n, 'real', 0); setCoefficient(n, 'imag', 0); } setWave(); drawGraph(); } // Draw a graph of the waveform on the canvas function drawGraph() { let width = canvas.width; let height = canvas.height; ctxCanvas.clearRect(0, 0, width, height); ctxCanvas.strokeStyle = `#888`; ctxCanvas.lineWidth = dpr; // Draw the grid lines for (let n = 1; n < 4; n++) { ctxCanvas.beginPath(); ctxCanvas.moveTo(Math.floor(n * width / 4), 0); ctxCanvas.lineTo(Math.floor(n * width / 4), height); ctxCanvas.stroke(); ctxCanvas.beginPath(); ctxCanvas.moveTo(0, Math.floor(n * height / 4)); ctxCanvas.lineTo(width, Math.floor(n * height / 4)); ctxCanvas.stroke(); } // Write the scales ctxCanvas.fillStyle = '#000'; ctxCanvas.font = `${18 * dpr}px Arial`; ctxCanvas.textAlign = 'center'; scale = `${Math.round(500000 / frequency, 3) / 1000}ms`; ctxCanvas.fillText('-' + scale, Math.floor(0.25 * width), height - 3); ctxCanvas.fillText('0ms', Math.floor(0.5 * width), height - 3); ctxCanvas.fillText(scale, Math.floor(0.75 * width), height - 3); // Draw the waveform ctxCanvas.strokeStyle = '#0f0'; ctxCanvas.lineWidth = 2 * dpr; ctxCanvas.beginPath(); ctxCanvas.moveTo(0, height * (0.5 - 0.25 * amplitude(-2 * Math.PI))); for (let n = 1; n <= width; n++) { ctxCanvas.lineTo(n, height * (0.5 - 0.25 * amplitude(Math.PI * (4 * n / width - 2)))); } ctxCanvas.stroke(); } var t; // Approximate the area under the curve of y = f(t) between t = a and t = b // Uses Simpson's rule function integrate(f, a, b, accuracy = 65536) { f = new Function('return ' + f); let changeInT = (b - a) / accuracy; let multiplier = 4; let y = 0; for (t = a + changeInT; t < b; t += changeInT) { y += multiplier * f(t); multiplier = multiplier == 4 ? 2 : 4; } return (f(a) + y + f(b)) * changeInT / 3; } function noteToFrequency(note) { return 440 * Math.pow(2, note / 12); }

🔊 Fourier Sound Synthesizer