The getFloatTimeDomainData()
method of the AnalyserNode
Interface copies the current waveform, or time-domain, data into a Float32Array
array passed into it.
If the array has fewer elements than the AnalyserNode.fftSize
, excess elements are dropped. If it has more elements than needed, excess elements are ignored.
var audioCtx = new AudioContext(); var analyser = audioCtx.createAnalyser(); var dataArray = new Float32Array(analyser.fftSize); // Float32Array needs to be the same length as the fftSize analyser.getFloatTimeDomainData(dataArray); // fill the Float32Array with data returned from getFloatTimeDomainData()
A Float32Array
.
The following example shows basic usage of an AudioContext
to create an AnalyserNode
, then requestAnimationFrame
and <canvas>
to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. For more complete applied examples/information, check out our Voice-change-O-matic-float-data demo (see the source code too).
var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); var analyser = audioCtx.createAnalyser(); ... analyser.fftSize = 1024; var bufferLength = analyser.fftSize; console.log(bufferLength); var dataArray = new Float32Array(bufferLength); canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); function draw() { drawVisual = requestAnimationFrame(draw); analyser.getFloatTimeDomainData(dataArray); canvasCtx.fillStyle = 'rgb(200, 200, 200)'; canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); canvasCtx.lineWidth = 2; canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; canvasCtx.beginPath(); var sliceWidth = WIDTH * 1.0 / bufferLength; var x = 0; for(var i = 0; i < bufferLength; i++) { var v = dataArray[i] * 200.0; var y = HEIGHT/2 + v; if(i === 0) { canvasCtx.moveTo(x, y); } else { canvasCtx.lineTo(x, y); } x += sliceWidth; } canvasCtx.lineTo(canvas.width, canvas.height/2); canvasCtx.stroke(); }; draw();
Float32Array
that the time domain data will be copied to.Specification | Status | Comment |
---|---|---|
Web Audio API The definition of 'getFloatTimeDomainData()' in that specification. | Working Draft |
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 14 | Yes | 25 | No | 15 | 6 |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | Yes | 14 | Yes | 26 | No | 15 | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/getFloatTimeDomainData