AnalyserNode
AnalyserNode
接口表示能够提供实时频率和时域分析信息的节点。它是一个 AudioNode
,它将音频流从输入到输出不变地传递,但允许你获取生成的数据,处理它并创建音频可视化。
一个 AnalyserNode
恰好有一个输入和一个输出。即使输出未连接,该节点也能工作。
输入数量 | 1 |
---|---|
输出数量 | 1 (但可以不连接) |
通道计数模式 | "max" |
通道数量 | 2 |
通道解释 | "speakers" |
构造函数
AnalyserNode()
-
创建一个新的
AnalyserNode
对象实例。
实例属性
继承自其父级 AudioNode
的属性.
AnalyserNode.fftSize
-
一个无符号长整数值,表示用于确定频域的 FFT (快速傅里叶变换) 的大小。
AnalyserNode.frequencyBinCount
只读-
一个无符号长整数值,是 FFT 大小的一半。这通常等于你将用于可视化的数据值的数量。
AnalyserNode.minDecibels
-
一个双精度浮点数,表示 FFT 分析数据缩放范围中的最小功率值,用于转换为无符号字节值——基本上,这指定了使用
getByteFrequencyData()
时结果范围的最小值。 AnalyserNode.maxDecibels
-
一个双精度浮点数,表示 FFT 分析数据缩放范围中的最大功率值,用于转换为无符号字节值——基本上,这指定了使用
getByteFrequencyData()
时结果范围的最大值。 AnalyserNode.smoothingTimeConstant
-
一个双精度浮点数,表示与最后一个分析帧的平均常数——基本上,它使随时间推移的值之间的过渡更加平滑。
实例方法
继承自其父级 AudioNode
的方法.
AnalyserNode.getFloatFrequencyData()
-
将当前频率数据复制到传递给它的
Float32Array
数组中。 AnalyserNode.getByteFrequencyData()
-
将当前频率数据复制到传递给它的
Uint8Array
(无符号字节数组)中。 AnalyserNode.getFloatTimeDomainData()
-
将当前波形或时域数据复制到传递给它的
Float32Array
数组中。 AnalyserNode.getByteTimeDomainData()
-
将当前波形或时域数据复制到传递给它的
Uint8Array
(无符号字节数组)中。
示例
注意:有关创建音频可视化的更多信息,请参阅指南 使用 Web Audio API 进行可视化。
基本用法
以下示例显示了 AudioContext
的基本用法来创建 AnalyserNode
,然后使用 requestAnimationFrame
和 <canvas>
反复收集时域数据并绘制当前音频输入的“示波器样式”输出。有关更完整的应用示例/信息,请查看我们的 Voice-change-O-matic 演示(有关相关代码,请参阅 app.js 第 108-193 行)。
const audioCtx = new AudioContext();
// …
const analyser = audioCtx.createAnalyser();
analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);
// Connect the source to be analysed
source.connect(analyser);
// Get a canvas defined with ID "oscilloscope"
const canvas = document.getElementById("oscilloscope");
const canvasCtx = canvas.getContext("2d");
// draw an oscilloscope of the current audio source
function draw() {
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();
const sliceWidth = (canvas.width * 1.0) / bufferLength;
let x = 0;
for (let i = 0; i < bufferLength; i++) {
const v = dataArray[i] / 128.0;
const 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();
规范
规范 |
---|
Web Audio API # AnalyserNode |
浏览器兼容性
BCD 表仅在启用 JavaScript 的浏览器中加载。