Question

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

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

由于我们没有机会使用任何服务器端转换技术（sox / ffmpeg）来解决问题，因此我们需要在客户端进行管理。此外，我们找不到任何线索来解释为什么“ decodeAudioData”无法在firefox中进行处理，而chrome可以毫无困难地进行处理。

演示代码：

[Serializable]
public class SomeRule 
{
    [XmlAttribute("Attribute1")]
    public string Attribute1 {get;set;}

    [XmlAttribute("Attribute2")]
    public string Attribute2 { get; set; }

    // No more constructors. The dependency is supplied in the method,
    // but *not* stored.
    public void DoSomething(ISomeService someService)
    {
        someService.DoStuff(Attribute1);
    }
}

演示网址： http://audiospectrum.bjitgroup.com/main.html

NB：在Firefox中，控制台中显示以下关于Firefox的错误 error on console

先谢谢了。非常感谢您的协助。

Answer 1

我已经对其进行了调查，并最终对其进行了修复。 waveurfer github上的某人评论救了我。我们已通过以下步骤对其进行了修复：

首先，将损坏的文件转换为数组缓冲区
切片前2个字节
然后，将数组缓冲区转换为blob
最后，将其传递给waveurfer 然后就可以了！！！我们在这里停留了将近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();
    });
}

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

1 个答案: