一种基于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、获取