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

Question

我们面临着在 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

注意:在 Firefox 中，控制台中显示以下 Firefox 错误 error on console

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

Answer 1

我已经调查过并最终修复了它。来自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();
    });
}