怎样使用JavaScript进行音频可视化（如频谱分析）？-js教程-PHP中文网

怎样使用JavaScript进行音频可视化（如频谱分析）？

紅蓮之龍

发布： 2025-10-02 15:17:02

原创

1011人浏览过

答案：使用Web Audio API和Canvas实现音频频谱可视化。首先创建AudioContext和AnalyserNode，设置fftSize为2048；接着连接audio元素作为音频源，并将analyser接入音频图；然后准备Uint8Array存储频率数据；再通过requestAnimationFrame循环调用draw函数，利用getByteFrequencyData获取数据，在Canvas上绘制彩色柱状图表现频谱，每帧清空画布并按频率强度绘制条形，最后播放音频启动可视化。可优化smoothingTimeConstant使变化平滑，限制绘制范围提升性能，或扩展支持麦克风输入与波形图显示。

怎样使用javascript进行音频可视化（如频谱分析）？

使用 JavaScript 实现音频可视化，比如频谱分析，主要依赖 Web Audio API 和 HTML5 Canvas。核心思路是：获取音频数据，通过分析器节点提取频率信息，再用 Canvas 绘制图形。

1. 初始化音频上下文和分析器

Web Audio API 提供了 AudioContext，它是处理音频的入口。你需要创建一个上下文，并连接音频源与 AnalyserNode，用于获取实时频率数据。

示例代码：

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioContext.createAnalyser();

登录后复制

将分析器的 fftSize（快速傅里叶变换大小）设为合适的值，如 2048，以获得更精细的频谱分辨率。

analyser.fftSize = 2048;

登录后复制

2. 连接音频源并获取数据

音频源可以是页面中的 <audio> 元素、麦克风输入，或直接解码的音频文件。以下以页面音频元素为例：

立即学习“Java免费学习笔记（深入）”；

海螺视频

海螺AI推出的AI视频生成工具，可以生成高质量的视频内容。

查看详情

const audioElement = document.getElementById('audio'); // <audio id="audio" src="song.mp3"></audio>
const source = audioContext.createMediaElementSource(audioElement);
source.connect(analyser);
analyser.connect(audioContext.destination); // 让声音正常播放

登录后复制

使用 Uint8Array 存储频率数据：

const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

登录后复制

3. 使用 Canvas 绘制频谱图

准备一个 Canvas 元素，通过 requestAnimationFrame 持续更新画面。

const canvas = document.getElementById('visualizer');
const ctx = canvas.getContext('2d');
<p>function draw() {
requestAnimationFrame(draw);</p><p>// 获取当前频率数据
analyser.getByteFrequencyData(dataArray);</p><p>// 清空画布
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);</p><p>// 绘制柱状频谱
const barWidth = canvas.width / bufferLength * 2.5;
let x = 0;</p><p>for (let i = 0; i < bufferLength; i++) {
const barHeight = dataArray[i] / 255 <em> canvas.height </em> 0.8;</p><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">ctx.fillStyle = `rgb(50, ${150 + dataArray[i]}, 255)`;
ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);

x += barWidth + 1;

登录后复制

} }

// 开始播放音频并启动可视化 audioElement.play(); draw();