1

我们在 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 的以下错误显示在控制台的控制台 错误中

提前致谢。您的帮助将不胜感激。

4

1 回答 1

2

我调查了它并最终修复了它。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();
    });
}
于 2018-06-22T10:34:23.670 回答