`THREE.AudioAnalyser` 音频分析

demo案例
在这里插入图片描述

THREE.AudioAnalyser 音频分析

入参 (Input Parameters):

audio: 一个 THREE.Audio 实例，代表要分析的音频。
fftSize: 快速傅里叶变换（FFT）的大小，用于确定分析的精度和频率分辨率。
smoothingTimeConstant: 平滑时间常数，用于控制分析结果的平滑程度。

出参 (Output):

THREE.AudioAnalyser 可能不直接返回出参，而是提供方法来获取分析结果，如频谱数据或波形数据。

方法 (Methods):

getFrequencyData(array): 将当前音频的频谱数据填充到提供的数组中。
getByteFrequencyData(array): 将当前音频的频谱数据（以字节形式）填充到提供的数组中。
getByteTimeDomainData(array): 将当前音频的波形数据（以字节形式）填充到提供的数组中。
start(): 开始音频分析。
stop(): 停止音频分析。

属性 (Properties):

analyser: 内部的 AnalyserNode 实例，用于执行音频分析。
frequencyBinCount: FFT 的大小，即频率仓的数量。
smoothingTimeConstant: 平滑时间常数的当前值。

demo 案例

DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webaudio - visualizertitle>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">

    
    <script id="vertexShader" type="x-shader/x-vertex">
        varying vec2 vUv;

        void main() {
            vUv = uv;
            gl_Position = vec4(position, 1.0);
        }
    script>

    
    <script id="fragmentShader" type="x-shader/x-fragment">
        uniform sampler2D tAudioData;
        varying vec2 vUv;

        void main() {
            vec3 backgroundColor = vec3(0.125, 0.125, 0.125);
            vec3 color = vec3(1.0, 1.0, 0.0);
            float f = texture2D(tAudioData, vec2(vUv.x, 0.0)).r;
            float i = step(vUv.y, f) * step(f - 0.0125, vUv.y);
            gl_FragColor = vec4(mix(backgroundColor, color, i), 1.0);
        }
    script>

head>
<body>
<div id="overlay">
    <button id="startButton">Playbutton>
div>
<div id="container">div>
<div id="info">
    <a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.jsa> webaudio - visualizer<br/>
    music by <a href="http://www.newgrounds.com/audio/listen/376737" target="_blank" rel="noopener">skullbeatza>
div>

<script type="importmap">
    {
        "imports": {
            "three": "../build/three.module.js",
            "three/addons/": "./jsm/"
        }
    }
script>

<script type="module">
    // 导入所需的模块
    import * as THREE from 'three';

    // 定义全局变量
    let scene, camera, renderer, analyser, uniforms;

    // 获取开始按钮并添加点击事件监听器
    const startButton = document.getElementById('startButton');
    startButton.addEventListener('click', init);

    // 初始化函数
    function init() {
        const fftSize = 128; // FFT 大小

        // 移除遮罩
        const overlay = document.getElementById('overlay');
        overlay.remove();

        // 获取容器元素
        const container = document.getElementById('container');

        // 创建渲染器
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

        // 创建场景和相机
        scene = new THREE.Scene();
        camera = new THREE.Camera();

        // 创建音频分析器
        const listener = new THREE.AudioListener();
        const audio = new THREE.Audio(listener);
        const file = './sounds/376737_Skullbeatz___Bad_Cat_Maste.mp3';

        // 检查是否在 iOS 设备上运行
        if (/iPad|iPhone|iPod/g.test(navigator.userAgent)) {
            const loader = new THREE.AudioLoader();
            loader.load(file, function (buffer) {
                audio.setBuffer(buffer);
                audio.play();
            });
        } else {
            const mediaElement = new Audio(file);
            mediaElement.play();
            audio.setMediaElementSource(mediaElement);
        }

        // 创建音频分析器并设置数据纹理
        analyser = new THREE.AudioAnalyser(audio, fftSize);
        const format = (renderer.capabilities.isWebGL2) ? THREE.RedFormat : THREE.LuminanceFormat;
        uniforms = {
            tAudioData: { value: new THREE.DataTexture(analyser.data, fftSize / 2, 1, format) }
        };

        // 创建材质
        const material = new THREE.ShaderMaterial({
            uniforms: uniforms,
            vertexShader: document.getElementById('vertexShader').textContent,
            fragmentShader: document.getElementById('fragmentShader').textContent
        });

        // 创建几何体和网格
        const geometry = new THREE.PlaneGeometry(1, 1);
        const mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        // 监听窗口大小变化
        window.addEventListener('resize', onWindowResize);

        // 开始动画循环
        animate();
    }

    // 窗口大小变化时更新渲染器尺寸
    function onWindowResize() {
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

    // 动画循环
    function animate() {
        requestAnimationFrame(animate);
        render();
    }

    // 渲染函数
    function render() {
        // 更新频谱数据
        analyser.getFrequencyData();
        uniforms.tAudioData.value.needsUpdate = true;
        renderer.render(scene, camera);
    }
script>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

本内容来源于小豆包，想要更多内容请跳转小豆包》

相关阅读:
prometheus学习
 c++八股文：c++面向对象
 JVS无忧·企业计划2.1.6更新说明
 多线程Synchronized锁的使用与线程之间的通讯
 面向对象08:封装详解
 数据结构-数型查找
 [附源码]SSM计算机毕业设计基于篮球云网站JAVA
《嵌入式 – GD32开发实战指南》第17章看门狗
 C++继承
 最高可达100倍压缩！钒星北斗开放平台：渐进式图片压缩库，实现北斗三号RDSS短报文图片传输
原文地址：https://blog.csdn.net/qq_37030315/article/details/138151441