diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/analysernode/index.html | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-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.html | 185 |
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 < 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> |