2014-09-23 61 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中進行解碼 - 請註釋如何。