From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/analysernode/analysernode/index.html | 59 +++++++ files/zh-cn/web/api/analysernode/fft/index.html | 7 + .../zh-cn/web/api/analysernode/fftsize/index.html | 162 ++++++++++++++++++ .../api/analysernode/frequencybincount/index.html | 141 ++++++++++++++++ .../analysernode/getbytefrequencydata/index.html | 151 +++++++++++++++++ .../analysernode/getbytetimedomaindata/index.html | 111 +++++++++++++ .../analysernode/getfloatfrequencydata/index.html | 142 ++++++++++++++++ files/zh-cn/web/api/analysernode/index.html | 185 +++++++++++++++++++++ .../analysernode/smoothingtimeconstant/index.html | 152 +++++++++++++++++ 9 files changed, 1110 insertions(+) create mode 100644 files/zh-cn/web/api/analysernode/analysernode/index.html create mode 100644 files/zh-cn/web/api/analysernode/fft/index.html create mode 100644 files/zh-cn/web/api/analysernode/fftsize/index.html create mode 100644 files/zh-cn/web/api/analysernode/frequencybincount/index.html create mode 100644 files/zh-cn/web/api/analysernode/getbytefrequencydata/index.html create mode 100644 files/zh-cn/web/api/analysernode/getbytetimedomaindata/index.html create mode 100644 files/zh-cn/web/api/analysernode/getfloatfrequencydata/index.html create mode 100644 files/zh-cn/web/api/analysernode/index.html create mode 100644 files/zh-cn/web/api/analysernode/smoothingtimeconstant/index.html (limited to 'files/zh-cn/web/api/analysernode') 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 +--- +

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

+ +

The AnalyserNode constructor of the Web Audio API creates a new {{domxref("AnalyserNode")}} object instance.

+ +

Syntax

+ +
var analyserNode = new AnalyserNode(context, options)
+ +

参数

+ +

继承参数自 {{domxref("AudioNodeOptions")}} 字典.

+ +
+
context
+
{{domxref("AudioContext")}} 的引用.
+
options {{optional_inline}}
+
Options are as follows: +
    +
  • fftSize: 用于频域分析的FFT初始尺寸。默认值是2048。
    • +
  • maxDecibels: 用于FFT分析的初始最大功率（dB）。默认值是-30。
    • +
  • minDecibels: 用于FFT分析的初始最小功率（dB）。默认值是-100。
    • +
  • smoothingTimeConstant: 用于FFT分析的初始平滑常数。默认值是0.8。
    • +
+
+
+ +

返回值

+ +

A new {{domxref("AnalyserNode")}} object instance.

+ +

Specifications

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

Browser Compatibility

+ +
+ + +

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

+
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 +--- +

目录失效

+ +

Directory failure

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 +--- +

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

+ +

{{ domxref("AnalyserNode") }} 接口的 fftSize 属性的值是一个无符号长整型的值, 表示（信号）样本的窗口大小。当执行快速傅里叶变换（Fast Fourier Transfor (FFT)）时，这些（信号）样本被用来获取频域数据。

+ +

fftSize 属性的值必须是从32到32768范围内的2的非零幂; 其默认值为2048.

+ +
+

注意: 如果其值不是2的幂, 或者它在指定范围之外, 则抛出异常INDEX_SIZE_ERR.

+
+ +

语法

+ +
var audioCtx = new AudioContext();
+var analyser = audioCtx.createAnalyser();
+analyser.fftSize = 2048;
+
+ +

值

+ +

一个无符号长整型.

+ +

例子

+ +

下面的例子展示了 AudioContext 创建一个 AnalyserNode, 然后用 requestAnimationFrame 和 <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.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 < 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();
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AnalyserNode-fftSize', 'fftSize')}}{{Spec2('Web Audio API')}} 
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

相关内容

+ + 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 +--- +

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

+ +

frequencyBinCount 的值固定为 {{ domxref("AnalyserNode") }} 接口中fftSize值的一半. 该属性通常用于可视化的数据值的数量.

+ +

语法

+ +
var audioCtx = new AudioContext();
+var analyser = audioCtx.createAnalyser();
+var bufferLength = analyser.frequencyBinCount;
+
+ +

