Can we make the lower mirrored part of the waveform half the height of the upper part?

[ajagt]

To make the lower mirrored part of the waveform half the height of the upper part in wavesurfer.js, you can modify the fillWave function in the wavesurfer.js library. This function is responsible for drawing the waveform.

Unfortunately, there is no built-in option or configuration in wavesurfer.js to adjust the height of the mirrored part of the waveform separately from the upper part. Therefore, you would need to modify the library's source code directly. Can someone implement this?

Here's an example of how you might modify the fillWave function:

javascript

fillWave: function (x, start, end, fn) {
var halfH = this.halfH;
var coef = this.attenuation;
var length = end - start + 1;
var peaks = this.peaks;

var absmax = Math.abs(this.absmax);
var height = this.height;

for (var i = start; i <= end; i++) {
    var h = Math.round(peaks[2 * i] / absmax * halfH);
    var y = Math.round((peaks[2 * i + 1] / absmax * halfH) / 2); // make the lower part half the height
    this.fillRect(x + i, halfH - h + this.y, 1, h);
    this.fillRect(x + i, halfH + y + this.y, 1, h);
}

}

In this code, peaks[2 * i + 1] / absmax * halfH is the calculation for the height of the lower part of the waveform. By dividing this by 2, you can make the lower part half the height of the upper part.

[katspaugh]

Is that ChatGPT?

There’s no fillWave. There’s a renderFunction option though (see https://wavesurfer.xyz/docs/types/wavesurfer.WaveSurferOptions).