ThreeJS入门（088）：THREE.AudioAnalyser 知识详解，示例代码

还是大剑师兰特

于 2024-10-06 09:00:00 发布

阅读量570

点赞数 12

分类专栏： # ThreeJS综合教程200+ 文章标签：大剑师 threejs教程 threejs示例 threejs入门

本文链接：https://blog.csdn.net/cuclife/article/details/142142271

版权

ThreeJS综合教程200+ 专栏收录该内容

91 篇文章 10 订阅

订阅专栏

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

在这里插入图片描述

查看本专栏目录 - 本文是第 088篇入门文章

文章目录

THREE.AudioAnalyser 是 Three.js 中用于分析音频频率的一个类。通过该类，开发者可以在播放音频的同时获取音频的频谱数据，并利用这些数据来驱动视觉效果，如音效可视化等。

构造函数

构造函数 new THREE.AudioAnalyser(audio, fftSize) 接受两个参数来定义一个音频分析器。

参数说明

audio：一个 THREE.Audio 或 THREE.PositionalAudio 对象，用于指定要分析的音频源。
fftSize：一个整数，表示快速傅里叶变换（FFT）的大小。常用的 FFT 大小有 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384 等。FFT 大小决定了频谱分辨率和分析速度，较大的 FFT 大小可以提供更高的分辨率，但也会消耗更多的计算资源。

属性

THREE.AudioAnalyser 的实例拥有如下属性：

frequencyData：一个 Uint8Array，用于存储频率数据。每个元素代表一个频率带的能量值，范围通常在 [0, 255] 之间。
minDecibels：一个整数，表示分析结果中的最小分贝值，默认为 -80。
maxDecibels：一个整数，表示分析结果中的最大分贝值，默认为 -30。
smoothingTimeConstant：一个介于 0 到 1 之间的浮点数，表示频率数据的平滑因子，用于控制频谱数据的更新速度。

方法

THREE.AudioAnalyser 提供了以下常用的方法来操作和查询频谱数据：

getFrequencyData()：获取当前的频率数据，并填充到 frequencyData 数组中。
dispose()：释放分析器占用的资源。

示例

创建一个基本的 THREE.AudioAnalyser 对象，并获取音频的频谱数据：

// 假设已经创建了 `THREE.Audio` 对象 `audio`
const audioAnalyser = new THREE.AudioAnalyser(audio, 1024);

// 获取频率数据
audioAnalyser.getFrequencyData();
console.log(audioAnalyser.frequencyData); // 输出频率数据

使用 `THREE.AudioAnalyser` 在 Three.js 中

THREE.AudioAnalyser 在 Three.js 中主要用于分析音频信号的频谱，并利用这些频谱数据来驱动视觉效果。例如，可以用来制作音效可视化、音频驱动的粒子效果等。

示例：创建一个音频驱动的粒子效果

假设你想在一个场景中播放音频，并根据音频的频谱数据动态改变粒子效果：

// 创建一个场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加一个音频监听器
const listener = new THREE.AudioListener();
camera.add(listener);

// 创建一个音频对象
const audio = new THREE.Audio(listener);

// 加载音频文件
const audioLoader = new THREE.AudioLoader();
audioLoader.load('path/to/audio.mp3', function (buffer) {
    audio.setBuffer(buffer);
    audio.setLoop(true); // 设置音频循环播放
    audio.setVolume(0.5); // 设置音量大小
    audio.play(); // 开始播放音频
});

// 创建一个音频分析器
const audioAnalyser = new THREE.AudioAnalyser(audio, 1024);

// 创建粒子系统
const particleCount = 1000;
const particles = new THREE.Geometry();
for (let i = 0; i < particleCount; i++) {
    particles.vertices.push(new THREE.Vector3(
        Math.random() * 200 - 100,
        Math.random() * 200 - 100,
        Math.random() * 200 - 100
    ));
}

const particleMaterial = new THREE.PointsMaterial({ color: 0xff0000, size: 1 });
const particleSystem = new THREE.Points(particles, particleMaterial);
scene.add(particleSystem);

// 定义动画函数
function animate() {
    requestAnimationFrame(animate);

    // 获取频率数据
    audioAnalyser.getFrequencyData();

    // 更新粒子系统的大小
    for (let i = 0; i < particleCount; i++) {
        let freq = audioAnalyser.frequencyData[i % audioAnalyser.frequencyData.length] / 255;
        particleSystem.geometry.vertices[i].multiplyScalar(freq + 1);
    }
    particleSystem.geometry.verticesNeedUpdate = true;

    // 渲染场景
    renderer.render(scene, camera);
}

animate();

这段代码展示了如何使用 THREE.AudioAnalyser 创建一个音频驱动的粒子系统，根据音频的频谱数据动态改变粒子的大小。

总结

THREE.AudioAnalyser 是一个用于分析音频频率的类，提供了丰富的操作和查询频谱数据的方法。通过这些方法，你可以设置音频的分析参数，获取频率数据，并利用这些数据来驱动视觉效果。在 Three.js 的许多功能中，THREE.AudioAnalyser 对于实现音频驱动的视觉效果非常重要。理解并熟练使用 THREE.AudioAnalyser 对于开发高质量的 Three.js 应用程序是非常有帮助的。

需要注意的是，Three.js 的版本可能会有所不同，因此具体的方法和属性可能会有所变化。在实际使用时，请参考最新的 Three.js 文档。