three.js WebAudio -1 音频对象

three.js使用了 WebAudio API 专门处理三维空间的音频 ,以下内容简要介绍了three.js的所有音频对象:
threeJS加载音频

①AudioListener(音频监听器)

AudioListener 用一个虚拟的listener表示在场景中所有的位置相关音效(PositionalAudio)和非位置相关音效(Audio).
一个three.js程序通常创建一个AudioListener对象,它是音频实体构造函数的必须参数,比如 Audio 和PositionalAudio.
大多数情况下, listener对象是camera的子对象. Camera的3D变换表示了listener的3D变换.

常用方法:
(1).getMasterVolume () : Float 返回场景最大音量.
(2).setMasterVolume ( value : Number ) : AudioListener 设置场景最大音量. 范围0-1

代码示例:

				// 初始化一个监听
				var listener=new THREE.AudioListener();
				camera.add(listener);// 把监听添加到camera

②AudioLoader(音频加载器)

用来加载 AudioBuffer的一个类。 内部默认使用FileLoader来加载文件。

构造函数
AudioLoader( context : String, manager : LoadingManager )
context — 加载器使用的AudioContext。 默认为window.AudioContext.
manager — 加载器使用的loadingManager。默认为THREE.DefaultLoadingManager.

创建一个新的AudioLoader.
var loader = new THREE.AudioLoader();

属性
.manager : LoadingManager
加载器正在使用的loadingManager。默认为DefaultLoadingManager.

方法
.load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : null
参数:
url — 文件的URL或者路径,也可以为 Data URI.
onLoad — 加载完成时将调用。回调参数为将要加载的响应文本。
onProgress — 将在加载过程中进行调用。参数为XMLHttpRequest实例,实例包含total和loaded字节.
onError — 在加载错误时被调用。
从URL中进行加载并将已经加载的AudioBuffer传递给onLoad。

示例代码

				// 初始化音频对象,并加入监听
				var ambientSound=new THREE.Audio(listener);
				
				// 初始化一个加载器,然后加载资源
				var auLoader=new THREE.AudioLoader();
				auLoader.load("sounds/test1.ogg",function(buffer){
					ambientSound.setBuffer(buffer);// 给一个加载器对象设置音频对象的缓存
					ambientSound.setLoop(true);//设置音频循环
					ambientSound.play();// 播放音频
				},function(xhr){// onProgress回调
					console.log("audio "+(xhr.loaded/xhr.total)*100+" % loaded");
				},function(error){// onError回调
					console.error("an error happened !");
				});	

③AudioContext(音频背景)

包含用来设置AudioContext的方法.
在AudioListener和AudioLoader 类中被使用.

常用方法:
(1).getContext () : AudioContext
如果定义了,返回给外部context的值, 否则创建一个新的AudioContext.

(2).setContext ( value : AudioConetxt ) : AudioContext
外部用来设置 context 的值.

④AudioAnalyser(音频分析)

创建AudioAnalyser对象, 使用AnalyserNode 去分析音频数据.

构造函数
AudioAnalyser( audio, fftSize )
创建AudioAnalyser.

属性:
(1).analyser : AnalyserNode
AnalyserNode用来分析音频数据.

(2).fftSize : Integer
2的幂次方最高为2048, 用来表示确定频域的FFT (傅立叶变换)大小.

(3).data : Uint8Array
用来分析数据的Uint8Array的大小由analyser.frequencyBinCount 确定.

常用方法:
(1).getFrequencyData () : Uint8Array
使用网络音频的getByteFrequencyData 方法.

(2).getAverageFrequency () : Number
通过方法getFrequencyData获取平均频率. 循环渲染输出,貌似可以用于改变物体颜色

示例代码:

//创建一个音频分析器,传入声音和所需的fftsize(傅立叶变换)大小
				analyser=new THREE.AudioAnalyser(ambientSound,32);
————————————————————————————
			function render(){//在render()循环渲染输出
				//获得声音的平均频率
				var data=analyser.getAverageFrequency();
				console.log("AverageFrequency:"+data);
				
				renderer.render(scene,camera);
			}

效果例子查看地址(音频加载需要一定时间!)

猜你喜欢

转载自blog.csdn.net/qq_41741576/article/details/88969516