Question

我在android chrome v.37上通过网络音频api对声音的频率动画有困难我可以听到音乐，但动画没有出现。

许多实验最终导致我以两种不同的方式加载声音并为其制作动画。第一种方式我通过aduio html 5元素加载声音。然后使用audio element作为参数创建MediaElementSource。将MediaElementSource连接到Analyzer（AudioContext.createAnalyser元素）。分析我连接到GainNode，最后将GainNode连接到AudioContext.destination。

代码：

var acontext = new AudioContext();
var analyser = acontext.createAnalyser();
var gainNode = acontext.createGain();
var audio = new Audio(path_to_file);
var source = acontext.createMediaElementSource(temp_audio);
source.connect(analyser);
analyser.connect(gainNode);
gainNode.connect(acontext.destination);

此架构适用于PC-Chrome和最新的移动游戏。也在FireFox中。

我找到的第二种方式几乎没有差异。这里的声音被激活缓冲，然后连接到分析仪。

代码：

var acontext = new AudioContext();
var analyser = acontext.createAnalyser();
var gainNode = acontext.createGain();
var source = acontext.createBufferSource(); 

var request = new XMLHttpRequest();
request.open('GET', path, true);
request.responseType = 'arraybuffer';
request.addEventListener('load', function(){ source.buffer = acontext.createBuffer(request.response, false); }, false);
request.send();

source.connect(analyser);
analyser.connect(gainNode);
gainNode.connect(acontext.destination);

对于绘制动画，我使用画布，绘图数据：

analyser.fftSize = 1024;
analyser.smoothingTimeConstant = 0.92;
var dataArray = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(dataArray); //fill dataArray from analyser

for (var i = 0; i < analyser.frequencyBinCount; i++) {
    barHeight = dataArray[i];
    // and other logic here.
}

第二种方式适用于旧的chromes，移动浏览器，Safari。

但是在android chrome v37中，两种方式都不起作用。正如我之前所说，第一种方式不显示动画，第二种方式只是打破错误 - acontext.createBuffer（）请求3个参数而不是2。据我所知，在新的Web Audio Api版本中，这种方法被重写为最新的呼叫类型，具有不同的参数，因此我不会使用它。

有关如何强制安装Android Chrome v.37的任何建议吗？

Answer 1

我找到了crossbrowser解决方案。

acontext.decodeAudioData(request.response, function (buffer) {
    source.buffer = buffer
}

这种方式适用于所有浏览器。但我拒绝音频标签并通过XmlHTTPRequest加载声音。如果您知道如何从audio元素中获取缓冲区以便在decodeAudioData中对其进行解码 - 请注释如何。

Web Audio Api，频率声音动画，android chrome v37

1 个答案: