AnalyserNode.getByteTimeDomainData()

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

如果该数组的元素少于 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 (en-US) 。 如果数组中的元素少于 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