Web Audio频谱分析与Three.js粒子系统打造实时音乐可视化

简介：面向前端初学者的音乐类网页前端资源，基于HTML5搭建“music-world”音乐世界站点，可用于练习网页结构组织、媒体嵌入与多页面导航，适合入门级Web开发学习与课程作业参考。压缩包共28个文件，大小600KB，以6个HTML页面为主体，涵盖Trance、House、Eurodance、Italo-disco等分类页面；配套19张JPG与2张PNG图片作为专辑封面和艺人素材，另有1份Markdown说明文档辅助阅读。资源已获127人学习下载，体量小巧但结构完整。通过解析其中audio音频播放、歌曲列表布局、图片引用及CSS配合方式，读者能快速理解音乐类网页从内容划分到视觉呈现的实现路径，也可在此基础上替换素材、扩展功能，搭建自己的音乐展示站点。

1. 从一段音频到一座三维音乐世界：music-world 在做什么

你在听到一首歌的瞬间，脑子里会出现画面：鼓点像从地面震起来，合成器像星云散开。但屏幕上的播放器只有一根进度条在走。music-world 就是把这种联想变成实时画面的方案，核心思路是从音频里提取振幅和频率数据，再把这些数据映射成三维粒子的位置、速度和颜色，让整首歌变成一个可以被眼睛观看的立体空间。它不是一个固定模板的霓虹柱状频谱，而是每个频段都有独立运动规则的“世界”，低频是地基，中频是漂浮物，高频是碎裂的光。

这套东西适合两类人：一是做音乐类产品页、直播间背景、线下演出视觉的开发者，想快速做出能跟随音乐变化的场景；二是对 Web Audio 和 WebGL 都有兴趣的前端，想用一个完整例子把“声音如何变成视觉”这条链路彻底走通。本文不依赖任何付费框架，全部用浏览器原生 API 加 Three.js 完成，你在本地起一个静态服务就能跟着跑。

2. 让声音变成数据：Web Audio 频谱分析的三个关键参数

2.1 为什么选频域而不是时域：FFT 是音乐视觉化的地基

音乐进入电脑之后，本质是一串随时间变化的波形，横轴是时间，纵轴是振幅，这就是时域数据。如果你直接把时域的振幅拿去做视觉，你会得到一条剧烈抖动的波形线，它确实在响应音乐，但看起来很单调，因为低音和大鼓在时域上可能长得差不多，你很难区分“这是贝斯还是军鼓”。

而频域数据把一段音频拆成很多频段：低频、中频、高频各自有多少能量。这样你就能做到让低音推动地面的粒子扩张，让高频触发星星点点的闪烁。这个拆分动作依赖的是快速傅里叶变换（FFT），浏览器 Web Audio API 里的 AnalyserNode 已经封装好了 FFT，你不需要手写算法，只需要知道三个参数：fftSize、frequencyBinCount、smoothingTimeConstant。

这三个参数决定了你能拿到多少条频谱数据、这些数据多久更新一次、更新时是否要平滑。理解了它们，music-world 里所有映射规则才有“数据来源”。我见过不少只改了粒子颜色但画面还是很死板的案例，最后定位到是 fftSize 太小，频谱分辨率不够，导致中高频混成一团。

2.2 AnalyserNode 的最小接线：获取可用的频域数组

先给你一段最小代码，把 AnalyserNode 接进音频链路：

const audioCtx = new AudioContext(); const analyser = audioCtx.createAnalyser(); const source = audioCtx.createMediaElementSource(audioElement); source.connect(analyser); analyser.connect(audioCtx.destination); analyser.fftSize = 2048; const bufferLength = analyser.frequencyBinCount; // 等于 fftSize / 2 = 1024 const freqData = new Uint8Array(bufferLength); // 每一帧读取一次 analyser.getByteFrequencyData(freqData);

这段代码先创建了 AudioContext，然后创建 AnalyserNode，再把音频元素接进分析器，最后分析器连到扬声器。注意这里getByteFrequencyData拿到的是 0 到 255 的整数数组，bufferLength等于 1024，代表从 0Hz 到采样率一半（通常是 22050Hz）之间的 1024 个频段。

