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