BaseAudioContext：createAnalyser() 方法

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

BaseAudioContext 接口的 createAnalyser() 方法创建一个AnalyserNode，它可以用来暴露音频时间和频率数据，以及创建数据可视化。

备注： AnalyserNode() 构造函数是创建 AnalyserNode 的推荐方法；请查看创建 AudioNode。

备注：有关使用此节点的更多信息，请查看 AnalyserNode 页面。

语法

js
createAnalyser()

参数

无。

返回值

一个 AnalyserNode 对象。

示例

下面的示例展示了 AudioContext 创建分析器节点的基本用法，然后用 requestAnimationFrame() 来反复获取时域数据，并绘制出当前音频输入的“示波器风格”输出。更多完整示例/信息请查看 Voice-change-O-matic 实例（参阅 app.js 的 108-193 行代码）。

js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();

// …

analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

// 绘制当前音频源的波形图

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();

规范

Specification
Web Audio API
# dom-baseaudiocontext-createanalyser

浏览器兼容性

BCD tables only load in the browser

参见