From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/analysernode/index.html | 185 ++++++++++++++++++++++++++++ 1 file changed, 185 insertions(+) create mode 100644 files/zh-cn/web/api/analysernode/index.html (limited to 'files/zh-cn/web/api/analysernode/index.html') 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 +--- +

{{APIRef("Web Audio API")}}

+ +

 AnalyserNode 接口表示了一个可以提供实时频域和时域分析信息的节点。它是一个不对音频流作任何改动的 {{domxref("AudioNode")}}，同时允许你获取和处理它生成的数据，从而创建音频可视化。

+ +

AnalyzerNode 只有一个输入和输出，即使未连接到输出它也能正常工作。

+ +

Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT.

+ + + + + + + + + + + + + + + + + + + + + + + + +
输入数1
输出数1 (但可能是未连接的)
通道计数模式"explicit"
通道数1
通道解释"speakers"
+ +

继承

+ +

继承自以下父接口:

+ +

{{InheritanceDiagram}}

+ +

构造函数

+ +
+
{{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}}
+
创建一个新的 AnalyserNode 对象实例。
+
+ +

属性

+ +

继承属性自 {{domxref("AudioNode")}}。

+ +
+
{{domxref("AnalyserNode.fftSize")}}
+
一个无符号长整形(unsigned long)的值，代表了用于计算频域信号时使用的 FFT (快速傅里叶变换) 的窗口大小。
+
{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}
+
一个无符号长整形(unsigned long)的值, 值为fftSize的一半。这通常等于将要用于可视化的数据值的数量。
+
{{domxref("AnalyserNode.minDecibels")}}
+
是一个双精度值，表示FFT分析频域数据并转换为无符号字节值时，对输入的功率数据的最小阈值 - 基本上，它限定了调用getByteFrequencyData()时结果范围的最小值
+
{{domxref("AnalyserNode.maxDecibels")}}
+
+
是一个双精度值，表示FFT分析频域数据并转换为无符号字节值时，对输入的功率数据的最大阈值 - 基本上，它限定了调用getByteFrequencyData()时结果范围的最大值
+
{{domxref("AnalyserNode.smoothingTimeConstant")}}
+
是一个双精度浮点型(double)的值，表示最后一个分析帧的平均常数 — 基本上，它随时间使值之间的过渡更平滑。
+
+ +

方法

+ +

继承方法自 {{domxref("AudioNode")}}.

+ +
+
{{domxref("AnalyserNode.getFloatFrequencyData()")}}
+
将当前频域数据拷贝进{{domxref("Float32Array")}}数组。
+
+ +
+
{{domxref("AnalyserNode.getByteFrequencyData()")}}
+
将当前频域数据拷贝进{{domxref("Uint8Array")}}数组（无符号字节数组）。
+
+ +
+
{{domxref("AnalyserNode.getFloatTimeDomainData()")}}
+
将当前波形，或者时域数据拷贝进{{domxref("Float32Array")}}数组。
+
{{domxref("AnalyserNode.getByteTimeDomainData()")}}
+
将当前波形，或者时域数据拷贝进 {{domxref("Uint8Array")}}数组（无符号字节数组）。 
+
+ +

例子

+ +
+

注意：查看 Visualizations with Web Audio API 指南以获得更多关于创建音频可视化效果的信息。

+
+ +

基础用法

+ +

下面的例子展示了 {{domxref("AudioContext")}} 创建一个 AnalyserNode, 然后用 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} 和 {{htmlelement("canvas")}} 去反复收集当前音频的时域数据, 并绘制为一个示波器风格的输出(频谱).

+ +

更多的例子/信息, 查看 Voice-change-O-matic 演示 (相关代码在 app.js 的 128行~205行).

+ +
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();
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}}{{Spec2('Web Audio API')}}
+ +

浏览器兼容性

+ +
+ + +

{{Compat("api.AnalyserNode")}}

+
+ +

相关内容

+ + -- cgit v1.2.3-54-g00ecf