我们面临着在 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
提前致谢。我们将非常感谢您的帮助。
最佳答案
我已经调查过并最终修复了它。来自wavesurfer github 的某人的评论救了我。 我们已通过以下步骤修复了该问题:
- 首先,将损坏的文件转换为数组缓冲区
- 切片前 2 个字节
- 然后,将数组缓冲区转换为 blob
- 最后传递给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();
});
}
关于javascript - WaveSurfer JS 无法在 Firefox 中为特定的 mp3 音频文件生成图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50946223/