<audio>在Chrome中無回放的波形或聲​​譜圖圖像

Question

在Chrome擴展中，是否可以基於<audio>標記的.wav文件URL創建波形或聲譜圖圖像（或畫布）元素？

我認爲解決這將需要多個步驟：

1. 加載聲音文件數據。
2. 轉換的數據轉換成可用於圖中，可能樣本值的陣列，類似於soxformat的.dat格式的格式。
3. 在畫布上生成圖像或繪圖。

請提供JavaScript代碼把這個：

<audio src="http://goo.gl/hWyNYu" controls /> 

成這樣：

這需要做的事情，而不必播放音頻，而不是existingsolutions且不使用server-side solutions。

而不是在這個過程中被a question about a specific step，這個問題尋求與完整代碼一個完整的答案，以便任何人可以先測試一下，後來明白。

Answer 1

好了，理論上，你應該能夠使用這些現有的客戶端解決方案，而播放音頻，使用OfflineAudioContext。不幸的是，這些解決方案都使用ScriptProcessorNode，從我所聽到的，在使用OfflineAudioContext時ScriptProcessorNode現有的實現被打破，並not likely to be fixed.我懷疑AnalyserNode可以在OfflineAudioContext被打破了。

它可能會使用OfflineAudioContext來「回放」整個聲音文件，然後根據創建的輸出緩衝區繪製畫布。

或者您可以使用常規的AudioContext，但要確保輸出不可聽（比如，通過增益節點以增益爲零的方式傳輸聲音）。這真的很醜，很慢，並會干擾您網頁上任何其他Web Audio API的使用。

您也可以嘗試將整個文件作爲二進制blob讀取到ArrayBuffer中，並自己解析它。 WAV文件格式並不是那麼複雜（或者您可能能夠找到開放源代碼來執行此操作）。如果你想以這種方式處理像MP3這樣的壓縮格式，你肯定不會從頭開始編寫解碼器。

編輯：

我覺得上面的基於Web的音頻解決方案過於複雜。您必須設置一個AudioBuffer並使用decodeAudioData將音頻解碼到它。一旦你完成了，就不需要創建一個AudioBufferSourceNode。您可以通過調用getChannelData直接從AudioBuffer獲取音頻數據。