Difference in waveform peak rendering between Wavesurfer 2.x and 7.x?

[b0ss-x]

I'm migrating from wavesurfer 2.x to 7.x and I notice a big difference in how the waveforms are rendered.

For example in 2.x:

Looks like this in 7.x:

There are a lot less peaks rendered and I want it to look more like 2.x. My initialization code (using same widths/heights in both versions):

      const wavesurfer = WaveSurfer.create({
            container: waveform,
            waveColor: "white",
            progressColor: "#73f1e6",
            cursorColor: "transparent",
            barWidth: 3,
            barGap: 1,
            barRadius: 3,
            barHeight: 2,
            height: 50, 
            normalize: true,
            media: audio
        });

[katspaugh]

You should remove barHeight: 2 as it stretches the waveform x2; and possibly also remove normalize: true.

[b0ss-x]

Thanks I tried removing barHeight and normalize, but the peaks are still not coming through like they did in 2.x

[katspaugh]

Can you upload and share your audio file?

[b0ss-x]

@katspaugh sure thing, please see attached
sample.zip

[katspaugh]

Thanks! Yes, I can see it too. Looks like v2 used a different sampling algorithm (average values) than the current version (maximum values). I'll see if we can restore this behavior, perhaps as an option.

[b0ss-x]

That would be great appreciate it, we have a lot of audio in our site and the v2 sampling algorithm seems to reflect the changes in the audio better for us. Temporarily I'm working around it by using a custom renderFunction that is getting similar waveforms to v2:

renderFunction: (channels, ctx) => {
                const {
                    width,
                    height
                } = ctx.canvas;
                const channelData = channels[
                    0]; // Assuming mono for simplicity, or you could average the two channels
                const scale = channelData.length / width;
                const barWidth = 5; // Width of the bars as modified
                const gap = 1; // Gap between bars as modified
                const maxBarHeight = height * 3; // Maximum height of a bar

                // Function to draw bars
                const drawBars = (channelData, ctx, barWidth, gap, maxBarHeight) => {
                    for (let i = 0; i < width; i += barWidth + gap) {
                        const index = Math.floor(i * scale);
                        const normalizedValue = Math.abs(channelData[
                            index]); // Normalize value to be between 0 and 1
                        const barHeight = normalizedValue *
                            maxBarHeight; // Scale the value to the max bar height

                        // Draw the bar for this sample
                        ctx.fillRect(i, (height - barHeight) / 2, barWidth, barHeight);
                    }
                };

                // Clear the canvas
                ctx.clearRect(0, 0, width, height);

                // Set the style for the bars
                ctx.fillStyle = 'white';

                // Draw the bars for the waveform
                drawBars(channelData, ctx, barWidth, gap, maxBarHeight);
            },