了解如何使用 about://tracing 和 Audion（Chrome 开发者工具中的 WebAudio 扩展程序）在 Chrome 中分析 Web Audio 应用的性能。
您之所以会看到本文档，很可能是因为您正在开发使用 Web Audio API 的应用，但遇到了意外故障，例如输出中出现爆音，或者您听到了意想不到的声音。您可能已经参与了 crbug.com 讨论，并且有 Chrome 工程师要求您上传“跟踪数据”或查看图表可视化效果。
了解如何获取相关信息，以便我们了解问题并最终解决根本问题。
Web Audio 性能分析工具
在分析 Web Audio 时，以下两种工具将为您提供帮助：about://tracing Chrome 开发者工具中的 WebAudio 扩展程序。
您会在什么情况下使用 about://tracing？
当出现神秘的“故障”时。通过使用跟踪工具分析应用，您可以深入了解以下方面：
- 不同线程上特定函数调用所花费的时间片
- 时间轴视图中的音频回调时间
它通常会显示错过的音频回调截止时间或可能导致意外音频故障的大型垃圾回收。此信息有助于了解根本问题，因此 Chromium 工程师通常会要求提供此信息，尤其是在无法进行本地重现时。查看我们的跟踪常规说明。
何时使用 Web Audio 开发者工具扩展程序？
当您想要直观呈现音频图表并实时监控音频渲染器的性能时。音频图是一个由 AudioNode 对象组成的网络，用于生成和合成音频串流，通常非常复杂，但图拓扑结构在设计上是不透明的。（Web Audio API 没有用于节点/图表自省的功能。）您的图表中发生了一些变化，现在您听不到任何声音。接下来，就可以通过聆听来调试了。这绝非易事，而且当音频图更大时，难度会更高。Web Audio 开发者工具扩展程序可以通过直观呈现图表来帮助您。
借助此扩展程序，您可以监控正在运行的渲染容量估计值，该值表示 Web 音频渲染器在给定的渲染预算（例如，大约 2.67 毫秒 @ 48KHz）下的性能。如果容量接近 100%，则表示您的应用很可能会出现故障，因为渲染程序无法在给定的预算内完成工作。
使用 about://tracing
为获得最佳效果，请关闭所有其他标签页和窗口，并停用扩展程序。 或者，您可以启动新的 Chrome 实例，也可以使用不同发布渠道（例如 Beta 版或 Canary 版）的其他 build。浏览器准备就绪后：
- 在标签页中打开您的应用（网页）。
- 打开另一个标签页，然后前往
about://tracing。 - 按录制按钮，然后选择手动选择设置。
- 按记录类别和默认停用的类别部分中的无按钮。
- 在记录类别部分，选择以下内容：
audioblink_gcmediav8.execute（如果您对AudioWorkletJS 代码性能感兴趣）webaudio
- 在默认停用的类别部分，选择以下内容：
audio-worklet（如果您想知道AudioWorklet线程的启动位置）webaudio.audionode（如果您需要每个AudioNode的详细轨迹）
- 按底部的录制按钮。
- 返回到应用标签页，然后重新执行触发问题的步骤。
- 当您有足够的轨迹数据时，返回到“轨迹”标签页，然后按 Stop。
跟踪标签页将直观显示结果。
按保存以保存轨迹数据。
如何分析跟踪数据
跟踪数据直观地显示了 Chrome 的 Web 音频引擎如何呈现音频。 渲染器有两种不同的渲染模式：操作系统模式和 Worklet 模式。每种模式使用不同的线程模型，因此跟踪结果也会有所不同。
操作系统模式
在操作系统模式下，AudioOutputDevice 线程会运行所有 Web 音频代码。AudioOutputDevice 是源自浏览器音频服务且由音频硬件时钟驱动的实时优先级线程。如果您在此轨道中看到轨迹数据出现不规律的情况，则表示设备的回调时间可能不稳定。已知 Linux 和 Pulse Audio 的组合存在此问题。
如需了解详情，请参阅以下 Chromium 问题：#825823、#864463。
Worklet 模式
在 Worklet 模式下（其特点是从 AudioOutputDevice 到 AudioWorklet 线程的单线程跳转），您应该会在两个线程轨道中看到对齐良好的轨迹。当工作单元被激活时，所有 Web 音频操作都由 AudioWorklet 线程渲染。相应线程不是实时优先级。
此处的常见不规则情况是由垃圾回收或错过的渲染截止时间导致的大型阻塞。这两种情况都会导致音频串流出现故障。
在这两种情况下，理想的轨迹数据都具有以下特征：音频设备回调调用与渲染任务高度一致，且渲染任务在给定的渲染预算内顺利完成。这两张屏幕截图很好地展示了理想的轨迹数据。
从实际示例中学习
示例 1：超出渲染预算的渲染任务
以下屏幕截图（Chromium 问题 #796330）是一个典型示例，展示了 AudioWorkletProcessor 中的代码何时会花费过长时间并超出给定的渲染预算。回调时间表现良好，但 Web Audio API 的音频处理函数调用未能完成工作，然后才进行下一个设备回调。
您的选项：
- 通过使用较少的
AudioNode实例来减少音频图的工作负载。 - 减少
AudioWorkletProcessor中代码的工作负载。 - 将基本延迟时间增加到
AudioContext。
示例 2：工作单元线程上进行大量垃圾回收
与操作系统音频渲染线程不同，垃圾回收是在 worklet 线程上管理的。这意味着，如果您的代码执行内存分配/释放（例如，新建数组），最终会触发垃圾回收，从而同步阻塞线程。如果 Web Audio 操作和垃圾回收的工作负载大于给定的渲染预算，则会导致音频串流出现故障。以下屏幕截图展示了这种情况的一个极端示例。
您的选项：
- 预先分配内存，并尽可能重复使用。
- 根据
SharedArrayBuffer使用不同的设计模式。虽然这不是完美的解决方案，但许多 Web 音频应用都使用类似的模式，通过SharedArrayBuffer运行密集型音频代码。示例：
示例 3：来自 AudioOutputDevice 的抖动音频设备回调
对于 Web 音频，音频回调的精确时间至关重要。 这应该是系统中最精确的时钟。如果操作系统或其音频子系统无法保证可靠的回调时间，则所有后续操作都会受到影响。下图是音频回调抖动的示例。与前两张图片相比，每次回调之间的间隔差异很大。
您的选项：
- 通过调整
latencyHint选项来增加系统音频回调缓冲区大小。 - 如果您发现问题，请在 crbug.com 上提交问题，并附上跟踪数据。
使用 Web Audio DevTools 扩展程序
您还可以使用专门为 Web Audio API 设计的开发者工具扩展程序。与跟踪工具不同，此工具可实时检查图表和性能指标。
此扩展程序需要从 Chrome 应用商店安装。
安装完成后，您可以通过打开 Chrome 开发者工具并点击顶部菜单中的“Web Audio”来访问该面板。
Web Audio 面板包含四个组件：上下文选择器、属性检查器、图表可视化工具和性能监控器。
上下文选择器
由于一个网页可以包含多个 BaseAudioContext 对象，因此您可以通过此下拉菜单选择要检查的上下文。您还可以点击左侧的回收站图标来手动触发垃圾收集。
房源检查器
侧边栏显示用户所选情境或 AudioNode 的各种属性。不支持在 AudioParam 中检查动态值。
图表可视化工具
此视图会呈现用户所选上下文的当前图拓扑。此可视化图表会实时动态变化。点击可视化图表中的某个元素，即可在属性检查器中检查详细信息。
性能监视器
只有当所选 BaseAudioContext 为实时运行的 AudioContext 时，底部的状态栏才会处于活动状态。此条状图显示了所选 AudioContext 的实时音频串流质量，并每秒更新一次。它提供以下信息：
回调间隔（毫秒）：显示回调间隔的加权平均值或方差。理想情况下，平均值应保持稳定，方差应接近于零。如果看到较大差异，则表示系统级音频回调函数的时间不稳定，可能会导致音频串流质量不佳。（请参阅示例 3）。
渲染容量（百分比）：当容量接近 100% 时，表示渲染器在给定的渲染预算下执行了过多的操作，因此您应考虑减少操作（例如，在图中使用较少的
AudioNodes对象）。
您可以点击垃圾桶图标来手动触发垃圾收集器。
旧版 WebAudio 开发者工具面板
该扩展程序现在是 Chrome Web Audio 团队推荐的方法，但旧版 WebAudio 开发者工具面板也仍然可用。如需访问此面板，请点击开发者工具右上角的“三点状”菜单，然后依次前往更多工具和 WebAudio。
总结
调试音频是一项艰巨的任务。在浏览器中调试音频更加困难。不过，这些工具可以为您提供有关 Web 音频代码性能的实用数据洞见，从而减轻您的痛苦。不过，在某些情况下，您可能会发现 Chrome 或扩展程序存在问题。 在 crbug.com 上提交 bug 或在扩展程序问题跟踪器上提交 bug。