本文介绍如何使用 Web Audio API 的 decodeAudioData() 方法离线解析音频文件，逐秒计算 RMS 值并转换为近似分贝（dBFS），全程无需播放音频，结果可存入数组供可视化或分析使用。
本文介绍如何使用 web audio api 的 `decodeaudiodata()` 方法离线解析音频文件，逐秒计算 rms 值并转换为近似分贝（dbfs），全程无需播放音频，结果可存入数组供可视化或分析使用。
在 Web 环境中，若想获取音频文件的响度特征（如每秒 RMS 或等效分贝值），绝不能依赖 MediaElementSourceNode + 播放状态监听——因为未播放时音频元素输出静音，onaudioprocess 只会收到全零数据（正如你观察到的“数千个 0”）。正确方案是：将音频文件解码为 AudioBuffer，再对缓冲区采样数据进行离线分析。
AudioContext.decodeAudioData() 接收 ArrayBuffer（非 Data URL！），返回 Promise，解析后即可直接访问各声道 PCM 数据。注意：readAsDataURL 生成的是 Base64 字符串，必须改用 readAsArrayBuffer 才能用于解码。
以下是完整、可运行的教程级实现：
export default function getAudioDecibels(selector) {
const input = document.querySelector(selector);
input.addEventListener('change', async (e) => {
if (!e.target.files.length) return;
const file = e.target.files[0];
const arrayBuffer = await file.arrayBuffer(); // ✅ 直接获取 ArrayBuffer
try {
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer);
// 提取左声道（单声道则取 channel 0）
const channelData = audioBuffer.getChannelData(0);
const sampleRate = audioBuffer.sampleRate;
const durationSec = audioBuffer.duration;
// 每秒采样点数 → 每秒截取一个片段
const samplesPerSecond = sampleRate;
const decibelArray = [];
// 遍历每秒（向下取整，最后一秒不足也计入）
for (let sec = 0; sec 0 ? 20 * Math.log10(rms) : -Infinity;
decibelArray.push(parseFloat(dbfs.toFixed(2)));
}
console.log('每秒 dBFS 数组:', decibelArray);
return decibelArray;
} catch (err) {
console.error('音频解码或分析失败:', err);
throw err;
}
});
}
// 使用示例：
getAudioDecibels('#audio-input'); // HTML 中需有 <input type="file" id="audio-input">
✅ 关键要点说明：
-
必须用
file.arrayBuffer()：decodeAudioData()不接受 Data URL 或 Blob，仅接受ArrayBuffer； -
AudioBuffer是离线数据容器：解码后所有 PCM 样本已加载至内存，可任意随机访问，无需播放； -
RMS → dBFS 公式：
dBFS = 20 * log10(RMS)，因 Web Audio PCM 值范围为[-1, 1]，故 RMS ∈ [0,1]，dBFS ∈ [-∞, 0]； - 精度提示：实际应用中，若需更平滑的响度曲线（如符合 EBU R128 标准），应使用加权滤波与短时能量积分，但本例的“每秒 RMS”已满足基础分析需求；
-
性能注意：大文件（如 >100MB）解码可能阻塞主线程，建议在
Worker中处理，或使用AudioWorklet进行流式分析。
最终，decibelArray 即为你所需的每秒分贝数组，可直接用于绘制波形图、生成响度热力图，或作为音频质量检测的输入特征。
