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

问题描述

在mp3文件的某些特定格式下，如何在Firefox中通过waveurfer JS绘制音频可视化效果(图形)面临着问题.它总是给我们这样的错误: 传递给解码音频数据的缓冲区包含未知的内容类型.

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中使用了解码音频数据()，它在解码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

NB:在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.

推荐答案

我已经对其进行了调查，并最终对其进行了修复. waveurfer 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. 最后，将其传递给waveurfer 然后就可以了！！！我们在这里停留了将近1个星期.感谢您提供线索.

1. First, convert the corrupted file to array buffer
2. Slice first 2 bytes
3. Afterwards, convert array buffer to blob
4. Finally, pass it to wavesurfer Then It works!!! We were stuck here almost for 1 week. Thanks for giving the clue.

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

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屋！