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 analyzed
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 |
浏览器兼容性
加载中…