line.js

// Custom rendering function

import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js'

const wavesurfer = WaveSurfer.create({
  container: document.body,
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  url: '/examples/audio/demo.wav',
  renderFunction: (channels, ctx) => {
    const { width, height } = ctx.canvas
    const scale = channels[0].length / width

    ctx.translate(0, height / 2)
    ctx.strokeStyle = ctx.fillStyle
    ctx.beginPath()

    for (let i = 0; i < width; i++) {
      const peak = channels[0][Math.floor(i * scale)]
      ctx.lineTo(i, peak * height)
    }

    ctx.stroke()
    ctx.closePath()
  },
})

wavesurfer.on('interaction', () => {
  wavesurfer.play()
})