Threejs进阶之十六：音频可视化
最近事情比较多，博客更新的有点慢了，今天更新一期，主要聊一聊通过Threejs提供的音频API实现音频的可视化效果，先看下最终实现的效果
音频可视化
Threejs中音频相关的类
在Three.js中，音频功能是通过Web Audio API实现的。Web Audio API可以生成、控制和处理音频，要实现音频的可视化效果，我们需要先来了解下Threejs给我们提供的音频相关的类，Threejs给我们提供的音频相关的类主要包括Audio、AudioListener、PositionalAudio、AudioAnalyser和AudioLoader这几个类。
Audio 类
Audio类用于创建一个全局的audio对象，表示一个音频源，在Three.js中用于播放音频和控制音频参数。
构造函数
Audio( listener : AudioListener ) 其中：listener参数是一个AudioListener对象，用于监听音频的播放
常用属性
- autoplay：布尔值，指定音频是否自动播放；
- context：Web Audio API的AudioContext对象，表示Audio对象所处的一个音频环境。
- gain：AudioParam对象，用于控制音频的音量或增益。
- duration：音频的时长，以秒为单位。
- source：AudioBufferSourceNode对象，用于控制音频的播放、停止等；
常用方法
- setBuffer()：设置音频源的数据。设置source给audioBuffer, 和设置sourceType给’buffer’。
- setLoop()：设置音频是否循环播放
- setVolume()：设置音频源的音量
- .hasPlaybackControl:是否可以使用 play(), pause()等方法控制播放. 默认为 true
- .play(delay )：如果hasPlaybackControl是true,播放音频源
- .stop () : 如果hasPlaybackControl是true, 停止播放
- .pause () : 如果hasPlaybackControl是true, 暂停播放
- .setMediaElementSource ( mediaElement ) : 应用传入的HTMLMediaElement类型对象作为音源。并且设置hasPlaybackControl为false。
- .setMediaStreamSource ( mediaStream ) : 应用传入的MediaStream类型对象作为音源。并且设置hasPlaybackControl为false。
创建Audio对象示例
创建Audio对象需要传入一个AudioListener对象作为参数， 所以，在创建Audio对象前，需要先创建一个AudioListener 对象
// 创建一个 AudioListener 并将其添加到 camera 中
const listener = new THREE.AudioListener()
camera.add( listener )
// 创建一个全局 audio 源
const sound = new THREE.Audio( listener )AudioListener 类
AudioListener 类是Three.js中用于监听音频的类，用一个虚拟的listener表示在场景中所有的位置和非位置相关的音效。它负责处理场景中所有3D音频源的音量、音调、距离效果等。主要作用是使用户能够模拟3D空间中的音频效果。 一个three.js程序通常创建一个AudioListene。它是音频实体构造函数的必须参数。listener对象是camera的子对象.。Camera的3D变换表示了listener的3D变换。
构造函数
AudioListener的构造函数没有参数，它创建了一个用于监听音频的对象。 AudioListener( )：创建一个新的AudioListener。
常用属性
- context：Web Audio API的AudioContext对象，表示AudioListener对象所处的一个音频环境。
- gain：对整个场景的音量或增益进行控制。
常用方法
- setMasterVolume(volume)：设置所有音频的主音量大小，volume为0-1的数值。
- getMasterVolume()：获取当前所有音频的主音量大小。
创建AudioListener对象示例
cosnt listener = new THREE.AudioListener()
camera.add( listener )上述代码创建了一个用于监听音频的listener对象，使其随着相机一起移动。然后，可以通过调用listener的setMasterVolume()方法来设置所有音频的音量大小
AudioContext类
AudioContext是Web Audio API中的音频上下文环境，用于处理音频数据。在Three.js中，AudioContext类用于创建一个用于处理音频的上下文环境，可以用于创建和控制音频节点。在AudioListener和AudioLoader 类中被使用。
常用方法
- .getContext () : AudioContext类型；如果定义了，返回给外部context的值, 否则创建一个新的AudioContext。
- .setContext ( value : AudioContext ) : AudioContext类型；外部用来设置 context 的值。
PositionalAudio 类
PositionalAudio 类用于创建一个位置相关的音频对象。 PositionalAudioThree.js中用于实现3D空间音效的音频源类，它继承自THREE.Audio对象，并添加了音源在3D空间中的位置、方向、距离效果等属性。主要作用是使用户能够在Three.js场景中实现3D声音效果。用于使音效根据360度方向自适应，同时还可以调整立体声效果。
构造函数
PositionalAudio( listener : AudioListener ) PositionalAudio的构造函数需要传入一个AudioListener类型的listener参数，表示用于监听音频的对象。这个listener参数是必须的
常用属性
- panner：控制每个PositionalAudio对象的定位效果的PannerNode对象。 PositionalAudio类继承自Audio类，所以也继承了Audio类的属性。
常用方法
- setRefDistance(value)：设置panner.refDistance的值，即设置参考距离，value为距离大小。
- setRolloffFactor(value)：设置panner.rolloffFactor的值，即设置衰减系数，value为衰减系数大小。
- setDistanceModel(value)：设置panner.distanceModel的值，即设置距离模型，value可以为"linear"、“inverse"或"exponential”。
- .setDirectionalCone (coneInnerAngle, coneOuterAngle, coneOuterGain) : 这个方法用来把环绕声音转换为定向声音directional sound。 另外，PositionalAudio类也继承了Audio类的方法。
创建PositionalAudio对象示例
const listener = new THREE.AudioListener()
camera.add( listener )
const sound = new THREE.PositionalAudio( listener )
const audioLoader = new THREE.AudioLoader(