initial commit

9 files changed, 1110 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/analysernode/analysernode/index.html b/files/zh-cn/web/api/analysernode/analysernode/index.html
new file mode 100644
index 0000000000..acc1b2e7a6
--- /dev/null
+++ b/files/zh-cn/web/api/analysernode/analysernode/index.html
@@ -0,0 +1,59 @@
+---
+title: AnalyserNode.AnalyserNode()
+slug: Web/API/AnalyserNode/AnalyserNode
+translation_of: Web/API/AnalyserNode/AnalyserNode
+---
+<p>{{APIRef("'Web Audio API'")}}</p>
+
+<p><span class="seoSummary">The <strong><code>AnalyserNode</code></strong> constructor of the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> creates a new {{domxref("AnalyserNode")}} object instance.</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var analyserNode = new AnalyserNode(context, options)</pre>
+
+<h3 id="参数">参数</h3>
+
+<p><em>继承参数自 {{domxref("AudioNodeOptions")}} 字典</em>.</p>
+
+<dl>
+ <dt><em>context</em></dt>
+ <dd>{{domxref("AudioContext")}} 的引用.</dd>
+ <dt><em>options</em> {{optional_inline}}</dt>
+ <dd>Options are as follows:
+ <ul>
+  <li><code>fftSize</code>: 用于频域分析的FFT初始尺寸。默认值是2048。</li>
+  <li><code>maxDecibels</code>: 用于FFT分析的初始最大功率（dB）。默认值是-30。</li>
+  <li><code>minDecibels</code>: 用于FFT分析的初始最小功率（dB）。默认值是-100。</li>
+  <li><code>smoothingTimeConstant</code>: 用于FFT分析的初始平滑常数。默认值是0.8。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>A new {{domxref("AnalyserNode")}} object instance.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API','#the-analysernode-interface','AnalyserNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.AnalyserNode.AnalyserNode")}}</p>
+</div>
diff --git a/files/zh-cn/web/api/analysernode/fft/index.html b/files/zh-cn/web/api/analysernode/fft/index.html
new file mode 100644
index 0000000000..f553738351
--- /dev/null
+++ b/files/zh-cn/web/api/analysernode/fft/index.html
@@ -0,0 +1,7 @@
+---
+title: Directory failure 目录失效
+slug: Web/API/AnalyserNode/fft
+---
+<p>目录失效</p>
+
+<p dir="ltr" id="tw-target-text">Directory failure</p>
diff --git a/files/zh-cn/web/api/analysernode/fftsize/index.html b/files/zh-cn/web/api/analysernode/fftsize/index.html
new file mode 100644
index 0000000000..5ce7d04462
--- /dev/null
+++ b/files/zh-cn/web/api/analysernode/fftsize/index.html
@@ -0,0 +1,162 @@
+---
+title: AnalyserNode.fftSize
+slug: Web/API/AnalyserNode/fftSize
+translation_of: Web/API/AnalyserNode/fftSize
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p>{{ domxref("AnalyserNode") }} 接口的 <code>fftSize</code> 属性的值是一个无符号长整型的值, 表示（信号）样本的窗口大小。当执行<a href="/en-US/docs/" title="/en-US/docs/">快速傅里叶变换</a>（Fast Fourier Transfor (FFT)）时，这些（信号）样本被用来获取频域数据。</p>
+
+<p>fftSize 属性的值必须是从32到32768范围内的2的非零幂; 其默认值为2048.</p>
+
+<div class="note">
+<p><span style="font-size: 14px;"><strong>注意</strong></span>: 如果其值不是2的幂, 或者它在指定范围之外, 则抛出异常INDEX_SIZE_ERR.</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: js">var audioCtx = new AudioContext();
+var analyser = audioCtx.createAnalyser();
+analyser.fftSize = 2048;
+</pre>
+
+<h3 id="值">值</h3>
+
+<p>一个无符号长整型.</p>
+
+<h2 id="例子">例子</h2>
+
+<p>下面的例子展示了 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/AudioContext" title="AudioContext接口表示由音频模块连接而成的音频处理图，每个模块对应一个AudioNode。AudioContext可以控制它所包含的节点的创建，以及音频处理、解码操作的执行。做任何事情之前都要先创建AudioContext对象，因为一切都发生在这个环境之中。"><code>AudioContext</code></a> 创建一个 <code>AnalyserNode</code>, 然后用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame" title="window.requestAnimationFrame()这个方法是用来在页面重绘之前，通知浏览器调用一个指定的函数，以满足开发者操作动画的需求。这个方法接受一个函数为参，该函数会在重绘前调用。"><code>requestAnimationFrame</code></a> 和 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas" title="&lt;canvas>元素可被用来通过脚本（通常是JavaScript）绘制图形。比如,它可以被用来绘制图形,制作图片集合,甚至用来实现动画效果。你可以(也应该)在元素标签内写入可提供替代的的代码内容，这些内容将会在在旧的、不支持&lt;canvas>元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现。"><code>&lt;canvas&gt;</code></a> 去反复收集当前音频的时域数据, 并绘制为一个示波器风格的输出(频谱).</p>
+
+<p>更多的例子/信息, 查看 <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 演示 (相关代码在 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 在 128行~205行</a>).</p>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+
+  ...
+
+analyser.fftSize = 2048;
+var bufferLength = analyser.fftSize;
+var dataArray = new Uint8Array(bufferLength);
+analyser.getByteTimeDomainData(dataArray);
+
+// draw an oscilloscope of the current audio source
+
+function draw() {
+
+      drawVisual = requestAnimationFrame(draw);
+
+      analyser.getByteTimeDomainData(dataArray);
+
+      canvasCtx.fillStyle = 'rgb(200, 200, 200)';
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+      canvasCtx.lineWidth = 2;
+      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+      canvasCtx.beginPath();
+
+      var sliceWidth = WIDTH * 1.0 / bufferLength;
+      var x = 0;
+
+      for(var i = 0; i &lt; bufferLength; i++) {
+
+        var v = dataArray[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+
+      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };
+
+    draw();</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-fftSize', 'fftSize')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="相关内容">相关内容</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/analysernode/frequencybincount/index.html b/files/zh-cn/web/api/analysernode/frequencybincount/index.html
new file mode 100644
index 0000000000..5ddcd887de
--- /dev/null
+++ b/files/zh-cn/web/api/analysernode/frequencybincount/index.html
@@ -0,0 +1,141 @@
+---
+title: AnalyserNode.frequencyBinCount
+slug: Web/API/AnalyserNode/frequencyBinCount
+translation_of: Web/API/AnalyserNode/frequencyBinCount
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p><strong><code>frequencyBinCount</code></strong> 的值固定为 {{ domxref("AnalyserNode") }} 接口中fftSize值的一半. 该属性通常用于可视化的数据值的数量.</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: js">var audioCtx = new AudioContext();
+var analyser = audioCtx.createAnalyser();
+var bufferLength = analyser.frequencyBinCount;
+</pre>
+
+<h3 id="值类型">值类型</h3>
+
+<p>无符号长整形(unsigned long).</p>
+
+<h2 id="例子">例子</h2>
+
+<p>下面的例子展示了 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/AudioContext" title="AudioContext接口表示由音频模块连接而成的音频处理图，每个模块对应一个AudioNode。AudioContext可以控制它所包含的节点的创建，以及音频处理、解码操作的执行。做任何事情之前都要先创建AudioContext对象，因为一切都发生在这个环境之中。"><code>AudioContext</code></a> 创建一个 <code>AnalyserNode</code>, 然后用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame" title="window.requestAnimationFrame()这个方法是用来在页面重绘之前，通知浏览器调用一个指定的函数，以满足开发者操作动画的需求。这个方法接受一个函数为参，该函数会在重绘前调用。"><code>requestAnimationFrame</code></a> 和 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas" title="&lt;canvas>元素可被用来通过脚本（通常是JavaScript）绘制图形。比如,它可以被用来绘制图形,制作图片集合,甚至用来实现动画效果。你可以(也应该)在元素标签内写入可提供替代的的代码内容，这些内容将会在在旧的、不支持&lt;canvas>元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现。"><code>&lt;canvas&gt;</code></a> 去反复收集频率数据, 并绘制为一个柱状风格的输出(频谱).</p>
+
+<p>更多的例子/信息, 查看 <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 演示 (相关代码在 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 的 128行~205行</a>).</p>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+analyser.minDecibels = -90;
+analyser.maxDecibels = -10;
+
+  ...
+
+analyser.fftSize = 256;
+var bufferLength = analyser.frequencyBinCount;
+console.log(bufferLength);
+var dataArray = new Uint8Array(bufferLength);
+
+canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+function draw() {
+  drawVisual = requestAnimationFrame(draw);
+
+  analyser.getByteFrequencyData(dataArray);
+
+  canvasCtx.fillStyle = 'rgb(0, 0, 0)';
+  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+  var barWidth = (WIDTH / bufferLength) * 2.5;
+  var barHeight;
+  var x = 0;
+
+  for(var i = 0; i &lt; bufferLength; i++) {
+    barHeight = dataArray[i];
+
+    canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
+    canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);
+
+    x += barWidth + 1;
+  }
+};
+
+draw();</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-frequencyBinCount', 'frequencyBinCount')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="相关内容">相关内容</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/analysernode/getbytefrequencydata/index.html b/files/zh-cn/web/api/analysernode/getbytefrequencydata/index.html
new file mode 100644
index 0000000000..a16460525b
--- /dev/null
+++ b/files/zh-cn/web/api/analysernode/getbytefrequencydata/index.html
@@ -0,0 +1,151 @@
+---
+title: AnalyserNode.getByteFrequencyData()
+slug: Web/API/AnalyserNode/getByteFrequencyData
+translation_of: Web/API/AnalyserNode/getByteFrequencyData
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>{{ domxref("AnalyserNode") }}接口的<strong><code>getByteFrequencyData()</code></strong>方法将当前频率数据复制到传入的Uint8Array（无符号字节数组）中。</p>
+
+<p>如果数组的长度小于 {{domxref("AnalyserNode.frequencyBinCount")}}, 那么Analyser多出的元素会被删除. 如果是大于, 那么数组多余的元素会被忽略.</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: js">var audioCtx = new AudioContext();
+var analyser = audioCtx.createAnalyser();
+var dataArray = new Uint8Array(analyser.frequencyBinCount); // Uint8Array 的长度应该和 frequencyBinCount 相等
+analyser.getByteFrequencyData(dataArray); // 调用 getByteFrequencyData 方法填充 Uint8Array
+</pre>
+
+<h3 id="返回值">返回值</h3>
+
+<p>一个 {{domxref("Uint8Array")}}（无符号字节数组）.</p>
+
+<h2 id="例子">例子</h2>
+
+<p>下面的例子展示了 {{domxref("AudioContext")}} 创建一个 <code>AnalyserNode</code>, 然后用 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} 和 {{htmlelement("canvas")}} 去反复收集当前音频的频率数据, 并绘制为一个柱状风格的输出(频谱).</p>
+
+<p>更多的例子/信息, 查看 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 演示 (相关代码在 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 的 128行~205行</a>).</p>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+
+  ...
+
+analyser.fftSize = 256;
+var bufferLength = analyser.frequencyBinCount;
+console.log(bufferLength);
+var dataArray = new Uint8Array(bufferLength);
+
+canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+function draw() {
+  drawVisual = requestAnimationFrame(draw);
+
+  analyser.getByteFrequencyData(dataArray);
+
+  canvasCtx.fillStyle = 'rgb(0, 0, 0)';
+  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+  var barWidth = (WIDTH / bufferLength) * 2.5;
+  var barHeight;
+  var x = 0;
+
+  for(var i = 0; i &lt; bufferLength; i++) {
+    barHeight = dataArray[i];
+
+    canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
+    canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);
+
+    x += barWidth + 1;
+  }
+};
+
+draw();</pre>
+
+<h2 id="参数">参数</h2>
+
+<dl>
+ <dt>array (数组)</dt>
+ <dd>必须为{{domxref("Uint8Array")}}, 频域数据将复制到该数组内.</dd>
+</dl>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-getByteFrequencyData-void-Uint8Array-array', 'getByteFrequencyData()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="相关内容">相关内容</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/analysernode/getbytetimedomaindata/index.html b/files/zh-cn/web/api/analysernode/getbytetimedomaindata/index.html
new file mode 100644
index 0000000000..780df8f29d
--- /dev/null
+++ b/files/zh-cn/web/api/analysernode/getbytetimedomaindata/index.html
@@ -0,0 +1,111 @@
+---
+title: AnalyserNode.getByteTimeDomainData()
+slug: Web/API/AnalyserNode/getByteTimeDomainData
+translation_of: Web/API/AnalyserNode/getByteTimeDomainData
+---
+<p>{{ APIRef("Mountain View APIRef Project") }}</p>
+
+<p>{{ domxref("AnalyserNode") }} 接口的 <strong><code>getByteTimeDomainData()</code></strong> 方法复制当前波形或时域数据到传递给它的  {{domxref("Uint8Array")}} (无符号字节数组) 中。</p>
+
+<p>如果该数组的元素少于 {{domxref("AnalyserNode.fftSize")}}, 多余的元素会被丢弃。如果它有多于所需的元素，则忽略多余的元素。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: js">var audioCtx = new AudioContext();
+var analyser = audioCtx.createAnalyser();
+var dataArray = new Uint8Array(analyser.fftSize); // Uint8Array should be the same length as the fftSize
+analyser.getByteTimeDomainData(dataArray); // fill the Uint8Array with data returned from getByteTimeDomainData()
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>array</code></dt>
+ <dd>时域数据将被复制到的 {{domxref("Uint8Array")}} 。<br>
+ 如果数组中的元素少于 {{domxref("AnalyserNode.frequencyBinCount")}}, 则会删除多余的元素。如果它包含的元素多于需要的元素，则忽略多余的元素。</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p><strong><code>void</code></strong> | None</p>
+
+<h2 id="例子">例子</h2>
+
+<p>以下的例子展示了 {{domxref("AudioContext")}} 生成一个 <code>AnalyserNode</code> 基础用法， 然后通过 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} 和 {{htmlelement("canvas")}} 重复的收集和绘制一个当前音频输入的“示波器样式”输出。 有关更完整的应用实例/信息，请查看我们的 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> demo (有关代码请参阅 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>)。</p>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+
+  ...
+
+analyser.fftSize = 2048;
+var bufferLength = analyser.frequencyBinCount;
+var dataArray = new Uint8Array(bufferLength);
+analyser.getByteTimeDomainData(dataArray);
+
+// draw an oscilloscope of the current audio source
+
+function draw() {
+
+      drawVisual = requestAnimationFrame(draw);
+      analyser.getByteTimeDomainData(dataArray);
+
+      canvasCtx.fillStyle = 'rgb(200, 200, 200)';
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+      canvasCtx.lineWidth = 2;
+      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+      var sliceWidth = WIDTH * 1.0 / bufferLength;
+      var x = 0;
+
+      ctx.beginPath();
+      for(var i = 0; i &lt; bufferLength; i++) {
+        let v = dataArray[i]/128.0,
+            y = v * HEIGHT/2;
+
+        if(i === 0)
+          canvasCtx.moveTo(x, y);
+        else
+          canvasCtx.lineTo(x, y);
+
+        x += sliceWidth;
+      }
+
+      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };
+
+    draw();
+</pre>
+
+<h2 id="规格">规格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-getByteTimeDomainData-void-Uint8Array-array', 'getByteTimeDomainData()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>
+
+
+<p>{{Compat("api.AnalyserNode.getByteTimeDomainData")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/analysernode/getfloatfrequencydata/index.html b/files/zh-cn/web/api/analysernode/getfloatfrequencydata/index.html
new file mode 100644
index 0000000000..6ff2d5d1a3
--- /dev/null
+++ b/files/zh-cn/web/api/analysernode/getfloatfrequencydata/index.html
@@ -0,0 +1,142 @@
+---
+title: AnalyserNode.getFloatFrequencyData()
+slug: Web/API/AnalyserNode/getFloatFrequencyData
+translation_of: Web/API/AnalyserNode/getFloatFrequencyData
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p><strong><code>getFloatFrequencyData()</code></strong> 作为{{domxref("AnalyserNode")}} 接口的方法能将当前分析节点（AnalyserNode）的频率数据拷贝进一个 {{domxref("Float32Array")}} 数组对象.</p>
+
+<p>此数组表示的频率范围为 0 ~ 22050 Hz，每个元素表示对应频率上的信号分量强度，单位为分贝。</p>
+
+<p>如果你需要更好的性能并且不太在意数据的精度, 你可以使用 {{domxref("AnalyserNode.getByteFrequencyData()")}} 作为代替, 这一接口使用 {{domxref("Uint8Array")}}来存储数据（对应的也是这个精度的格式）.</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">void <em>analyser</em>.getFloatFrequencyData(<em>array</em>);
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>array</code></dt>
+ <dd>你即将用于拷贝频域数据（frequency domain data）的 {{domxref("Float32Array")}} 数组. 对于任何无声的样本, 它的值应该是 <code>-<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>.<br>
+ 如果这一数组的可容纳元素数少于该分析节点的{{domxref("AnalyserNode.frequencyBinCount")}}值, 超出容量的数据元素将被舍弃. 而如果容量多于需要，多余的数组元素将不会被操作.</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>无返回值.</p>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: js">const audioCtx = new AudioContext();
+const analyser = audioCtx.createAnalyser();
+// Float32Array的长度应该和frequencyBinCount相同
+const myDataArray = new Float32Array(analyser.frequencyBinCount);
+// 用getFloatFrequencyData()方法的返回数据填充Float32Array数组
+analyser.getFloatFrequencyData(myDataArray);
+</pre>
+
+<h3 id="例：绘制一个频谱">例：绘制一个频谱</h3>
+
+<p>下面的示例展示了一个 {{domxref("AudioContext")}}对象连接 {{domxref("MediaElementAudioSourceNode")}}到<code>AnalyserNode对象的基本用法（即用AudioContext将音频内容连接到分析节点，从而可以展开对音频数据的分析）</code>. 当音频播放时, 我们使用 {{domxref("window.requestAnimationFrame()","requestAnimationFrame()")}}方法产生轮询从而不断地收集频率数据，进而在 {{htmlelement("canvas")}} 元素上绘制 winamp（windows上的一款MP3播放软件）条形图风格的频谱.</p>
+
+<p>更多的应用示例和应用信息, 可以参看我们 <a href="http://mdn.github.io/voice-change-o-matic-float-data/">Voice-change-O-matic-float-data</a> 示例 (在 <a href="https://github.com/mdn/voice-change-o-matic-float-data">source code</a> 同样有).</p>
+
+<pre class="brush: html, highlight:[15, 17, 18, 41]">&lt;!doctype html&gt;
+&lt;body&gt;
+&lt;script&gt;
+const audioCtx = new AudioContext();
+
+//创建一个音频源
+//在示例中我们使用了一个音频文件,但其实这里也可以用麦克风输入
+const audioEle = new Audio();
+audioEle.src = 'my-audio.mp3';//这里是文件名
+audioEle.autoplay = true;
+audioEle.preload = 'auto';
+const audioSourceNode = audioCtx.createMediaElementSource(audioEle);
+
+//生成一个分析节点(analyser node)
+const analyserNode = audioCtx.createAnalyser();
+analyserNode.fftSize = 256;
+const bufferLength = analyserNode.frequencyBinCount;
+const dataArray = new Float32Array(bufferLength);
+
+//设置音频节点网络（音频源-&gt;分析节点-&gt;输出）
+audioSourceNode.connect(analyserNode);
+analyserNode.connect(audioCtx.destination);
+
+//生成 2D canvas
+const canvas = document.createElement('canvas');
+canvas.style.position = 'absolute';
+canvas.style.top = 0;
+canvas.style.left = 0;
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+document.body.appendChild(canvas);
+const canvasCtx = canvas.getContext('2d');
+canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
+
+
+function draw() {
+  //准备好下次重绘
+  requestAnimationFrame(draw);
+
+  //获取实时的频谱信息
+  analyserNode.getFloatFrequencyData(dataArray);
+
+  //画一个黑色的背景
+  canvasCtx.fillStyle = 'rgb(0, 0, 0)';
+  canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
+
+  //绘制频谱
+  const barWidth = (canvas.width / bufferLength) * 2.5;
+  let posX = 0;
+  for (let i = 0; i &lt; bufferLength; i++) {
+    const barHeight = (dataArray[i] + 140) * 2;
+    canvasCtx.fillStyle = 'rgb(' + Math.floor(barHeight + 100) + ', 50, 50)';
+    canvasCtx.fillRect(posX, canvas.height - barHeight / 2, barWidth, barHeight / 2);
+    posX += barWidth + 1;
+  }
+};
+
+draw();
+&lt;/script&gt;
+&lt;/body&gt;</pre>
+
+<dl>
+</dl>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatFrequencyData-void-Float32Array-array', 'getFloatFrequencyData()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>
+
+
+<p>{{Compat("api.AnalyserNode.getFloatFrequencyData")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/analysernode/index.html b/files/zh-cn/web/api/analysernode/index.html
new file mode 100644
index 0000000000..00b6ff8de8
--- /dev/null
+++ b/files/zh-cn/web/api/analysernode/index.html
@@ -0,0 +1,185 @@
+---
+title: AnalyserNode
+slug: Web/API/AnalyserNode
+translation_of: Web/API/AnalyserNode
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<p> <strong><code>AnalyserNode</code></strong><strong> </strong>接口表示了一个可以提供实时频域和时域分析信息的节点。它是一个不对音频流作任何改动的 {{domxref("AudioNode")}}，同时允许你获取和处理它生成的数据，从而创建音频可视化。</p>
+
+<p><code>AnalyzerNode</code> 只有一个输入和输出，即使未连接到输出它也能正常工作。</p>
+
+<p><img alt="Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT." src="https://mdn.mozillademos.org/files/5119/WebAudioFFT.png" style="height: 174px; width: 661px;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">输入数</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">输出数</th>
+   <td><code>1</code> (但可能是未连接的)</td>
+  </tr>
+  <tr>
+   <th scope="row">通道计数模式</th>
+   <td><code>"explicit"</code></td>
+  </tr>
+  <tr>
+   <th scope="row">通道数</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">通道解释</th>
+   <td><code>"speakers"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="继承">继承</h2>
+
+<p>继承自以下父接口:</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="构造函数">构造函数</h2>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}}</dt>
+ <dd>创建一个新的 <code>AnalyserNode</code> 对象实例。</dd>
+</dl>
+
+<h2 id="属性">属性</h2>
+
+<p><em>继承属性自 </em><em>{{domxref("AudioNode")}}。</em></p>
+
+<dl>
+ <dt><span id="cke_bm_91S" style="display: none;"> </span>{{domxref("AnalyserNode.fftSize")}}</dt>
+ <dd>一个无符号长整形(unsigned long)的值，代表了用于计算频域信号时使用的 FFT (<a href="https://zh.wikipedia.org/zh-cn/%E5%BF%AB%E9%80%9F%E5%82%85%E9%87%8C%E5%8F%B6%E5%8F%98%E6%8D%A2">快速傅里叶变换</a>) 的窗口大小。</dd>
+ <dt>{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}</dt>
+ <dd>一个无符号长整形(unsigned long)的值, 值为fftSize的一半。这通常等于将要用于可视化的数据值的数量。</dd>
+ <dt>{{domxref("AnalyserNode.minDecibels")}}</dt>
+ <dd>是一个双精度值，表示FFT分析频域数据并转换为无符号字节值时，对输入的功率数据的最小阈值 - 基本上，它限定了调用<code>getByteFrequencyData()</code>时结果范围的最小值</dd>
+ <dt>{{domxref("AnalyserNode.maxDecibels")}}</dt>
+ <dt></dt>
+ <dd>是一个双精度值，表示FFT分析频域数据并转换为无符号字节值时，对输入的功率数据的最大阈值 - 基本上，它限定了调用<code>getByteFrequencyData()</code>时结果范围的最大值</dd>
+ <dt>{{domxref("AnalyserNode.smoothingTimeConstant")}}</dt>
+ <dd>是一个双精度浮点型(double)的值，表示最后一个分析帧的平均常数 — 基本上，它随时间使值之间的过渡更平滑。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>继承方法自 </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt>
+ <dd>将当前频域数据拷贝进{{domxref("Float32Array")}}数组。</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt>
+ <dd>将当前频域数据拷贝进{{domxref("Uint8Array")}}数组（无符号字节数组）。</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt>
+ <dd>将当前波形，或者时域数据拷贝进{{domxref("Float32Array")}}数组。</dd>
+ <dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt>
+ <dd>将当前波形，或者时域数据拷贝进 {{domxref("Uint8Array")}}数组（无符号字节数组）。 </dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<div class="note">
+<p><strong>注意：</strong>查看 <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a> 指南以获得更多关于创建音频可视化效果的信息。</p>
+</div>
+
+<h3 id="基础用法">基础用法</h3>
+
+<p>下面的例子展示了 {{domxref("AudioContext")}} 创建一个 <code>AnalyserNode</code>, 然后用 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} 和 {{htmlelement("canvas")}} 去反复收集当前音频的时域数据, 并绘制为一个示波器风格的输出(频谱).</p>
+
+<p>更多的例子/信息, 查看 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 演示 (相关代码在 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 的 128行~205行</a>).</p>
+
+<pre class="brush: js">var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+
+// ...
+
+analyser.fftSize = 2048;
+var bufferLength = analyser.frequencyBinCount;
+var dataArray = new Uint8Array(bufferLength);
+analyser.getByteTimeDomainData(dataArray);
+
+// 获取ID为 "oscilloscope" 的画布
+var canvas = document.getElementById("oscilloscope");
+var canvasCtx = canvas.getContext("2d");
+
+// 绘制一个当前音频源的示波器
+
+function draw() {
+
+  drawVisual = requestAnimationFrame(draw);
+
+  analyser.getByteTimeDomainData(dataArray);
+
+  canvasCtx.fillStyle = 'rgb(200, 200, 200)';
+  canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
+
+  canvasCtx.lineWidth = 2;
+  canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+  canvasCtx.beginPath();
+
+  var sliceWidth = canvas.width * 1.0 / bufferLength;
+  var x = 0;
+
+  for (var i = 0; i &lt; bufferLength; i++) {
+
+    var v = dataArray[i] / 128.0;
+    var y = v * canvas.height / 2;
+
+    if (i === 0) {
+      canvasCtx.moveTo(x, y);
+    } else {
+      canvasCtx.lineTo(x, y);
+    }
+
+    x += sliceWidth;
+  }
+
+  canvasCtx.lineTo(canvas.width, canvas.height / 2);
+  canvasCtx.stroke();
+};
+
+draw();</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>
+<div class="hidden">此页的兼容性表生成自结构化数据。如果你希望贡献相关数据，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并给我们发送一个 pull request.</div>
+
+<p>{{Compat("api.AnalyserNode")}}</p>
+</div>
+
+<h2 id="相关内容">相关内容</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Web_Audio_API/Using_Web_Audio_API">Web Audio API的运用 </a></li>
+</ul>
diff --git a/files/zh-cn/web/api/analysernode/smoothingtimeconstant/index.html b/files/zh-cn/web/api/analysernode/smoothingtimeconstant/index.html
new file mode 100644
index 0000000000..4e9b92954e
--- /dev/null
+++ b/files/zh-cn/web/api/analysernode/smoothingtimeconstant/index.html
@@ -0,0 +1,152 @@
+---
+title: AnalyserNode.smoothingTimeConstant
+slug: Web/API/AnalyserNode/smoothingTimeConstant
+translation_of: Web/API/AnalyserNode/smoothingTimeConstant
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p>{{ domxref("AnalyserNode") }} 接口的 <strong><code>smoothingTimeConstant</code></strong> 属性是一个双精度浮点型(double)的值, 表示最后一个分析帧的平均常数. 它基本上是当前缓冲区和AnalyserNode处理的最后一个缓冲区之间的平均值, 并导致在值变化时随着时间推移得到一个更平滑的集合.</p>
+
+<p><code>smoothingTimeConstant 属性的默认值为</code> <code>0.8</code>; 值的范围必须在 <code>0</code> ~ <code>1</code> 之间. 如果设置为0, 则不进行平均, 而值为1意味着 "在计算值时重叠上一个缓冲区和当前缓冲区相当多", 它基本上平滑了 {{domxref("AnalyserNode.getFloatFrequencyData")}}/{{domxref("AnalyserNode.getByteFrequencyData")}} 调用的变化.</p>
+
+<p>在技术术语中, 我们应用一个 <a href="http://webaudio.github.io/web-audio-api/#blackman-window">布莱克曼窗</a> 并随着时间推移去平滑值. 大部分情况下, 默认值是较好的.</p>
+
+<div class="note">
+<p><span style="font-size: 14px;"><strong>注意</strong></span>:  如果设置了 0~1 范围外的值, 将会抛出异常<code>INDEX_SIZE_ERR</code>.</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: js">var audioCtx = new AudioContext();
+var analyser = audioCtx.createAnalyser();
+analyser.smoothingTimeConstant = 1;
+</pre>
+
+<h3 id="值类型">值类型</h3>
+
+<p>双精度浮点型(double).</p>
+
+<h2 id="例子">例子</h2>
+
+<p>下面的例子展示了 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/AudioContext" title="AudioContext接口表示由音频模块连接而成的音频处理图，每个模块对应一个AudioNode。AudioContext可以控制它所包含的节点的创建，以及音频处理、解码操作的执行。做任何事情之前都要先创建AudioContext对象，因为一切都发生在这个环境之中。"><code>AudioContext</code></a> 创建一个 <code>AnalyserNode</code>, 然后用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame" title="window.requestAnimationFrame()这个方法是用来在页面重绘之前，通知浏览器调用一个指定的函数，以满足开发者操作动画的需求。这个方法接受一个函数为参，该函数会在重绘前调用。"><code>requestAnimationFrame</code></a> 和 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas" title="&lt;canvas>元素可被用来通过脚本（通常是JavaScript）绘制图形。比如,它可以被用来绘制图形,制作图片集合,甚至用来实现动画效果。你可以(也应该)在元素标签内写入可提供替代的的代码内容，这些内容将会在在旧的、不支持&lt;canvas>元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现。"><code>&lt;canvas&gt;</code></a> 去反复收集当前音频的频率数据, 并绘制为一个柱状风格的输出(频谱).</p>
+
+<p>更多的例子/信息, 查看 <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 演示 (相关代码在 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 的 128行~205行</a>).</p>
+
+<p><code>如果你对 smoothingTimeConstant()</code> 的效果好奇, 可以尝试克隆上面的例子并设置 "<code>analyser.smoothingTimeConstant = 0;"</code> 代替. 你会发现值的变化更加快速.</p>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+analyser.minDecibels = -90;
+analyser.maxDecibels = -10;
+analyser.smoothingTimeConstant = 0.85;
+
+  ...
+
+analyser.fftSize = 256;
+var bufferLength = analyser.frequencyBinCount;
+console.log(bufferLength);
+var dataArray = new Uint8Array(bufferLength);
+
+canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+function draw() {
+  drawVisual = requestAnimationFrame(draw);
+
+  analyser.getByteFrequencyData(dataArray);
+
+  canvasCtx.fillStyle = 'rgb(0, 0, 0)';
+  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+  var barWidth = (WIDTH / bufferLength) * 2.5;
+  var barHeight;
+  var x = 0;
+
+  for(var i = 0; i &lt; bufferLength; i++) {
+    barHeight = dataArray[i];
+
+    canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
+    canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);
+
+    x += barWidth + 1;
+  }
+};
+
+draw();</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-smoothingTimeConstant', 'smoothingTimeConstant')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="相关内容">相关内容</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>