fftSize = 2048是平衡点。如果你设成 512，那么只有 256 个频段，每个频段覆盖约 86Hz，人声和吉他独奏这种细节会被压扁；如果你设成 8192，虽然分辨率高，但每一帧的计算量更大，而且低频部分只有前面几十个频段有能量，后面全接近零，视觉映射时容易稀疏。对于音乐可视化，2048 是我常用的起点，流行舞曲和古典乐都能有不错的响应。

2.3 两个会直接影响画面质感的参数：fftSize 与 smoothingTimeConstant

frequencyBinCount是只读的，你不用管它，但要理解你拿到的数组长度是多少。fftSize直接影响这个长度，我上面用了 2048，所以数组是 1024 个元素。1024 这个数量级刚好可以映射到上万个粒子上：你可以把每 2 到 4 个频段合并成一个控制通道，也可以直接让每个频段驱动一个粒子带。

另一个容易忽略的是analyser.smoothingTimeConstant，默认值是 0.8，范围是 0 到 1。这个值的意思是：当前帧的频谱数据要多大比例来自上一帧的平均值。值越接近 1，画面越平滑，但会显得迟钝，鼓点砸下去时粒子像泡在蜂蜜里；值越接近 0，画面越灵敏，但会疯狂抖动，细碎的噪声全变成视觉噪点。

我在做 music-world 时给它的初始值是 0.75，然后根据音乐类型调整：电子乐用 0.6，让瞬态更炸；民谣用 0.85，让画面更绵长。如果你发现粒子的运动像是在抽搐，先别改运动算法，把smoothingTimeConstant抬到 0.8 以上再看看，很多时候是音频数据本身在抖。

3. 用 Three.js 在本地跑通 music-world 的最小命令：一个 200 行的可运行示例

3.1 准备本地静态服务：为什么不能双击打开

music-world 需要读取音频文件，而直接双击 HTML 文件时浏览器处于受限模式，fetch本地文件会被拦截，甚至会触发跨域报错。千万不要直接在文件管理器里双击 index.html，我最初踩过一次，还以为代码写错了。

在项目目录下开一个静态服务，任选一种方式：

npx serve .

或者：

python3 -m http.server 8080

然后打开http://localhost:8080访问。如果你用 Vite 开发，直接npm create vite@latest然后 npm install 三件依赖：three、dat.gui（调参用）和可选的风声包。文件结构保持最简：

music-world/ index.html main.js audio/your-music.mp3

3.2 粒子世界的初始化：场景、相机、反馈

下面这个 main.js 是最小可运行的骨架，我用 Three.js 生成了一个粒子系统，每个粒子是一个小正方体，而不是性能更差的 Points 球体：

import * as THREE from 'three'; const scene = new THREE.Scene(); scene.background = new THREE.Color(0x0a0a1a); const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.set(0, 2, 8); camera.lookAt(0, 0, 0); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const particleCount = 6000; const positions = new Float32Array(particleCount * 3); const particleGeometry = new THREE.BufferGeometry(); particleGeometry.setAttribute( 'position', new THREE.BufferAttribute(positions, 3) ); const particleMaterial = new THREE.PointsMaterial({ color: 0x88ccff, size: 0.15, transparent: true, blending: THREE.AdditiveBlending, }); const particles = new THREE.Points(particleGeometry, particleMaterial); scene.add(particles); function onResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } window.addEventListener('resize', onResize);

这里的PointsMaterial适合大量粒子，AdditiveBlending让粒子叠加时产生光晕感，背景色0x0a0a1a是带一点蓝的黑，视觉上比较不吃高频。粒子数 6000 是初值，后面会根据频段能量动态分散。

3.3 把频谱数据交给粒子：rAF 循环里的驱动逻辑

关键点在每一帧的 animate 循环里：读取频谱数据，然后按照频率段重新排布粒子。我用的映射规则是：把频域数组分成左右两组，低频段决定粒子向外扩散的半径，高频段决定粒子的上下波动幅度。

function animate() { requestAnimationFrame(animate); analyser.getByteFrequencyData(freqData); const positionAttr = particles.geometry.attributes.position; const arr = positionAttr.array; for (let i = 0; i < particleCount; i++) { const freqIndex = Math.floor((i / particleCount) * freqData.length); const energy = freqData[freqIndex] / 255; const baseRadius = 2 + energy * 3; const angle = (i / particleCount) * Math.PI * 2; const spread = Math.sin(energy * Math.PI); const x = Math.cos(angle) * baseRadius; const z = Math.sin(angle) * baseRadius; const y = (freqData[(freqIndex + 128) % freqData.length] / 255) * 4 - 2; arr[i * 3] = x; arr[i * 3 + 1] = y * spread; arr[i * 3 + 2] = z; } positionAttr.needsUpdate = true; camera.rotation.y += 0.001; renderer.render(scene, camera); } animate();

