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.

io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/zh-cn/web/api/baseaudiocontext/index.md)

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

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

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

语法

createAnalyser()

参数

无。

返回值

一个 AnalyserNode 对象。

示例

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

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

参见

使用 Web Audio API