Problems with zooming

[baranowskyi]

Hi. How do I solve the problem with the center white line jumping when I zoom the screen? I want it to always stay centered.

Thank you in Advance.

[katspaugh]

Are you talking about this example? https://wavesurfer.xyz/examples/?soundcloud.js

As you can see in the code, it uses canvas.height as the basis for gradient parameters, so if you want it to be responsive, it should instead use a flexible unit instead of pixels, e.g. vh or percents.

[katspaugh]

Yes, it's possible to write a custom rendering function as exemplified here: https://wavesurfer.xyz/examples/?custom-render.js

[baranowskyi]

I almost did what I wanted to do. But I can't get the bar elements to be dense. What am I doing wrong? I'm working with canvas for the first time.

renderFunction: (channels, ctx) => {
    const { width, height } = ctx.canvas
    const scale = channels[0].length / width
    const step = 5 
    ctx.lineWidth = 5

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

    for (let i = 0; i < width; i += step) {   
      const index = Math.floor(i * scale) 
      const value = Math.abs(channels[0][index]) 
      let x = i
      let y = value * height

      ctx.moveTo(x, 0)
      ctx.lineTo(x, y / 2)

      x = x
      y = -y                

      ctx.moveTo(x, 0)
      ctx.lineTo(x, y)                            

      i+=2
    }

    ctx.stroke()
    ctx.closePath()
  }

[katspaugh]

The he code looks good. Perhaps do i += 1 instead of 2 to make the bars closer to each other.

[baranowskyi]

You misunderstood me. Bars do not follow the shape of the wave, there are too few of them. I need what's shown in the second picture. I've tried different variations

More examples:

[julkamny]

Are you talking about this example? https://wavesurfer.xyz/examples/?soundcloud.js

As you can see in the code, it uses canvas.height as the basis for gradient parameters, so if you want it to be responsive, it should instead use a flexible unit instead of pixels, e.g. vh or percents.

Hello, first of all thank you so much for this wonderful library! I love using it.

I'm not familiar enough with linear gradients to understand exactly how to implement the solution you allude to. My issue is not the same as OP I believe, but his video pinpoints my issue: when zooming in, the stop points of the gradient do not adjust to the new viewport. How to use vh or percents, as you suggest, to make the gradient that colors the waveform responsive? I'd be very grateful if you could elaborate. I created a function that draws the canvas from scratch each time the user zooms, but that has no effect whatsoever—I understand why thanks to your comment, but I still need a hand...