wavesurfer.js: Pre-rendered Peaks Don't Work for Bars Rendering on 6.0.0

Wavesurfer.js version(s): 6.0.0

Browser and operating system version(s): Chrome latest on macOS

Code needed to reproduce the issue:

The following below works on Wavesurfer.js version 5.2.0 but not on 6.0.0,

let wavesurfer = WaveSurfer.create({
  container: '#wavesurfer,
  backend: 'MediaElement',
  barWidth: 5 // Works when this is omitted, so applies only to bar rendering
})

wavesurfer.load('https://example.com/audio.mp3', arrayOfPeaks)

Use behaviour needed to reproduce the issue:

Observe peaks aren’t pre-rendering, and bar rendering is empty/flat/silent. If i omit the barWidth: 5 option, it works as usual with normal a waveform rendering.

Thanks,

David

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 19 (11 by maintainers)

Most upvoted comments

I’ll look into it.

lorenzos on Feb 9, 2022

Okay. I’ll make do and experiment with arguments to audiowaveform and see if I come up with anything! Regardless, I appreciate the fix. 😸

dtcooper on Feb 10, 2022

Hi @lorenzos, below is a repro hosted on CodePen! Thanks.

Here is a repro with WaveSurfer v6.0.0: CodePen bGYWpOO is not working

Here is the same code working with WaveSurfer v5.2.0: CodePen ZEaKWZG is working on older version

Note each CodePen has the FULL html that you can copy to test as a local file, it’s not broken up into JS/HTML/CSS.

Also note for the v6.0.0 version that’s broken, if you comment out the barWidth: 5 in the code, it will work fine without bar rendering.

dtcooper on Feb 10, 2022

Okay, thanks for taking a look. I’ll come up with a very specific steps to repro tomorrow and post it.

dtcooper on Feb 9, 2022