怎么使用HTML5中AudioContext的MediaElementSource实现网页均衡器-H5教程-PHP中文网

使用MediaElementSource将audio元素接入Web Audio API，再通过多个BiquadFilterNode（如lowshelf、peaking、highshelf）分别调节不同频段增益，实现可交互网页均衡器。

怎么使用html5中audiocontext的mediaelementsource实现网页均衡器

使用 AudioContext 的 MediaElementSource 实现网页均衡器，核心在于：**把元素接入 Web Audio API，再通过 BiquadFilterNode 对不同频段分别调节增益**。它不修改原始音频文件，而是实时处理播放流，适合做可交互的图形化均衡器（如滑块控制低/中/高音）。

1. 创建 AudioContext 并连接 audio 元素

先获取元素，用 AudioContext.createMediaElementSource() 将其转为音频源节点。注意：必须在用户手势（如点击）后初始化 AudioContext，否则现代浏览器会静音或报错。

const audio = document.querySelector('audio');
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// 用户点击后才创建 source，避免自动播放限制
document.querySelector('#playBtn').addEventListener('click', () => {
  const source = audioCtx.createMediaElementSource(audio);
  // 后续接滤波器和目的地
  source.connect(analyser); // 可选：加分析节点
  analyser.connect(gainNode);
  gainNode.connect(audioCtx.destination);
});

2. 添加多个 BiquadFilterNode 控制频段

均衡器本质是多个二阶滤波器并联或串联。常用做法是：用 3–5 个 BiquadFilterNode 分别覆盖低频（~100Hz）、中低频（~500Hz）、中频（~1.5kHz）、中高频（~4kHz）、高频（~10kHz），每个设为 "peaking" 类型，通过 gain 属性动态调节增益（单位：dB）。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

低频滤波器：type = "lowshelf" 或 "peaking"，frequency = 100，Q = 1
中频滤波器：type = "peaking"，frequency = 1500，Q = 1.5
高频滤波器：type = "highshelf" 或 "peaking"，frequency = 8000，Q = 1
所有滤波器 gain.value 初始为 0（无增强/衰减）

3. 构建滤波链并支持动态调节

推荐将滤波器串联（一个接一个），保证相位一致性；也可用 ChannelSplitter + 多路并行处理（更专业但复杂）。关键是要把每个滤波器的 gain 绑定到 UI 滑块（）：

const lowFilter = audioCtx.createBiquadFilter();
lowFilter.type = 'peaking';
lowFilter.frequency.value = 100;
lowFilter.Q.value = 1;

document.querySelector('#low-slider').addEventListener('input', e => {
  lowFilter.gain.value = parseFloat(e.target.value); // -12 ~ +12 dB
});

// 接入链路：source → lowFilter → midFilter → highFilter → destination
source.connect(lowFilter);
lowFilter.connect(midFilter);
midFilter.connect(highFilter);
highFilter.connect(audioCtx.destination);