值类型

+ +

无符号长整形(unsigned long).

+ +

例子

+ +

下面的例子展示了 AudioContext 创建一个 AnalyserNode, 然后用 requestAnimationFrame 和 <canvas> 去反复收集频率数据, 并绘制为一个柱状风格的输出(频谱).

+ +

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

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

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AnalyserNode-frequencyBinCount', 'frequencyBinCount')}}{{Spec2('Web Audio API')}} 
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

相关内容

+ + 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 +--- +

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

+ +
+

{{ domxref("AnalyserNode") }}接口的getByteFrequencyData()方法将当前频率数据复制到传入的Uint8Array（无符号字节数组）中。

+ +

如果数组的长度小于 {{domxref("AnalyserNode.frequencyBinCount")}}, 那么Analyser多出的元素会被删除. 如果是大于, 那么数组多余的元素会被忽略.

+
+ +

语法

+ +
var audioCtx = new AudioContext();
+var analyser = audioCtx.createAnalyser();
+var dataArray = new Uint8Array(analyser.frequencyBinCount); // Uint8Array 的长度应该和 frequencyBinCount 相等
+analyser.getByteFrequencyData(dataArray); // 调用 getByteFrequencyData 方法填充 Uint8Array
+
+ +

返回值

+ +

一个 {{domxref("Uint8Array")}}（无符号字节数组）.

+ +

例子

+ +

下面的例子展示了 {{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 = 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 < 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();
+ +

参数

+ +
+
array (数组)
+
必须为{{domxref("Uint8Array")}}, 频域数据将复制到该数组内.
+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AnalyserNode-getByteFrequencyData-void-Uint8Array-array', 'getByteFrequencyData()')}}{{Spec2('Web Audio API')}} 
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

相关内容

+ + 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 +--- +

{{ APIRef("Mountain View APIRef Project") }}

+ +

{{ domxref("AnalyserNode") }} 接口的 getByteTimeDomainData() 方法复制当前波形或时域数据到传递给它的  {{domxref("Uint8Array")}} (无符号字节数组) 中。

+ +

如果该数组的元素少于 {{domxref("AnalyserNode.fftSize")}}, 多余的元素会被丢弃。如果它有多于所需的元素，则忽略多余的元素。

+ +

语法

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

参数

+ +
+
array
+
时域数据将被复制到的 {{domxref("Uint8Array")}} 。
+ 如果数组中的元素少于 {{domxref("AnalyserNode.frequencyBinCount")}}, 则会删除多余的元素。如果它包含的元素多于需要的元素，则忽略多余的元素。
+
+ +

返回值

+ +

void | None

+ +

例子

+ +

以下的例子展示了 {{domxref("AudioContext")}} 生成一个 AnalyserNode 基础用法， 然后通过 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} 和 {{htmlelement("canvas")}} 重复的收集和绘制一个当前音频输入的“示波器样式”输出。 有关更完整的应用实例/信息，请查看我们的 Voice-change-O-matic demo (有关代码请参阅 app.js lines 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);
+
+// 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 < 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();
+
+ +

规格

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AnalyserNode-getByteTimeDomainData-void-Uint8Array-array', 'getByteTimeDomainData()')}}{{Spec2('Web Audio API')}} 
+ +

浏览器兼容性

+ +
+ + +

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

+
+ +

See also

+ + 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 +--- +

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

+ +
+

getFloatFrequencyData() 作为{{domxref("AnalyserNode")}} 接口的方法能将当前分析节点（AnalyserNode）的频率数据拷贝进一个 {{domxref("Float32Array")}} 数组对象.

+ +

此数组表示的频率范围为 0 ~ 22050 Hz，每个元素表示对应频率上的信号分量强度，单位为分贝。

+ +

如果你需要更好的性能并且不太在意数据的精度, 你可以使用 {{domxref("AnalyserNode.getByteFrequencyData()")}} 作为代替, 这一接口使用 {{domxref("Uint8Array")}}来存储数据（对应的也是这个精度的格式）.

+
+ +

语法

+ +
void analyser.getFloatFrequencyData(array);
+
+ +

参数

+ +
+
array
+
你即将用于拷贝频域数据（frequency domain data）的 {{domxref("Float32Array")}} 数组. 对于任何无声的样本, 它的值应该是 -Infinity.
+ 如果这一数组的可容纳元素数少于该分析节点的{{domxref("AnalyserNode.frequencyBinCount")}}值, 超出容量的数据元素将被舍弃. 而如果容量多于需要，多余的数组元素将不会被操作.
+
+ +

返回值

+ +

无返回值.

+ +

示例

+ +
const audioCtx = new AudioContext();
+const analyser = audioCtx.createAnalyser();
+// Float32Array的长度应该和frequencyBinCount相同
+const myDataArray = new Float32Array(analyser.frequencyBinCount);
+// 用getFloatFrequencyData()方法的返回数据填充Float32Array数组
+analyser.getFloatFrequencyData(myDataArray);
+
+ +

例：绘制一个频谱

+ +

下面的示例展示了一个 {{domxref("AudioContext")}}对象连接 {{domxref("MediaElementAudioSourceNode")}}到AnalyserNode对象的基本用法（即用AudioContext将音频内容连接到分析节点，从而可以展开对音频数据的分析）. 当音频播放时, 我们使用 {{domxref("window.requestAnimationFrame()","requestAnimationFrame()")}}方法产生轮询从而不断地收集频率数据，进而在 {{htmlelement("canvas")}} 元素上绘制 winamp（windows上的一款MP3播放软件）条形图风格的频谱.

+ +

更多的应用示例和应用信息, 可以参看我们 Voice-change-O-matic-float-data 示例 (在 source code 同样有).

+ +
<!doctype html>
+<body>
+<script>
+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);
+
+//设置音频节点网络（音频源->分析节点->输出）
+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 < 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();
+</script>
+</body>
+ +
+
+ +

