Safari Rendering Blank Waveforms in Wavesurfer

[dan24678]

Description

Some mp4 videos work fine in all browsers except Safari. In Safari, they fail to render a waveform in Wavesurfer, which remains showing the default flat line. I have also seen it render a waveform incorrectly as a completely flat line except for a tiny bump in the middle (when all other browsers render the waveform normally).

To be clear, though, other mp4 videos work fine everywhere including Safari.

As a general rule, Safari (on Desktop and iOS) does not perform as well as other browsers in standalone Wavesurfer and also in videojs-wavesurfer. There are Safari memory usage issues (in which multichannel recordings can crash wavesurfer) and frequent "your webpage is using up significant memory" warnings shown for longer videos/audio that are not problematic in other browsers. I don't think these performance considerations are causing this bug, however, since I have seen Safari correctly render other mp4 videos that are even longer than some of the ones it has problems with.

As always, thanks for your help with Wavesurfer!

Steps to reproduce

Here is a JSFiddle showing a 4 minute video that will play fine on Safari on Desktop or iOS but will also fail to render in Wavesurfer in those browsers. The JS code is the exact example code from your website: https://jsfiddle.net/dan24678/t410as7r/5/

Here is a direct link to the video used: https://voicevibes.s3-us-west-2.amazonaws.com/static/video/4minvid.mp4

Results

Expected

Wavesurfer should show the waveform after taking several seconds to load.

Actual

Wavesurfer never shows the waveform.

Error output

No visible errors in console.

Versions

wavesurfer: 4.6.0
videojs: 7.11.7
wavesurfer-videojs: 3.6.0

videojs/wavesurfer

wavesurfer-videojs: 3.6.0

Browsers

Latest iOS (14.4.2) on iPhone 12 Mini

Safari 14.0.3 on MacOS 11.2.3

[thijstriemstra]

What version of iOS and MacOS @DrLongGhost? Always good to include when reading up on a bug months later.

[dan24678]

@thijstriemstra -- I just retested and bug is still present.

Latest iOS (14.4.2) on iPhone 12 Mini

Safari 14.0.3 on MacOS 11.2.3

[thijstriemstra]

@DrLongGhost I hope upcoming ios 14.5 will improve things.

[dan24678]

@thijstriemstra -- I just tested this in Safari Technology Preview -- Safari 14.2 on Mac Big Sur -- and the issue is still present.

I don't know anything about the relevant code but the fact that some mp4s work fine and others dont leaves me to believe this issue might be fixable. Is there any chance you can take a look at some point since it doesnt seem like Apple will be fixing this any time soon?

[thijstriemstra]

I just tested this in Safari Technology Preview -- Safari 14.2 on Mac Big Sur

Safari Tech Previews have a version nr, e.g. 121, which one did you try?

[dan24678]

@thijstriemstra -- Release 123 (Safari 14.2, WebKit 16612.1.7.10)

[thijstriemstra]

Still seeing issue with wavesurfer.js 5.2.0 and Safari Tech Preview 135 (Safari 15.4, WebKit 17613.1.7.3)