这段代码的作用是让粒子围绕中心形成一个圆环，根据当前频段的能量改变半径。energy是 0 到 1 的归一化值，baseRadius在 2 到 5 之间变化，低音强的段落粒子圆环会明显扩大。spread是能量产生的波形系数，让高能量时粒子在纵轴上更分散。

注意positionAttr.needsUpdate = true一定不能漏，BufferGeometry 是静态的，你不告诉它数据变了，它不会自己刷新。另外这里用了一个取模技巧：(freqIndex + 128) % freqData.length，拿相邻高频段的能量来做纵向波动，避免纵向运动和横向运动完全同步，视觉上会更有层次。

3.4 让音乐先于画面：AudioContext 的启动时机

浏览器不允许网页打开就自动播放声音，AudioContext 会处于 suspended 状态。所以你需要一个播放按钮，在用户点击后创建 AudioContext 并 resume。

<button id="play">播放</button>

const playBtn = document.getElementById('play'); playBtn.addEventListener('click', async () => { if (audioCtx.state === 'suspended') { await audioCtx.resume(); } await audioElement.play(); });

如果你在页面加载时就触发audioElement.play()，控制台会报NotAllowedError。这是一个常见的翻车点，但解决起来也很简单：把按钮的实际点击位置放在显眼处，并且不要用autoplay属性。有些开发者为了绕过限制加载完就立刻播放，结果在 Chrome 里直接卡死，这属于浏览器安全机制，没必要硬刚。

4. 把频谱映射成运动规则：位置、速度、颜色与衰减的调优

4.1 频率区间怎么切：低频鼓点与高频镲片的分离

在做 music-world 时，最影响观感的是你如何切频率区间。频谱数组前面几十个元素代表低频，中间是中频，后面是高频。以 1024 个频段、采样率 44100Hz 为例，每个频段覆盖约 21.5Hz，所以第 0 到 5 个元素大约覆盖 0 到 107Hz，对应地鼓和贝斯；第 10 到 30 个元素覆盖 215 到 645Hz，对应人声基音和底鼓打击感；第 100 到 300 个元素覆盖 2kHz 到 6.5kHz，对应军鼓、镲片和和声。

我一般会给三个独立的控制通道：

const low = freqData.slice(0, 8); const mid = freqData.slice(40, 120); const high = freqData.slice(220, 500); const lowAvg = low.reduce((a, b) => a + b, 0) / low.length; const midAvg = mid.reduce((a, b) => a + b, 0) / mid.length; const highAvg = high.reduce((a, b) => a + b, 0) / high.length;

计算它们的平均值再归一化到 0 到 1，而不是直接用原始值。低频平均值可以驱动世界底座的缩放，中频平均值可以驱动粒子旋转速度，高频平均值可以驱动粒子闪烁强度。这样切开的通道互不干扰，低音鼓点不会因为人声的存在而失去存在感。

4.2 粒子速度的动能模型：用音量变化代替瞬时值

直接把当前帧的频谱值拿来驱动速度，会出现一个明显问题：粒子位置跳变太快，像受惊吓的鱼群。更稳的做法是维护一个“动能值”，让粒子的目标速度随音乐变化，但实际速度用缓动逼近。

let currentLow = 0; let targetLow = 0; // 每帧更新 targetLow = lowAvg; // 0~1 currentLow += (targetLow - currentLow) * 0.1; // 用 currentLow 控制粒子的扩张速度

这里的0.1是缓动系数。系数越大跟随越快，越小越平滑。我一般给低频设 0.08，中频 0.15，高频 0.3，这样低频动作显得沉稳有力，高频动作显得灵活。如果你不想要缓动，就直接用瞬时值，但画面会非常碎，尤其是鼓点密集的电子乐，几乎看不清结构。

4.3 颜色映射的三种常用色带与避雷

颜色映射有两种思路：按频段固定颜色，或者按能量动态色相。第一种简单，比如低频永远用红色，中频用绿色，高频用蓝色，缺点是一首安静的歌中高频几乎不亮，画面会单调。第二种是做一个渐变，从深蓝到青再到橙，然后根据当前主导频段去采样颜色。

