js 实现频谱
JavaScript 实现频谱分析的方法
频谱分析通常涉及音频信号的频率分解，可通过 Web Audio API 实现。以下是核心实现步骤：
使用 Web Audio API 获取音频频谱
// 创建音频上下文
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
// 获取音频源（例如通过麦克风或音频文件）
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
const source = audioContext.createMediaStreamSource(stream);
const analyser = audioContext.createAnalyser();
// 连接音频源到分析器
source.connect(analyser);
analyser.connect(audioContext.destination);
// 设置FFT大小（决定频率分段的精度）
analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
// 实时获取频谱数据
function update() {
analyser.getByteFrequencyData(dataArray);
// 此处可渲染频谱（如使用Canvas）
requestAnimationFrame(update);
}
update();
});可视化频谱（使用Canvas）
const canvas = document.getElementById('visualizer');
const ctx = canvas.getContext('2d');
const WIDTH = canvas.width;
const HEIGHT = canvas.height;
function draw() {
requestAnimationFrame(draw);
analyser.getByteFrequencyData(dataArray);
ctx.clearRect(0, 0, WIDTH, HEIGHT);
const barWidth = (WIDTH / bufferLength) * 2.5;
let x = 0;
for (let i = 0; i < bufferLength; i++) {
const barHeight = dataArray[i] / 2;
ctx.fillStyle = `hsl(${i * 2}, 100%, 50%)`;
ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
x += barWidth + 1;
}
}
draw();关键参数说明
fftSize: 取值范围为32-32768（必须是2的幂），值越大频率分辨率越高但性能开销越大。frequencyBinCount: 等于fftSize/2，表示可获取的频率数据点数。getByteFrequencyData(): 返回0-255的归一化频率数据数组。
可选增强方案
- 平滑处理：对连续帧的数据做移动平均减少突变
- 对数缩放：人类听觉对频率的感知呈对数关系，可对低频段增加权重
- 三维渲染：使用WebGL实现更复杂的频谱粒子效果
浏览器兼容性提示
- 需处理
webkit前缀的旧版API - Safari需要用户手势（如点击事件）后才能启动音频上下文
以上代码组合即可实现基础的音频频谱分析与可视化效果，可根据需求调整FFT大小、颜色方案或渲染方式。
