2011-07-06 202 views
16

我正在以小塊接收來自服務器的PCM音頻數據並將它們存儲在陣列中。現在我想用一些HTML5功能按順序播放這些音頻塊。我期待在爲「可能」的解決方案有兩個選項:音頻數據以HTML5流式傳輸

  1. HTML5音頻標籤與Data URI
  2. Web audio API

雖然我調查這些選項,請建議我任何其他選項或意見在我看到的兩個選項。雖然一個跨平臺的解決方案將是最好的,但我能滿足於Chrome的唯一的解決辦法是

回答

2

選項,因爲音頻標籤不播放原始音頻數據(我假設1將可能無法正常工作是你的PCM音頻意思數據,還是我錯了?)。每個瀏覽器需要特定的編解碼器最重要的是音頻標籤不可靠地播放沒有間隙的東西。

選項2可能有效。網絡音頻api包含緩衝區,可能會充滿原始數據並播放,但我從來沒有嘗試過。現在最大的缺點是:一個。只有Chrome瀏覽器b。用戶需要通過鍵入about:flags並啓用Web Audio來配置chrome,這對於某些人來說可能是可怕的。

第三種選擇是音頻數據的API,它是一箇中間立場的東西。我從來沒有嘗試過,但從規格看,它看起來像你正在尋找的。我不知道實現,所以你必須做一些自己的研究:) https://wiki.mozilla.org/Audio_Data_API#Writing_Audio

請不要說,我給這些答案在我頭上,我還是很新的HTML5音頻。

+1

你是不是在播放原始PCM,但WAV文件是一個非常薄的包裝原始音頻(其中「包裝」意味着44字節的標題)。經常這樣做。但是現在,當然,2年後,網絡音頻API似乎是更好的選擇。 –

19

計劃音頻是Web Audio API的設計目的。如果您將解碼後的PCM音頻塊作爲輸入數組(AUDIO_CHUNKS),則可以爲每個塊創建音頻緩衝區,並使用noteOn()在準確時間(一個接一個)安排它們。就像:

var startTime = 0; 

for (var i = 0, audioChunk; audioChunk = AUDIO_CHUNKS[i]; ++i) { 
    // Create/set audio buffer for each chunk 
    var audioBuffer = audioCtx.createBuffer(NUM_CHANNELS, NUM_SAMPLES, SAMPLE_RATE); 
    audioBuffer.getChannelData(0).set(audioChunk); 

    var source = audioCtx.createBufferSource(); 
    source.buffer = audioBuffer; 
    source.noteOn(startTime); 
    source.connect(audioCtx.destination); 

    startTime += audioBuffer.duration; 
}