BaseAudioContext: createAnalyser() 方法
BaseAudioContext 接口的 createAnalyser() 方法创建一个 AnalyserNode，它可用于公开音频的时间和频率数据，并创建数据可视化。
注意： 创建 AnalyserNode 的推荐方法是使用 AnalyserNode() 构造函数；请参阅 创建 AudioNode。
注意： 有关使用此节点的更多信息，请参阅 AnalyserNode 页面。
语法
js
createAnalyser()
参数
无。
返回值
一个 AnalyserNode。
示例
以下示例演示了 AudioContext 的基本用法，用于创建 Analyser 节点，然后使用 requestAnimationFrame() 循环收集时域数据，并绘制当前音频输入的“示波器风格”输出。有关更完整的应用示例/信息，请查看我们的 Voice-change-O-matic 演示（相关代码请参见 app.js 的 108-193 行）。
js
const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
// …
analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const 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();
const sliceWidth = (WIDTH * 1.0) / bufferLength;
let x = 0;
for (let i = 0; i < bufferLength; i++) {
const v = dataArray[i] / 128.0;
const 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();
规范
| 规范 |
|---|
| Web Audio API # dom-baseaudiocontext-createanalyser |
浏览器兼容性
加载中…