Wavesurfer.js: Can not generate graph in Firefox for the specific mp3 audio file

[parthapratim15]

We are facing problem to draw the audio visualization (graph) by wavesurfer JS in Firefox for some specific format of the mp3 file. It always gives us the error like: The buffer passed to decodeAudioData contains an unknown content type.

But same file is running in chrome without any problem. After the investigation, we have found that decodeAudioData() is used in wavesurfer JS which is generating the error while decoding audio file data contained in an ArrayBuffer.

Since we don't have an opportunity to solve the issue by using any server-side conversion techniques (sox/ffmpeg), we need to manage it in client side. Also, we don't find any clue why "decodeAudioData" unable to process it in firefox whereas chrome can do it without facing any difficulties.

Wavesurfer.js version(s): 2.0.6

Browser version(s): Firefox Quantaun 60.0.2 (64-bit)

Code needed to reproduce the issue:

https://codepen.io/anon/pen/OEQroR

Demo URL: http://audiospectrum.bjitgroup.com/main.html

NB: In Firefox, following error for firefox is showing in console error on console

[awenger63]

Hi,
I have found similar issue between browser. You dont need wavesurfer to have this problem.
Just type url song on the browser. In this case, it is your file contains structure error.
I just control your file and find : "(offset 0x0): Garbage at the beginning of the file"
Correct it (I do it) and replace file => now it's OK !
Hope this solve your problem, see how you can have 'nice' mp3 file ;-)

[parthapratim15]

@awenger63 First of all thanks for your quick response. I can't get your words clearly. The file actually runs directly in the browser but it is not running in wave-surfer. The file I have mentioned is here:
http://audiospectrum.bjitgroup.com/mp3/firefox.mp3

I understand that there is some garbage at the beginning of the file but for this, I have removed 0x0 offset by using https://hexed.it/ and export that mp3 file and have run the code in wavesurfer but unfortunately, that is also not drawing the graph. Would you please clarify, how you have controlled that mp3 file and how actually it can be transformed into a garbage-free mp3 file by JS which will run in wavesurfer? Sorry for not getting your point clearly. I am really struggling to solve the issue.

[awenger63]

Hi @parthapratim15
Sorry for my bad writing, I wanted to answer very quiclky.
I using mp3val to control your file and it's work fine for me in wavesrufer after that this program have corrected your mp3 file like this :
firefox.zip
See screen shot

Hope this time there is no 'ambiguity' !

[parthapratim15]

@awenger63 First of all, sorry from my side. Because I could not understand your words. I was unable to fix the file actually. But after your message, I have investigated it and finally fixed it. Your comment saves me.
We have fixed it by following steps:

• [ ] 1. First, convert the corrupted file to array buffer
• [ ] 2. Slice first 2 bytes
• [ ] 3. Afterwards, convert array buffer to blob
• [ ] 4. Finally, pass it to wavesurfer

Then It works!!! We were stuck here almost for 1 week. Thanks for giving the clue.

_Fixed demo code for future reference which may help someone having the same problem:_
https://codepen.io/anon/pen/OEZwBB

Thanks for your great assistance. I really appreciate your work. :+1: :100:

[awenger63]

@parthapratim15 your welcome !

[parthapratim15]

Since the issue is resolved i am closing the issue