Web 音频编辑器

Web 音频编辑器在 Firefox 32 推出。

开发者通过 Web Audio API 可以创建 audio context。在该上下文环境中,开发者可以构建多个 audio nodes,它们包括:

  • 提供 音源 的节点,例如振荡器( an oscillator) 或者数据缓冲源(a data buffer source)
  • 提供进行 音频变换 的节点,例如延时和增益
  • 提供指定 音频流输出端,例如扬声器

每个节点可能没有也可能具有多个 可以配置它们的行为的 AudioParam 属性。例如,GainNode 这个节点拥有一个 gain 属性,而 OscillatorNode 节点则拥有 frequencydetune 两个属性。

开发者可以在图像中连接每个节点,而整个图像则定义了音频流的行为。

Web 音频编辑器检测创建于页面中的音频上下文环境,然后提供一个可视化的图像,从高可视化角度帮助您查看 Web 音频编辑器的操作,也使您能够确认每一个节点都以您的语预期连接在一起。然后您可以检测并编辑每一个图像中的节点 AudioParam 属性。部分不是 AudioParam 的属性也会显示出来,如 OscillatorNode 的 type 属性,您同样可以编辑这些属性。

这个工具仍然处于实验阶段。如果您发现了问题,欢迎您到 Bugzilla 提交这些问题。如果您希望反馈信息或者提供新特征的建议,请您到 ffdevtools.uservoice.com 或者 Twitter 提交这些信息。

打开 Web 音频编辑器

在 Firefox 32 的默认条件下 Web 音频编辑器并没启用,您可以打开 开发者工具 然后勾选"Web 音频"来启用 Web 音频编辑器。现在,在 开发者工具栏 那里会多出一个"Web音频“选项卡。点击这个选项卡,然后加载创建了音频上下文环境的页面。 这里有两个演示:

  • Voice-change-O-Matic,它可以为麦克风声音应用不同的音频效果,同时提供一个可视化的图像预览结果
  • Violent Theremin,当您移动鼠标的时候,它可以改变正弦波的音调和音量

可视化图像

Web 音频编辑器现在可以显示一张加载完成后的音频上下文环境的图像。下图是 Violent Theremin 演示的图像:

你可以看到,它使用了三个节点:作为源输入的 OscillatorNode ,作为音量控制的 GainNode,以及作为音源输出的 GainNode

与 AudioParams 连接

显示与 AudioParams 连接的功能在 Firefox 34 版本中推出。

我们使用了直线线条来显示节点与节点之间的连接。然而,如果你把一个节点连接到了另一个节点的 AudioParam,那么这两个节点之间的连接将显示为一条虚线,并且标记了 AudioParam 的属性名称:

检测与修改 AudioNodes

如果你点击了一个节点,这个节点将被高亮,然后在右手边你将看到一个节点查看器。这个节点检查器列出了当前节点的 AudioParam 各个属性的值。例如,下图显示的是  OscillatorNode 节点:

当用户的鼠标左右移动的时候,Violent Theremin 会随之修改 frequency 参数,您可以在节点查看器中查看到新的参数值。但是,这个参数值并非实时更新:您必须再次点击节点,才能看到更新后的值。

如果您在节点检查器中点击了某一个属性值,那么你就可以修改这个属性值:按下回车或者 Tab 键就可以使新的属性值立即生效。

文档标签和贡献者

标签: 
 此页面的贡献者: ab233, DorayHong
 最后编辑者: ab233,