规范

+ + + + + + + + + + + + + + +
规范StatusComment
{{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatFrequencyData-void-Float32Array-array', 'getFloatFrequencyData()')}}{{Spec2('Web Audio API')}}
+ +

浏览器兼容性

+ +
+ + +

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

+
+ +

See also

+ + 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")}}

+
+ +

相关内容

+ + 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 +--- +

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

+ +

{{ domxref("AnalyserNode") }} 接口的 smoothingTimeConstant 属性是一个双精度浮点型(double)的值, 表示最后一个分析帧的平均常数. 它基本上是当前缓冲区和AnalyserNode处理的最后一个缓冲区之间的平均值, 并导致在值变化时随着时间推移得到一个更平滑的集合.

+ +

smoothingTimeConstant 属性的默认值为 0.8; 值的范围必须在 0 ~ 1 之间. 如果设置为0, 则不进行平均, 而值为1意味着 "在计算值时重叠上一个缓冲区和当前缓冲区相当多", 它基本上平滑了 {{domxref("AnalyserNode.getFloatFrequencyData")}}/{{domxref("AnalyserNode.getByteFrequencyData")}} 调用的变化.

+ +

在技术术语中, 我们应用一个 布莱克曼窗 并随着时间推移去平滑值. 大部分情况下, 默认值是较好的.

+ +
+

注意:  如果设置了 0~1 范围外的值, 将会抛出异常INDEX_SIZE_ERR.

+
+ +

语法

+ +
var audioCtx = new AudioContext();
+var analyser = audioCtx.createAnalyser();
+analyser.smoothingTimeConstant = 1;
+
+ +

值类型

+ +

双精度浮点型(double).

+ +

例子

+ +

下面的例子展示了 AudioContext 创建一个 AnalyserNode, 然后用 requestAnimationFrame 和 <canvas> 去反复收集当前音频的频率数据, 并绘制为一个柱状风格的输出(频谱).

+ +

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

+ +

如果你对 smoothingTimeConstant() 的效果好奇, 可以尝试克隆上面的例子并设置 "analyser.smoothingTimeConstant = 0;" 代替. 你会发现值的变化更加快速.

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

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AnalyserNode-smoothingTimeConstant', 'smoothingTimeConstant')}}{{Spec2('Web Audio API')}} 
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

相关内容

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