HTML5 Web Audio API 实现音频低通滤波器效果-H5教程-PHP中文网

可用web audio api的biquadfilternode实现低通滤波器，需创建节点并设type为"lowpass"，通过frequency控制截止频率，用setvalueattime与exponentialramptovalueattime平滑调节，q值影响共振，建议保持0.7–1.2以避免失真。

html5 web audio api 实现音频低通滤波器效果

可以用 Web Audio API 的 BiquadFilterNode 轻松实现低通滤波器效果，核心是创建滤波节点并设为 "lowpass" 类型，再调节 frequency 参数控制截止频率。

创建并连接低通滤波节点

先获取音频上下文，创建滤波器节点，设置类型和初始截止频率（单位 Hz），然后插入到音频处理图中：

调用 audioContext.createBiquadFilter() 创建节点
设置 filter.type = "lowpass"
设置 filter.frequency.value = 1000（例如 1kHz 截止）
按顺序连接：源 → 滤波器 → 目标（如 destination）

动态调节截止频率

低通效果的实时控制依赖于平滑、可交互的频率调整：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

直接赋值 filter.frequency.value 可立即生效，但可能产生爆音
推荐使用 setValueAtTime() + exponentialRampToValueAtTime() 实现无跳变过渡
例如：filter.frequency.setValueAtTime(2000, audioContext.currentTime); filter.frequency.exponentialRampToValueAtTime(500, audioContext.currentTime + 0.1);
配合 range input 或旋钮控件，即可做成可拖拽的低通调节器

注意 Q 值与共振效果

Q 参数影响滤波器斜率和截止附近的增益峰：

filter.Q.value = 1 是较自然的响应；值越大，截止频率处越尖锐、越有“嗡鸣感”
过高（如 > 20）可能导致自激振荡，尤其在高增益或反馈路径中需谨慎
若仅需干净衰减，保持 Q 在 0.7–1.2 区间更稳妥

完整最小示例（含播放与控制）

以下代码加载一段音频并添加可调低通滤波器：

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const filter = audioContext.createBiquadFilter();
filter.type = "lowpass";
filter.frequency.value = 2000;
filter.Q.value = 1;

// 假设已有 audioElement
const source = audioContext.createMediaElementSource(audioElement);
source.connect(filter);
filter.connect(audioContext.destination);

// 绑定滑块：<input type="range" id="cutoff" min="20" max="20000" value="2000">
document.getElementById("cutoff").addEventListener("input", e => {
  const freq = parseFloat(e.target.value);
  filter.frequency.exponentialRampToValueAtTime(freq, audioContext.currentTime);
});