WaveSurfer JS can not generate graph in firefox for the specific mp3 audio file

问题

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.

Demo Code:

var wavesurfer = WaveSurfer.create({
     container: '#waveform'
});

wavesurfer.load('http://audiospectrum.bjitgroup.com/mp3/firefox.mp3');
wavesurfer.on('ready', function () {
    wavesurfer.play();
});

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

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

Thanks in advance. Your assistance will be much appreciated.

回答1:

I have investigated it and finally fixed it. Someone's comment from wavesurfer github 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:

var xhr = new XMLHttpRequest();
xhr.open('GET','http://audiospectrum.bjitgroup.com/mp3/firefox.mp3', true);
xhr.responseType = 'arraybuffer';
var blob_url;
xhr.onload = function(e) {
var responseArray = new Uint8Array(this.response).buffer; 
  responseArray = responseArray.slice(2);
     var blob = new Blob([responseArray]);
     var URLObject = window.webkitURL || window.URL;
     blob_url =       URLObject.createObjectURL(blob);
     wavesurferInit(blob_url);
};
xhr.send();

function wavesurferInit(blob_url) {
    var wavesurfer = WaveSurfer.create({
                        container: '#waveform'
                     });
    wavesurfer.load(blob_url);
    wavesurfer.on('ready', function () {
        wavesurfer.play();
    });
}

来源：https://stackoverflow.com/questions/50946223/wavesurfer-js-can-not-generate-graph-in-firefox-for-the-specific-mp3-audio-file