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.

[baranowskyi]

Thank you. It works, but it affects the performance of the page.

In order not to create a new topic I'll ask here. Is there any possibility to make audio wave not mirrored, as it is done in Soundcloud?

[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: