WaveSurfer JS 无法在 Firefox 中为特定的 mp3 音频文件生成图表

我们面临着在 Firefox 中使用 wavesurfer JS 对某些特定格式的 mp3 文件绘制音频可视化（图表）的问题。它总是给我们这样的错误：传递给decodeAudioData 的缓冲区包含未知的内容类型。

但同一个文件在 chrome 中运行没有任何问题。 经过调查，我们发现在wavesurfer JS中使用decodeAudioData()，在解码ArrayBuffer中包含的音频文件数据时会产生错误。

由于我们没有机会通过使用任何服务器端转换技术（sox/ffmpeg）来解决问题，因此我们需要在客户端进行管理。另外，我们没有找到任何线索为什么“decodeAudioData”无法在 Firefox 中处理它，而 chrome 可以做到这一点而不会遇到任何困难。

演示代码：

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

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

演示网址：http://audiospectrum.bjitgroup.com/main.html http://audiospectrum.bjitgroup.com/main.html

注意：在 Firefox 中，控制台中显示以下 Firefox 错误控制台上出现错误 https://i.stack.imgur.com/0zdJi.jpg

提前致谢。我们将非常感谢您的帮助。

我对此进行了调查并最终修复了它。来自wavesurfer github 的某人的评论救了我。 我们已通过以下步骤修复了该问题：

1. 首先，将损坏的文件转换为数组缓冲区
2. 切片前 2 个字节
3. 然后，将数组缓冲区转换为 blob
4. 最后传递给wavesurfer 然后就可以了！！！我们被困在这里几乎 1 周了。感谢您提供线索。

修复了演示代码以供将来参考，这可能会帮助遇到相同问题的人：

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();
    });
}