Threejs对原生Web Audio API的封装提供了一些方便大家使用的语音模块。比如一个声音和一个网格模型绑定,这样网格模型的位置就是音源位置。第一小节对Threejs音频相关的API进行了一个整体的介绍,第二小节实现了一个讲解的音源可视化小案例。
音频与场景关联
Threejs提供了一系列音频相关的API:音频Audio、位置音频PositionalAudio、监听者AudioListener、音频分析器AudioAnalyser、音频加载器AudioLoader。
音频Audio、位置音频PositionalAudio等Threejs类本质上是对原生Web Audio API的封装。
非位置音频THREE.Audio
下面的代码案例是通过非位置音频THREE.Audio加载一段音频进行进行播放,该音频播放效果不受具体位置影响,一般可以用于一个三维场景的背景音乐。
// 非位置音频可用于不考虑位置的背景音乐 // 创建一个监听者 var listener = new THREE.AudioListener(); // camera.add( listener ); // 创建一个非位置音频对象 用来控制播放 var audio = new THREE.Audio(listener); // 创建一个音频加载器对象 var audioLoader = new THREE.AudioLoader(); // 加载音频文件,返回一个音频缓冲区对象作为回调函数参数 audioLoader.load('中国人.mp3', function(AudioBuffer) { // console.log(AudioBuffer) // 音频缓冲区对象关联到音频对象audio audio.setBuffer(AudioBuffer); audio.setLoop(true); //是否循环 audio.setVolume(0.5); //音量 // 播放缓冲区中的音频数据 audio.play(); //play播放、stop停止、pause暂停 });
位置音频THREE.PositionalAudio
在实际生活中,听到声音的效果,受音源相对监听者的位置和角度影响。音频源位置发生变化,听到的声音有所变化,比如音量大小。Threejs提供了一个和非位置音频THREE.Audio不同的API位置音频THREE.PositionalAudio,通过位置音频THREE.PositionalAudio创建的音频播放效果可以模仿自然界中,人听到不同位置音源的声音效果。
可以通过鼠标左键拖动旋转整个场景,可以体验到音频播放效果随着鼠标左键变化而变化。因为监听者AudioListener绑定到了相机对象camera上,所以通过OrbitControls.js改变相机的位置或角度本质上就是改变监听者的位置或角度,这样的话就相当于音源绑定的网格模型audioMesh相对监听者的位置或角度发生了变化(请带上耳机,或者将左右两个音箱分开足够位置,然后尝试拖动,以调整摄像机的位置)。
... // 用来定位音源的网格模型 var audioMesh = new THREE.Mesh(geometry, material); // 设置网格模型的位置,相当于设置音源的位置 audioMesh.position.set(0, 0, 300); scene.add(audioMesh); ... // 创建一个虚拟的监听者 var listener = new THREE.AudioListener(); // 监听者绑定到相机对象 camera.add(listener); // 创建一个位置音频对象,监听者作为参数,音频和监听者关联。 var PosAudio = new THREE.PositionalAudio(listener); //音源绑定到一个网格模型上 audioMesh.add(PosAudio); // 创建一个音频加载器 var audioLoader = new THREE.AudioLoader(); // 加载音频文件,返回一个音频缓冲区对象作为回调函数参数 audioLoader.load('./中国人.mp3', function(AudioBuffer) { // console.log(buffer); // 音频缓冲区对象关联到音频对象audio PosAudio.setBuffer(AudioBuffer); PosAudio.setVolume(0.9); //音量 PosAudio.setRefDistance(200); //参数值越大,声音越大 PosAudio.play(); //播放 });
音乐可视化
通过Threejs音频相关的APi可以获得音乐音频的频率数据然后可视化。
查看平均频率
var analyser = null; // 声明一个分析器变量 // 渲染函数 function render() { renderer.render(scene, camera); //执行渲染操作 requestAnimationFrame(render); //请求再次执行渲染函数render,渲染下一帧 if (analyser) { // getAverageFrequency()返回平均音频 var frequency = analyser.getAverageFrequency(); mesh.scale.y = 5 * frequency / 256; mesh.material.color.r = 3 * frequency / 256; // 返回傅里叶变换得到的所有频率 // console.log(analyser.getFrequencyData()) } } render(); var listener = new THREE.AudioListener() //监听者 var audio = new THREE.Audio(listener); //非位置音频对象 var audioLoader = new THREE.AudioLoader(); //音频加载器 // 加载音频文件 audioLoader.load('中国人.mp3', function(AudioBuffer) { audio.setBuffer(AudioBuffer); // 音频缓冲区对象关联到音频对象audio audio.setLoop(true); //是否循环 audio.setVolume(0.5); //音量 audio.play(); //播放 // 音频分析器和音频绑定,可以实时采集音频时域数据进行快速傅里叶变换 analyser = new THREE.AudioAnalyser(audio); });
频率数据可视化案例
获取频率数据,然后通过频率数据控制网格模型的长度方向伸缩变化。
/** * 创建多个网格模型组成的组对象 */ var group = new THREE.Group(); let N = 128; //控制音频分析器返回频率数据数量 for (let i = 0; i < N / 2; i++) { var box = new THREE.BoxGeometry(10, 100, 10); //创建一个立方体几何对象 var material = new THREE.MeshPhongMaterial({ color: 0x0000ff }); //材质对象 var mesh = new THREE.Mesh(box, material); //网格模型对象 // 长方体间隔20,整体居中 mesh.position.set(20 * i - N / 2 * 10, 0, 0) group.add(mesh) } scene.add(group)
var analyser = null; // 声明一个分析器变量 // 渲染函数 function render() { renderer.render(scene, camera); //执行渲染操作 requestAnimationFrame(render); //请求再次执行渲染函数render,渲染下一帧 if (analyser) { // 获得频率数据N个 var arr = analyser.getFrequencyData(); // console.log(arr); // 遍历组对象,每个网格子对象设置一个对应的频率数据 group.children.forEach((elem, index) => { elem.scale.y = arr[index] / 80 elem.material.color.r = arr[index] / 200; }); } } ... var listener = new THREE.AudioListener() //监听者 var audio = new THREE.Audio(listener); //非位置音频对象 var audioLoader = new THREE.AudioLoader(); //音频加载器 // 加载音频文件 audioLoader.load('中国人.mp3', function(AudioBuffer) { audio.setBuffer(AudioBuffer); // 音频缓冲区对象关联到音频对象audio audio.setLoop(true); //是否循环 audio.setVolume(0.5); //音量 audio.play(); //播放 // 音频分析器和音频绑定,可以实时采集音频时域数据进行快速傅里叶变换 analyser = new THREE.AudioAnalyser(audio,2*N); });
转载本站内容时,请务必注明来自W3xue,违者必究。