title
A prototype
Periodic Wave tone
canvas{ background:lightgray; }
document.querySelector('button').onclick = function(){ play(); }; const ctx = new AudioContext(); const osc = ctx.createOscillator(); const analyser = ctx.createAnalyser(); const canvas = document.querySelector('canvas'); // Connect the oscillator to the analyzer and the analyzer to the destination osc.connect(analyser); analyser.connect(ctx.destination); function play() { const real = new Float32Array(5); const imag = new Float32Array(5); // Set up your periodic wave real[0] = r(); real[1] = r(); real[2] = r(); real[3] = r(); real[4] = r(); imag[0] = r(); imag[1] = r(); imag[2] = r(); imag[3] = r(); imag[4] = r(); document.querySelector('input').value = real.toString() const wave = ctx.createPeriodicWave(real, imag, { disableNormalization: true }); osc.setPeriodicWave(wave); osc.frequency.value = 60; osc.start(); osc.stop(ctx.currentTime + 2); // Start the visualization createSineWave(analyser, canvas)(); } function r(){ return (Math.random() * .3).toFixed(3); } function createSineWave(analyser, canvas) { const canvasCtx = canvas.getContext("2d"); const WIDTH = canvas.width; const HEIGHT = canvas.height; analyser.fftSize = 1024; const bufferLength = analyser.fftSize; const dataArray = new Float32Array(bufferLength); canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); function draw() { const drawVisual = requestAnimationFrame(draw); analyser.getFloatTimeDomainData(dataArray); canvasCtx.fillStyle = "rgb(200, 200, 200)"; canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); canvasCtx.lineWidth = 2; canvasCtx.strokeStyle = "rgb(0, 0, 0)"; canvasCtx.beginPath(); const sliceWidth = (WIDTH * 1.0) / bufferLength; let x = 0; for (let i = 0; i < bufferLength; i++) { const v = dataArray[i] * 200.0; const y = HEIGHT / 2 + v; if (i === 0) { canvasCtx.moveTo(x, y); } else { canvasCtx.lineTo(x, y); } x += sliceWidth; } canvasCtx.lineTo(canvas.width, canvas.height / 2); canvasCtx.stroke(); } return draw; }
snap
save
new
fork
download
html
css
js
output
gallery
config
➚ link to output
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code