我推荐第二种，但要注意不要让颜色饱和度太高。AdditiveBlending会把颜色加在一起，如果每个粒子都是纯红纯绿，混合后会变成白色噪点。避雷的方法是：把颜色的 RGB 值控制在0.8以下，并且每个粒子颜色的 alpha 设为 0.3 左右。

实现一个简单的渐变采样：

function getColorForChannel(channel, energy) { const hue = 0.55 - channel * 0.2 + energy * 0.1; return new THREE.Color().setHSL(hue, 0.8, 0.4 + energy * 0.3); }

这里channel是 0、1、2 分别代表低中高，Hue从 0.55（蓝紫）移到 0.35（橙），能量越高亮度越高。如果你不想引入THREE.Color的每帧创建开销，可以在初始化时预生成 256 级颜色查找表，这样运行时会更快。

4.4 一个可抄的参数表：从安静环境到舞曲的通用配置

下面这个表格是我在多个音乐类型上试出来的基线，你可以直接抄去当初始值，再根据实际听感微调。

注意fftSize = 4096时frequencyBinCount变成 2048，我之前代码里的freqData.slice()索引要相应调整。粒子数的增加会显著影响 GPU 压力，如果帧率不够，优先降低粒子数而不是降低 fftSize，因为 fftSize 太低了会让频谱分辨率不够，视觉上细节丢失严重。

5. 常见的 5 个翻车现场：跨域、静音、零数据与性能卡顿排查

5.1 现象：音频加载成功但频谱全是 0

你去getByteFrequencyData拿数组，发现所有值都是 0，但播放器有声音。原因通常是 AnalyserNode 没有与音频源连接完整，或者连接到了 AudioContext.destination 之后又被中断。检查一下source.connect(analyser)之后有没有顺手也source.connect(audioCtx.destination)，如果你只连了 analyser，声音会从扬声器消失，但频谱不一定全零。另一个常见原因是调用了analyser.disconnect()却没有重新连接。

解决：把连接链路写成一个函数，每次创建新音频时都调用：

function connectAudio() { source.disconnect(); source.connect(analyser); source.connect(audioCtx.destination); }

5.2 现象：点击按钮后 AudioContext 一直 suspended

Chrome 的自动播放策略要求 AudioContext 只能在用户手势作用域里 resume。如果你在按钮回调里先fetch了音频，再await audioCtx.resume()，浏览器可能认为这个手势已经失效，因为 await 打断了“用户激活”的上下文。

解决：把resume()放在回调的第一行，而且不加任何前置 await：

playBtn.addEventListener('click', async () => { await audioCtx.resume(); // 第一行 const buffer = await fetch('/music.mp3'); // 后面的异步操作 });

5.3 现象：iOS 上音乐不响，但 Android 正常

iOS Safari 对 AudioContext 的采样率有限制，而且必须在设备铃声拨到静音之外才出声。如果你的代码用了audioElement.play()，在 iOS 上还需要额外处理audioElement.muted = false，因为如果页面在静音状态下加载，Safari 会自动静音媒体元素。更隐蔽的是，iOS 上的 AudioContext 不能通过一个已经播放过的媒体元素来恢复状态，你需要新建一个 AudioContext 实例。

解决：在播放前重设元素音量：

audioElement.muted = false; audioElement.volume = 1.0;

如果还是无声，把 AudioContext 的采样率通过new AudioContext({ sampleRate: 44100 })指定到 44100，通常能解决一部分兼容问题。

5.4 现象：粒子一多 frame 掉到 20

6000 个粒子时流畅，升到 20000 后卡成幻灯片。原因很简单：BufferGeometry 的顶点数增加后，CPU 端每帧更新 Float32Array 的开销也线性增加。而且我用的是THREE.Points，你如果用了每粒子一个Mesh，那个开销会更大。

解决：优先使用Points+PointsMaterial，并在着色器里做数据更新。更进阶的做法是把频率数据存进THREE.DataTexture，然后在顶点着色器里采样，这样 CPU 只需要上传一张很小的图，不占用主线程。对于最小版本，先把粒子数控制在 8000 以内，然后把renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))加上。

加了这个之后，高 DPI 屏幕上会明显流畅，因为像素数量可能降一半。

