View in EnglishAlways switch to English

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 ⁨2015年7月⁩.

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

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

语法

var audioCtx = new AudioContext();var analyser = audioCtx.createAnalyser();var dataArray = new Uint8Array(analyser.fftSize); // Uint8Array should be the same length as the fftSizeanalyser.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)。

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