Large Audio Files Cause net::ERR_UPLOAD_FILE_CHANGED Error in Wavesurfer.js

[AndreiKanashyts]

Description:

When using the Wavesurfer.js library in a Vue.js application, an error occurs when trying to load large audio files (over 10 minutes in duration). The error message is net::ERR_UPLOAD_FILE_CHANGED.

Steps to Reproduce:

1. Use the load(url) method in Wavesurfer.js to load an audio file.
2. The load(url) method calls the setSrc(url, blob) method, which sets the src of the <audio> element.
3. If the audio file is large (over 10 minutes), the following error occurs: GET blob:https://api/d3f8d3d4-994f-4f4d-85f4-ebda3a1969a1 net::ERR_UPLOAD_FILE_CHANGED.

Expected Behavior:

The audio file should load correctly, regardless of its size.

Actual Behavior:

An error occurs when trying to load large audio files. The error message is net::ERR_UPLOAD_FILE_CHANGED.

Additional Information:

This issue does not occur with smaller audio files. It seems to be related to the size of the file.

Possible Solution:

A possible solution might be to split the large file into smaller parts and load them separately. However, this is just a workaround and not a proper fix for the issue.

Environment:

• Vue.js application
• Wavesurfer.js library
• Browser: google chrome

I would appreciate any help or guidance on how to resolve this issue. Thank you!

[katspaugh]

Try making a separate audio element like this:

const media = new Audio('/examples/audio/audio.wav')

const wavesurfer = WaveSurfer.create({
  container: '#container',
  media,
})

Let me know if this works, I can then use it as a fallback when setSrc throws an error.

[AndreiKanashyts]

Thank you! The error has now vanished. There are a few nuances with the rendering, but I’m confident that I can tackle them independently. An important detail that I omitted earlier: the issue with large files was exclusive to the Chromium engine. In Mozilla Firefox, everything, including large files, works flawlessly. 😊