html5音频实时波形绘制需用web audio api接入audio元素、配置analysernode，调用getbytetimedomaindata获取时域数据并映射至canvas坐标，配合requestanimationframe优化渲染，注意移动端兼容性及跨域限制。

HTML5 音频播放时实时绘制波形，核心在于利用 Web Audio API 采集音频数据，并通过 Canvas 或 SVG 动态渲染。它不是靠预生成的波形图，而是边播放边分析、边绘制，对性能和精度都有一定要求。

获取音频上下文与分析节点

必须将 <audio></audio> 元素接入 Web Audio 图（AudioContext），才能获取实时频域或时域数据：

• 创建 AudioContext（注意移动端需用户手势触发）
• 用 context.createMediaElementSource(audioEl) 将音频元素接入图
• 连接一个 AnalyserNode，设置 fftSize（如 256 或 512）和 smoothingTimeConstant（控制响应灵敏度，默认 0.8）
• 确保 Analyser 节点已连接到目的地（哪怕只是 context.destination），否则部分浏览器不更新数据

读取时域数据并映射为波形

波形图本质是音频信号在时间轴上的振幅变化，应使用 getByteTimeDomainData() 获取时域数据：

Article To Html

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

下载

• 分配一个 Uint8Array（长度等于 analyser.frequencyBinCount，通常为 fftSize / 2）
• 每帧调用 analyser.getByteTimeDomainData(array)，得到 0–255 的归一化振幅值
• 将数组值线性映射到 Canvas 坐标（例如：y = height/2 ± (value - 128) × scale）
• 避免直接用 getByteFrequencyData() 画“波形”，那是频谱图，不是时域波形

Canvas 渲染优化策略

高频重绘易掉帧，需平衡流畅性与实时性：

• 使用 requestAnimationFrame 替代 setInterval，与屏幕刷新率同步
• 清空画布时用 ctx.clearRect(0, 0, width, height)，比 fillRect 更高效
• 绘制时优先用 ctx.beginPath() → ctx.lineTo() → ctx.stroke() 连线，而非逐点 drawImage 或 fillRect
• 可考虑只重绘新增部分（滚动波形），或降采样（每 2–4 个数据点取 1 个）减少计算量

处理常见兼容性与陷阱

实际落地时容易卡在细节：

• 移动端 Safari 对 MediaElementSource 支持较晚（iOS 14.5+），且需用户操作后才允许启动 AudioContext
• Chrome 中若音频未设置 crossOrigin="anonymous" 且来自跨域资源，Analyser 会返回全零数据
• 静音或暂停状态下 getByteTimeDomainData 仍可能返回旧数据，建议结合 audioEl.paused 和 audioEl.muted 判断是否跳过绘制
• 低采样率音频（如 8kHz）可能导致波形稀疏，可插值补点或调整 canvas width 适配

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！