Mozilla Hacks

Firefox 开发者工具中的 Web 音频编辑器

Avatar photo 作者：Jordan Santell，Robert Nyman [荣誉编辑]

发布于 2014 年 6 月 18 日 发布在 音频，开发者工具 和 精选文章

在 Firefox 32 中，Web 音频编辑器加入了 Shader 编辑器和 Canvas 调试器，成为了 Firefox 开发者工具的一部分，用于调试 Web 上的媒体丰富内容。在使用 Web 音频开发 HTML5 游戏或有趣的合成器时，Web 音频编辑器有助于可视化和修改 Web 音频 AudioContext 中的所有音频节点。

可视化音频上下文

在处理 Web 音频 API 的模块化路由时，仅仅通过听音频输出，很难理解所有音频节点是如何连接的。通常，仅仅通过听输出和查看创建音频节点的命令式代码来调试 AudioContext 是具有挑战性的。使用 Web 音频编辑器，所有 音频节点 都被渲染成有向图，展示了所有音频节点的层次结构和连接。使用渲染后的图，开发人员可以确保所有节点都按预期方式连接。当上下文变得复杂时，这尤其有用，例如，一个节点网络用于操纵音频，另一个网络用于分析数据，并且我们已经看到一些 Web 音频的令人印象深刻的应用 产生了这样的图！

要启用 Web 音频编辑器，请在开发者工具中打开选项，然后选中“Web 音频编辑器”选项。启用后，打开工具并重新加载页面，以便工具可以监控所有 Web 音频活动。当创建新的音频节点，或者当节点彼此连接和断开连接时，图形将使用上下文的最新表示进行更新。

修改音频节点属性

渲染图形后，可以检查各个音频节点。单击图形中的音频节点会打开音频节点检查器，在那里可以查看和修改 音频参数 和节点上的特定属性。

未来工作

这只是 Web 音频编辑器的第一个可发布版本，我们期待让这款工具对所有音频开发者来说更加强大。

  • 为正在播放的节点提供视觉反馈，以及时域/频域可视化。
  • 能够从编辑器创建、连接和断开音频节点。
  • 调试 onaudioprocess 事件和音频故障的工具。
  • 显示额外的 AudioContext 信息并支持多个上下文。
  • 在节点检查器中修改不仅仅是基本类型，例如添加音频缓冲区。

我们有许多 梦想功能和想法 我们很兴奋，你可以查看所有 未解决的错误 针对 Web 音频编辑器或 提交新的错误。请务必查看 MDN 文档 关于 Web 音频编辑器，我们也非常乐意 在 UserVoice 反馈渠道和 Twitter @firefoxdevtools 上获得您的反馈和想法。

关于 Jordan Santell

Mozilla 工作人员，音频工具和 SDK 黑客，Web 音频爱好者，金属乐爱好者

更多由 Jordan Santell撰写的文章…

关于 Robert Nyman [荣誉编辑]

Mozilla Hacks 的技术布道者和编辑。他发表演讲并撰写关于 HTML5、JavaScript 和开放 Web 的博客。Robert 坚信 HTML5 和开放 Web，自 1999 年以来一直在为 Web 进行前端开发 - 在瑞典和纽约市。他还定期在 http://robertnyman.com 上写博客，喜欢旅行和结识新朋友。

更多由 Robert Nyman [荣誉编辑]撰写的文章…

16 条评论

  1. Carl Sutherland

    使用什么库进行图形布局？

    2014 年 6 月 18 日 下午 11:07

    1. Jordan Santell

      目前使用 D3[1] 进行渲染，使用 dagre[2] 计算有向无环图中项目的定位。我们希望移除 D3 依赖关系，并在 SVG 中以原生方式进行自己的渲染（就像其他工具一样），并尝试不同的图形渲染方式（例如，可视化连接到另一个节点的音频参数的音频节点）。

      [1] https://d3js.cn/
      [2] https://github.com/cpettitt/dagre

      2014 年 6 月 18 日 下午 11:24

      1. Simon Speich

        也许这个图形库会有帮助 https://github.com/speich/dGraph

        2014 年 6 月 25 日 上午 3:22

      2. Jan

        出于好奇，为什么要摆脱 D3 依赖关系？仅仅是为了与其他工具保持一致，还是 D3 有什么限制？我们即将在一个新项目中使用 D3。

        2014 年 6 月 29 日 下午 1:52

  2. Dominik

    这真的很酷，但是开发者工具什么时候会添加类似 Chrome 的 Timeline 的东西来帮助调试渲染性能问题？

    2014 年 6 月 18 日 下午 12:23

    1. Paul Rouget

      我们正在研究这个问题。我们有工程师正在开发工具来监控 Gecko 的性能。

      2014 年 6 月 18 日 下午 12:37

      1. Dominik

        太好了，期待着它们！

        2014 年 6 月 19 日 上午 2:48

    2. K. Gadd

      SPS 分析器插件 (https://mdn.org.cn/en-US/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler) 具有非常详细的采样模式，在顶部显示一个简单的时间线，其中包含渲染、帧边界等的标记，以及 GC 和重新编译的标记。到目前为止，它在调试渲染性能方面非常有用；对我来说，它比 Chrome 的分析器更有用，尽管功能不尽相同。

      2014 年 6 月 18 日 下午 6:13

      1. Dominik

        我会尝试一下，谢谢！

        2014 年 6 月 19 日 上午 2:49

  3. Alex

    我正在尝试使用 Web 音频编辑器来测试我一直在开发的游戏。每次我播放声音时，我都要创建一个新的 AudioBufferSourceNode 和一个与之配套的增益节点。我的 Web 音频面板很快就被孤立的 AudioBufferSourceNode 实例填满了！它们通常会像这样一直存在于内存中吗？我在任何地方都找不到它们的销毁方法，并且我确信一旦声音播放完毕，我就将所有引用置空。还是仅仅是 Web 音频面板本身使它们持久存在？

    2014 年 6 月 20 日 上午 4:31

    1. Jordan Santell

      清除已被 GC 的节点需要花费大量工作，但应该在下一个版本 (Fx33) 中准备好——这对于创建大量 AudioBufferSourceNode 的用例非常重要，就像你遇到的那样！这也有助于确认你的节点是否被正确清理（是否存在对它们的强引用？它们是否已从上下文中断开连接？）。

      关注错误 994263 [1]，以便前端反映这些更改并隐藏 GC 的节点

      [1] https://bugzilla.mozilla.org/showdependencytree.cgi?id=994263&hide_resolved=0

      2014 年 6 月 20 日 上午 10:25

      1. Alex

        太棒了，期待尝试更新后的版本，看看我的 GC 的节点消失！就目前而言，这款工具已经帮助我发现了一些代码中的错误，非常感谢它。

        2014 年 6 月 20 日 上午 10:49

        1. Jordan Santell

          很高兴听到这个消息！如果你对最新功能感兴趣，可以尝试 Nightly[1] 构建，它总是包含工具中的最新和最棒的功能。

          [1] http://nightly.mozilla.org/

          2014 年 6 月 20 日 下午 4:24

          1. Alex

            哦，太酷了，我会尝试使用 nightly 构建——感谢您的提示。

            2014 年 6 月 20 日 下午 11:02

  4. Anthony Baxter

    哇，太棒了，干得漂亮

    2014 年 6 月 21 日 下午 8:26

  5. Ukash Kart

    我们有工程师正在开发工具来监控 Gecko 的性能

    2014年7月1日 上午7:34

本文评论已关闭。