一種基于WebVR實現3D音效可視化的方法

金益 張量

摘? 要：由于VR場景中用戶可以自主選擇觀看的方向和角度，為了獲得最佳的體驗效果，VR音頻技術要求通過聲音辨別方向、距離等反饋更多的空間環境狀態。本文主要論述了一種基于WebVR實現音頻空間可視化的方法，核心是運用了Web Audio API的PannerNode和AudioListener兩個對象處理音頻源，其中Three.js提供了完善的音頻空間化支持。最后通過VR Audio的案例進行測試，實驗表明根據用戶的位置和旋轉矩陣，可更新音頻空間信息。

關鍵詞：WebVR;音頻空間化;Web Audio API;音頻源

中圖分類號：TP391? ? ?文獻標識碼：A

Abstract：As users can choose the direction and angle of view independently in VR scene，VR audio technology requires more spatial environment status through sound discrimination direction，distance，etc.in order to gain optimum experience.This paper mainly discusses a method of audio spatial visualization based on WebVR.The core of this method is to use Web Audio API's PanerNode and AudioListener to process audio source，in which Three.js provides refined support to audio spatialization.Finally，a VR audio case is tested.The experiment shows that the audio spatial information can be updated according to the user's position and rotation matrix.

Keywords：WebVR;audio spatialization;Web Audio API;audio source

1? ?引言（Introduction）

在虛擬現實應用的開發中，除了圖形視覺渲染之外，音頻處理也是重要的一個環節，最佳的3D音效能使用戶達到身臨其境的效果[1，3]。VR音頻的輸出硬件主要是耳機，根據音頻源與場景之間的關系，可將VR音頻分為兩類：靜態音頻和空間化音頻[1]。

靜態音頻作用于整個VR場景，可簡單地理解為背景音樂，音頻輸出是靜態的，比如雨滴聲、鬧市聲等充斥整個場景的背景音效。對于此類音效的開發，我們可以簡單地使用HTML5中的

2? ?音頻開發流程（ Process of audio development）

我們首先用WebVR提供的Web Audio API處理一個簡單的音頻。Web Audio API提供了非常豐富的接口讓開發者在web平臺上實現對音頻進行處理，底層由c++引擎提供支持與優化[3]。利用Web Audio API，開發者能夠對音頻文件擁有更高的處理權限以及內置相關的音頻專業效果處理。Web Audio API使用戶可以在AudioContext中進行音頻操作，具有模塊化路由的特點。一個簡單的音頻處理流程需要分為五步，如圖1所示。

（1）創建音頻上下文。

（2）在音頻上下文里創建源。例如

（3）創建效果節點，例如混響、雙二階濾波器、平移、壓縮。

（4）為音頻選擇一個目的地，例如系統揚聲器。

（5）連接源到效果器，對目的地進行效果輸出。

Web Audio API處理流程可以比喻成一個加工廠對聲源的加工，這個加工廠由多個加工模塊連接而成，音頻源經過一系列的處理加工后，被輸送至揚聲器。其中Audio Context代表了一個音頻加工廠控制中心，是處理音頻的核心對象[]，所有處理連接過程都由audio context管理，負責各個音頻結點的創建和組合，通過new AudioContext（）的方式創建，如圖所示，Audio Context控制Input節點的生成和Destination節點的生成，同時控制著Input節點與Destination節點之間的連接。AudioNode是音頻結點，則是加工廠的加工模塊，按照功能可分為三類：輸入結點、處理結點、輸出結點。每個結點都擁有connect（）方法連接下一個結點，將音頻輸出到下一個模塊。輸入結點主要負責加載解碼音頻源，比如獲取二進制音頻源的BufferSourceNode、獲取