5.5 现象：窗口缩放后视觉世界变形

窗口 resize 时我没有更新相机宽高比，结果粒子圆环被拉成椭圆。上面 3.2 节里的onResize已经覆盖了这一点，但如果你用了 OrbitControls，还要单独调用controls.update()。更隐蔽的是移动端地址栏显示隐藏导致 resize 事件频繁触发，防抖处理一下：

let resizeTimer; window.addEventListener('resize', () => { clearTimeout(resizeTimer); resizeTimer = setTimeout(onResize, 200); });

5.6 现象：一首歌放完再次播放时，频谱数据不动

这是因为媒体元素播放结束后，AudioContext 里没有新的音频帧到来，AnalyserNode 会保留最后一批数据。你需要在ended事件里清空或者重置位置：

audioElement.addEventListener('ended', () => { if (audioCtx.state === 'running') { audioCtx.suspend(); } });

下次点击播放时再resume()。如果不 suspend，频谱数组会停在最后一帧，视觉上像卡死。

6. 让 music-world 活起来：麦克风输入、录屏导出与性能验证

6.1 用麦克风替代文件：getUserMedia 与 AudioContext 的连接差异

如果你不想只放一首歌，可以让用户对着麦克风说话或唱歌，实时驱动世界。连接方式很简单：

const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const micSource = audioCtx.createMediaStreamSource(stream); micSource.connect(analyser);

这里不再需要createMediaElementSource，也不需要连接 destination，因为麦克风的声音不需要返送回扬声器，否则会有回声啸叫。注意createMediaStreamSource只能同时接一个流，不能重复调用，否则会报InvalidStateError。另外，麦克风输入的电平通常比音乐文件低，你会看到频谱值普遍偏小，需要做一个自动增益：计算当前帧所有频段的平均值，如果低于某个阈值，就把所有值乘以一个系数，范围在 1 到 3 之间。

6.2 验证方法：把可视化数值打印到 Canvas 上

调试时你不能只盯着画面，因为运动规律是否准确需要对照数值。我在项目里会叠一个隐形的 debug 层，用 Canvas 2D 把低频、中频、高频三个通道的平均值画成简单的柱状条，同时把当前帧率画在左上角：

const ctx = debugCanvas.getContext('2d'); ctx.clearRect(0, 0, 300, 80); ctx.fillStyle = 'white'; ctx.fillRect(0, 20, lowAvg * 200, 4); ctx.fillRect(0, 40, midAvg * 200, 4); ctx.fillRect(0, 60, highAvg * 200, 4);

用requestAnimationFrame里的时间戳计算 fps：

let lastTime = performance.now(); function loop(now) { const delta = now - lastTime; lastTime = now; const fps = Math.round(1000 / delta); ctx.fillText(`fps: ${fps}`, 10, 16); }

这比浏览器 DevTools 里的帧率面板更直观，因为它是叠加在你的页面上的，能看到粒子运动和数值变化的对应关系。

6.3 录屏导出的几个浏览器差异

如果你想把自己的 music-world 录成视频，最稳妥的方式是录屏整个浏览器窗口。如果你想在页面内直接录制 Canvas，用canvas.captureStream()接 MediaRecorder。但要注意，Three.js 的renderer.domElement是 WebGL canvas，captureStream在 Safari 上支持较差，在 Chrome 上表现最好。

const stream = renderer.domElement.captureStream(30); const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' }); recorder.start(); // 停止时 recorder.stop();

captureStream(30)里的 30 是目标帧率，并不是强制值，实际帧率取决于渲染效率。如果 WebGL 场景里有很多粒子，录制会把帧率拖得更低，建议录之前把粒子数降到 3000，并且隐藏 debug 面板。

6.4 一个我保留的习惯：先调静音模式，再调视觉

我会在最开始把音频元素设为 muted，只观察频谱数据变化，确认识别到鼓点后，再开启声音同步预览。这样能避开“听到的音乐”和“看到的画面”在心理上的预期差，你更容易判断视觉规则对不对。很多人一上来就开着声音调参，结果跟着旋律觉得哪里都好看，静音后再看发现完全没逻辑。

这个习惯帮我省了不少无用功。以后你接手任何音乐可视化项目，都建议先走一遍这个流程：静音、看数值、再开声。希望帮到你。

本文还有配套的精品资源，点击获取