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()
audioLoader.load( 'sounds/song.ogg', function( buffer ) {
   
	sound.setBuffer( buffer )
	sound.setRefDistance( 20 )
	sound.play()
})

AudioAnalyser 类

AudioAnalyser 类是Three.js中用于对音频数据进行分析的类，它可以分析音频数据的频域和时域信息，并对其进行可视化。主要作用是实现音频可视化效果，如频谱条形图、音量大小等。
AudioAnalyser对象,使用AnalyserNode 去分析音频数据。
AnalyserNode
AnalyserNode是一个Web Audio API。
AnalyserNode接口表示能够提供实时频率和时域分析信息的节点。它是一个AudioNode，它将音频流从输入传递到输出，但不改变，但允许您获取生成的数据，对其进行处理，并创建音频可视化。

构造函数

AudioAnalyser( audio, fftSize )
AudioAnalyser的构造函数需要传入一个audio参数，表示用于分析的音频源，并且可以通过fftSize（Fast Fourier Transform size）参数来指定频域分析的精度。
简单介绍下 fftSize
AnalyserNode接口的fftSize属性是一个无符号长值，表