AnalyserNode: smoothingTimeConstant 屬性
AnalyserNode 介面的 smoothingTimeConstant 屬性是一個雙精度浮點數值，表示與上一個分析幀的平均時間常數。它本質上是當前緩衝區和 AnalyserNode 處理的最後一個緩衝區之間的平均值，從而使得值的變化隨時間更加平滑。
值
一個介於 0 到 1 之間的雙精度浮點數（0 表示不進行時間平均）。預設值為 0.8。
如果設定為 0，則不進行平均；而值為 1 則表示“在計算值時，當前緩衝區與前一個緩衝區有很大重疊”，這本質上會平滑 AnalyserNode.getFloatFrequencyData / AnalyserNode.getByteFrequencyData 呼叫中的值變化。
從技術上講，我們應用了一個 Blackman 視窗 並隨時間平滑值。預設值在大多數情況下都足夠好。
注意：如果設定的值超出 0–1 的範圍，將丟擲 INDEX_SIZE_ERR 異常。
示例
下面的示例展示瞭如何使用 AudioContext 建立一個 AnalyserNode，然後使用 requestAnimationFrame 和 <canvas> 來反覆收集頻率資料，並繪製一個“Winamp 條形圖風格”的當前音訊輸入的輸出。有關更完整的實際示例/資訊，請檢視我們的 Voice-change-O-matic 演示（請參閱 app.js 的 108-193 行中的相關程式碼）。
如果您想了解 smoothingTimeConstant() 的效果，可以嘗試克隆上面的示例，並將 analyser.smoothingTimeConstant = 0;。您會注意到值的變化會更加劇烈。
js
const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;
analyser.smoothingTimeConstant = 0.85;
// …
analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
const 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);
const barWidth = (WIDTH / bufferLength) * 2.5;
let barHeight;
let x = 0;
for (let 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();
規範
| 規範 |
|---|
| Web Audio API # dom-analysernode-smoothingtimeconstant |
瀏覽器相容性
載入中…