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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
createAnalyser

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见