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

【问题标题】：WebAudioApi, frequency sound animation, android chrome v37Web Audio Api，频率声音动画，android chrome v37
【发布时间】：2014-09-23 10:26:04
【问题描述】：

我在通过 android chrome v.37 上的网络音频 api 处理声音的频率动画时遇到问题我可以听到音乐，但没有动画。

大量的实验最终使我找到了两种不同的加载声音和动画的方法。在第一种方式中，我通过 aduio html 5 元素加载声音。然后使用音频元素作为参数创建 MediaElementSource。将 MediaElementSource 连接到分析器（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 和最新的移动 safari。也在 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.
}

第二种方式适用于旧版 chrome、移动浏览器、safari。

但在 android chrome v37 中，这两种方式都行不通。正如我之前所说，第一种方式不显示动画，第二种方式只是因错误而中断 - acontext.createBuffer() 请求 3 个参数而不是 2 个。据我了解，在新的 Web Audio Api 版本中，此方法已针对最新的呼叫类型进行了重写，具有不同的参数，因此我不使用它。

任何建议如何强制 Android Chrome v.37 在这里工作？

【问题讨论】：

标签： javascript

【解决方案1】：

我找到了跨浏览器解决方案。

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

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

【讨论】：