aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/api/analysernode/index.html
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/analysernode/index.html
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip
initial commit
Diffstat (limited to 'files/zh-cn/web/api/analysernode/index.html')
-rw-r--r--files/zh-cn/web/api/analysernode/index.html185
1 files changed, 185 insertions, 0 deletions
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>