const seconds = 0.5

const fn = t => 

  Math.sin(t * 6000)

*   Math.sin(t * 3000)

*   Math.sin(t * 1000)

  * Math.sin(Math.PI * t / seconds)

​

​

// Sound generator

const audioCtx = new AudioContext()

const {sampleRate} = audioCtx

const buffer = audioCtx.createBuffer(

  1, sampleRate * seconds, sampleRate

)

​

const data = buffer.getChannelData(0)

for (var i = 0; i < data.length; i++) {

  data[i] = fn(i / sampleRate, seconds)

}

​

const source = audioCtx.createBufferSource()

source.buffer = buffer

​

​

// Visualiser

const analyser = audioCtx.createAnalyser()

​

const w = analyser.fftSize

const canvas = document.createElement('canvas')

canvas.width = w

canvas.height = 255

const ctx = canvas.getContext('2d')

const waveform = new Uint8Array(analyser.fftSize)

const animate = (t) => {

  requestAnimationFrame(animate)

  analyser.getByteTimeDomainData(waveform)

  ctx.clearRect(0,0, w, 255)

  ctx.beginPath()

  waveform.forEach((v, i) => {

    ctx.lineTo(i, v)

  })

  ctx.stroke()

}

animate()

​

document.body.appendChild(canvas)

​

source.connect(analyser)

analyser.connect(audioCtx.destination)

source.start()

​

​

​