Published
Edited
Feb 3, 2018
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
oscillator = {
const oscillator = audioContext.createOscillator()
oscillator.type = 'sine'
oscillator.start()
oscillator.connect(gain)
return oscillator
}
Insert cell
gain = {
const gain = audioContext.createGain()
gain.connect(audioContext.destination)
gain.connect(analyser)
return gain
}
Insert cell
analyser = audioContext.createAnalyser()
Insert cell
waveform = {
const waveform = new Float32Array(analyser.frequencyBinCount)
const updateWaveform = () => {
analyser.getFloatTimeDomainData(waveform)
requestAnimationFrame(updateWaveform)
}
requestAnimationFrame(updateWaveform)
return waveform
}
Insert cell
context = {
const context = canvas.getContext('2d')
const drawOscilloscope = () => {
context.clearRect(0, 0, canvas.width, canvas.height)
context.beginPath()
for (let x = 0; x < waveform.length; x++) {
const y = (0.5 + waveform[x] / 2) * canvas.height;
if (x === 0) {
context.moveTo(x, y)
} else {
context.lineTo(x, y)
}
}
context.stroke()
requestAnimationFrame(drawOscilloscope)
}
requestAnimationFrame(drawOscilloscope)
return context
}
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more