1 files changed, 38 insertions, 0 deletions
diff --git a/files/zh-cn/tools/web_audio_editor/index.html b/files/zh-cn/tools/web_audio_editor/index.html
new file mode 100644
index 0000000000..cc5c8bd4f7
--- /dev/null
+++ b/files/zh-cn/tools/web_audio_editor/index.html
@@ -0,0 +1,38 @@
+---
+title: Web 音频编辑器
+slug: Tools/Web音频编辑器
+tags:
+  - 工具
+translation_of: Tools/Web_Audio_Editor
+---
+<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">
+ <p>Web 音频编辑器在 Firefox 32 推出。</p>
+</div>
+<p>开发者通过 <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API</a> 可以创建 {{domxref ("AudioContext", "audio context")}}。在该上下文环境中，开发者可以构建多个 {{domxref ("AudioNode", "audio nodes")}}，它们包括:</p>
+<ul>
+ <li>提供 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API#Defining_audio_sources">音源</a> 的节点，例如振荡器（ an oscillator） 或者数据缓冲源（a data buffer source）</li>
+ <li>提供进行 <a href="/en-US/docs/Web/API/Web_Audio_API#Defining_audio_effects_filters">音频变换</a> 的节点，例如延时和增益</li>
+ <li>提供指定 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API#Defining_audio_destinations">音频流输出端</a>，例如扬声器</li>
+</ul>
+<p>每个节点可能没有也可能具有多个 可以配置它们的行为的 {{domxref ("AudioParam")}} 属性。例如，{{domxref ("GainNode")}} 这个节点拥有一个 <code>gain</code> 属性，而 {{domxref ("OscillatorNode")}} 节点则拥有 <code>frequency</code> 和<code>detune</code> 两个属性。</p>
+<p>开发者可以在图像中连接每个节点，而整个图像则定义了音频流的行为。</p>
+<p>Web 音频编辑器检测创建于页面中的音频上下文环境，然后提供一个可视化的图像，从高可视化角度帮助您查看 Web 音频编辑器的操作，也使您能够确认每一个节点都以您的语预期连接在一起。然后您可以检测并编辑每一个图像中的节点 <code>AudioParam</code> 属性。部分不是 <code>AudioParam</code> 的属性也会显示出来<span style="line-height: 1.5;">，如 </span><code style="font-style: normal; line-height: 1.5;">OscillatorNode 的</code><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">type</code><span style="line-height: 1.5;"> 属性，您同样可以编辑这些属性。</span></p>
+<p>这个工具仍然处于实验阶段。如果您发现了问题，欢迎您到 <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor">Bugzilla 提交这些问题</a>。如果您希望反馈信息或者提供新特征的建议，请您到 <a href="http://ffdevtools.uservoice.com/forums/246087-firefox-developer-tools-ideas">ffdevtools.uservoice.com</a> 或者 <a href="http://twitter.com/firefoxdevtools">Twitter</a> 提交这些信息。</p>
+<h2 id="打开_Web_音频编辑器">打开 Web 音频编辑器</h2>
+<p>在 Firefox 32 的默认条件下 Web 音频编辑器并没启用，您可以打开 <a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox#Settings_2">开发者工具</a> 然后勾选"Web 音频"来启用 Web 音频编辑器。现在，在 <a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox#Toolbar">开发者工具栏</a> 那里会多出一个"Web音频“选项卡。点击这个选项卡，然后加载创建了音频上下文环境的页面。 这里有两个演示：</p>
+<ul>
+ <li><a href="https://github.com/mdn/voice-change-o-matic">Voice-change-O-Matic</a>，它可以为麦克风声音应用不同的音频效果，同时提供一个可视化的图像预览结果</li>
+ <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>，当您移动鼠标的时候，它可以改变正弦波的音调和音量</li>
+</ul>
+<h2 id="可视化图像">可视化图像</h2>
+<p>Web 音频编辑器现在可以显示一张加载完成后的音频上下文环境的图像。下图是 Violent Theremin 演示的图像：</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/8815/web-audio-editor-graph.png" style="display: block; margin-left: auto; margin-right: auto;">你可以看到，它使用了三个节点：作为源输入的 {{domxref ("OscillatorNode")}} ，作为音量控制的 {{domxref ("GainNode")}}，以及作为音源输出的 {{domxref ("GainNode")}} 。</p>
+<h3 id="与_AudioParams_连接">与 AudioParams 连接</h3>
+<div class="geckoVersionNote">
+ <p>显示与 AudioParams 连接的功能在 Firefox 34 版本中推出。</p>
+</div>
+<p>我们使用了直线线条来显示节点与节点之间的连接。然而，如果你把一个节点<a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioNode.connect%28AudioParam%29">连接到了另一个节点的 AudioParam</a>，那么这两个节点之间的连接将显示为一条虚线，并且标记了 AudioParam 的属性名称：<img alt="" src="https://mdn.mozillademos.org/files/8819/web%20audio-editor-connect-param.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<h2 id="检测与修改_AudioNodes">检测与修改 AudioNodes</h2>
+<p>如果你点击了一个节点，这个节点将被高亮，然后在右手边你将看到一个节点查看器。这个节点检查器列出了当前节点的 AudioParam 各个属性的值。例如，下图显示的是  OscillatorNode 节点:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/8817/web-audio-editor-node.png" style="display: block; margin-left: auto; margin-right: auto;">当用户的鼠标左右移动的时候，Violent Theremin 会随之修改 frequency 参数，您可以在节点查看器中查看到新的参数值。但是，这个参数值并非实时更新：您必须再次点击节点，才能看到更新后的值。</p>
+<p>如果您在节点检查器中点击了某一个属性值，那么你就可以修改这个属性值：按下回车或者 Tab 键就可以使新的属性值立即生效。</p>