A grid as background for the waveform

[ManimMadhav]

Hi all, I've been trying to implement a grid-like structure for the background of my waveform. It looks like this right now:


I have added a grid that makes it look like this:




However, since this is hard-coded CSS that creates the grid, how can I make a grid background that renders when a user zooms in/out? is there any way to create a background like that?

This is the CSS code:

#audiowave {
    background-size: 40px 40px;
    background-image:
      linear-gradient(to right, grey 1px, transparent 1px),
      linear-gradient(to bottom, grey 1px, transparent 1px);
 }

[katspaugh]

If you want your grid to also scale, you should subscribe to wavesurfer’s zoom event and update the background-size based on the zoom level.

[ManimMadhav]

okay, i will try that. thanks for the response!