必须用 Web Audio API + audio.src 接入媒体流：先创建 AudioContext，再用 createMediaElementSource 桥接 audio 元素，连 AnalyserNode 获取频谱/波形数据；需注意加载完成、跨域、用户手势激活上下文等前提条件。
audio 元素本身不提供直接读取音频数据的能力
HTML5 的 标签只是播放容器，它不暴露原始 PCM 数据、采样率或帧缓冲区。想“获取音频数据”，必须绕过纯 ，改用 Web Audio API 配合 MediaElementAudioSourceNode 桥接。
必须用 Web Audio API + audio.src 接入媒体流
核心路径是：先创建 AudioContext，再用 ctx.createMediaElementSource(audioEl) 把 转成可分析的音频节点。之后才能连上 AnalyserNode 或 ScriptProcessorNode（已废弃）/ AudioWorklet（推荐）来抓数据。
常见错误包括：
- 在
audio未加载完成（loadedmetadata事件前）就调用createMediaElementSource - 忽略跨域限制：若
audio.src是外链且服务端没配Access-Control-Allow-Origin，createMediaElementSource会静默失败 - 未启用
AudioContext（需用户手势触发，如点击后调用ctx.resume()）
用 AnalyserNode 实时读频谱或波形数据
AnalyserNode 是最轻量、兼容性最好的取数方式，适合可视化（如柱状频谱图、波形条）。它不修改音频，只提供当前帧的 FFT 或时域数据。
立即学习“前端免费学习笔记（深入）”；
关键参数注意点：
-
analyser.fftSize决定频率分辨率，默认 2048；值越大，频率粒度越细，但计算开销略增 -
analyser.smoothingTimeConstant控制历史数据衰减速度（0–1），0.8 是常用值，太小会导致跳变剧烈 - 读取时必须用
Uint8Array或Float32Array配合getByteFrequencyData()/getByteTimeDomainData()
const ctx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = ctx.createAnalyser();
analyser.fftSize = 1024;
analyser.smoothingTimeConstant = 0.7;
const audio = document.querySelector('audio');
const source = ctx.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(ctx.destination);
// 每帧读取频谱
function draw() {
const freqData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(freqData);
// freqData 现在包含 0–255 的频段能量值
}
要原始 PCM 样本？必须用 AudioWorklet + AudioWorkletProcessor
如果需要毫秒级对齐的原始 PCM（比如做音频指纹、VAD、自定义滤波），AnalyserNode 不够用——它只输出压缩后的频域能量或粗粒度波形。此时必须走 AudioWorklet 路线：
- 注册独立的
AudioWorkletProcessor脚本（不能写在主页面里） - 在 processor 中通过
inputs[0][0]访问每声道浮点样本数组（-1.0 ~ +1.0） - 用
port.postMessage()将处理后的数据发回主线程（注意避免高频 postMessage 崩溃主线程） - Chrome ≥ 72、Firefox ≥ 75 支持；Safari 目前仍不支持 AudioWorklet
这个路径复杂度高、调试困难，且移动端兼容性差。多数场景下，用 AnalyserNode + 时间戳对齐，已能满足“音频取数”需求。
真正容易被忽略的是：所有音频数据读取都依赖播放状态和上下文激活。哪怕代码全对，用户没点过页面、或标签页被挂起，AudioContext 就不会跑，数据自然为空。
