2014-09-23 65 views
2

我通过web chrome v.37上的web音频api发出声音的频率动画有问题我可以听到音乐,但动画不存在。WebAudioApi,频率声音动画,android chrome v37

很多实验都让我最终以两种不同的方式加载声音并对其进行动画处理。 在第一种方式我通过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); 

对于平局我的动画使用帆布,数据抽奖:老铬合金,移动浏览器,Safari浏览器

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. 
} 

方式二的工作。

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

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

回答

0

我发现crossbrowser解决方案。

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

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