AnalyserNode.getByteTimeDomainData()

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.

AnalyserNode 接口的 getByteTimeDomainData() 方法复制当前波形或时域数据到传递给它的 Uint8Array (无符号字节数组) 中。

如果该数组的元素少于 AnalyserNode.fftSize, 多余的元素会被丢弃。如果它有多于所需的元素，则忽略多余的元素。

语法

js
var audioCtx = new AudioContext();
var analyser = audioCtx.createAnalyser();
var dataArray = new Uint8Array(analyser.fftSize); // Uint8Array should be the same length as the fftSize
analyser.getByteTimeDomainData(dataArray); // fill the Uint8Array with data returned from getByteTimeDomainData()

参数

array

时域数据将被复制到的 Uint8Array 。 如果数组中的元素少于 AnalyserNode.frequencyBinCount, 则会删除多余的元素。如果它包含的元素多于需要的元素，则忽略多余的元素。

返回值

void | None

例子

以下的例子展示了 AudioContext 生成一个 AnalyserNode 基础用法，然后通过 requestAnimationFrame 和 <canvas> 重复的收集和绘制一个当前音频输入的“示波器样式”输出。有关更完整的应用实例/信息，请查看我们的 Voice-change-O-matic demo (有关代码请参阅 app.js lines 128–205)。

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

  ...

analyser.fftSize = 2048;
var bufferLength = analyser.frequencyBinCount;
var 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)';

      var sliceWidth = WIDTH * 1.0 / bufferLength;
      var x = 0;

      ctx.beginPath();
      for(var i = 0; i < bufferLength; i++) {
        let v = dataArray[i]/128.0,
            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-analysernode-getbytetimedomaindata

浏览器兼容性

BCD tables only load in the browser

See also