WaveSurfer JS 无法在 firefox 中为特定的 mp3 音频文件生成图形 [英] WaveSurfer JS can not generate graph in firefox for the specific mp3 audio file

问题描述

我们在 Firefox 中使用 wavesurfer JS 为某些特定格式的 mp3 文件绘制音频可视化(图形)时遇到问题.它总是给我们这样的错误:传递给 decodeAudioData 的缓冲区包含未知的内容类型.

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.

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

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.

由于我们没有机会通过使用任何服务器端转换技术(sox/ffmpeg)来解决问题，因此我们需要在客户端对其进行管理.此外，我们没有找到任何线索，为什么decodeAudioData"无法在 firefox 中处理它，而 chrome 可以毫无困难地做到这一点.

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.

演示代码:

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

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

提前致谢.非常感谢您的帮助.

Thanks in advance. Your assistance will be much appreciated.

推荐答案

我已经调查并最终修复了它.来自wavesurfer github的某人的评论救了我.我们已通过以下步骤修复它:

I have investigated it and finally fixed it. Someone's comment from wavesurfer github saves me. We have fixed it by following steps:

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

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

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

这篇关于WaveSurfer JS 无法在 firefox 中为特定的 mp3 音频文件生成图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！