AnalyserNode

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

AnalyserNode 는 시간대 별로 실시간 주파수의 정보를 표현합니다. AudioNode 를 통해 오디오 스트림정보가 그대로 입력되어 출력이 되지만 이를 통해 당신은 새로운 형태의 데이터를 생성하거나, 가공하고 오디오를 시각화 시키는 작업을 할 수 있습니다.

AnalyzerNode 는 하나의 입력에 하나의 출력을 가집니다. 그리고 이 노드는 출력이 명시되지 않더라도 동작을 합니다.

Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT.

Number of inputs 1
Number of outputs 1 (but may be left unconnected)
Channel count mode "explicit"
Channel count 1
Channel interpretation "speakers"

Note: See the guide Visualizations with Web Audio API for more information on creating audio visualizations.

Properties

AudioNode 를 부모로 가지는 프로퍼티.

AnalyserNode.fftSize
부호가 없는(unsigned long value) 주파수 영역에서의 전체 크기의 값을 나타내기 위한 푸리에 변환의 값의 크기를 나타낸다. (대략적으로 설명을 하면 해당 주파수영역을 보는데 얼마나 세밀하게 데이터를 볼것인지를 나타낸다. 클수록 세밀하지만 시간이 오래걸리고 작으면 빨리한다.)
 
AnalyserNode.frequencyBinCount Read only
부호가 없는 푸리에변환 값의 절반을 나타낸다. 이 값은 일반적으로 데이터를 시각화 하기위해 사용되는 데이터의 수와 같다.
AnalyserNode.minDecibels
double형 값으로 표현되는  FFT(푸리에 변환)로 분석된 데이터의 범위에서의 최소값을 나타낸다. 이는 부호가 없는 바이트 값으로 변환된다. 일반적으로 이 특정한 최소값은 getByteFrequencyData()를 사용하여 얻은 결과값이다.
AnalyserNode.maxDecibels
double형 값으로 표현되는  FFT(푸리에 변환)로 분석된 데이터의 범위에서의 최대값을 나타낸다. 이는 부호가 없는 바이트 값으로 변환된다. 일반적으로 이 특정한 최대값은 getByteFrequencyData()를 사용하여 얻은 결과값이다.
AnalyserNode.smoothingTimeConstant
double형 값으로 마지막에 분석된 프레임의 평균 정수값을 나타낸다. 일반적으로 이 값을 통해 time smoother상의 값들을  변환하는데 사용된다.

Methods

AudioNode 을 상속하는 메서드.

AnalyserNode.getFloatFrequencyData()
현재의 주파수 데이터를  Float32Array 로 복사해 전달한다.
AnalyserNode.getByteFrequencyData()
현재의 주파수 데이터를  Uint8Array (unsigned byte array) 로 복사해 전달한다.
AnalyserNode.getFloatTimeDomainData()
현재 데이터의 파형, 또는 시간기반(time-domain) 데이터를  Float32Array 배열에 전달한다.
AnalyserNode.getByteTimeDomainData()
현재 데이터의 파형, 또는 시간기반(time-domain) 데이터를 Uint8Array (unsigned byte array) 로 전달한다.

Example

이 예제는  AudioContext 를 사용해 AnalyserNode를 생성하여 사용하는 방법을 보여주고,  requestAnimationFrame and <canvas> 를 통해 반복적으로 시간기반(time-domain) 의 정보를 반복적으로 수집 및  "oscilloscope style" 를 통해 입력된 오디오 정보를 시각화하여 보여주는 예제입니다. 더 많은 정보와 예제는  Voice-change-O-matic demo (see app.js lines 128–205 for relevant code)를 확인 하세요.

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
// 새로운 AnalyserNode를 생성한다.
  ...

analyser.fftSize = 2048; // FFT의 크기를 2048로 한다.
var bufferLength = analyser.frequencyBinCount; // 시각화를 하기 위한 데이터의 갯수
var dataArray = new Uint8Array(bufferLength); // 데이터를 담을 bufferLength 크기의 Unit8Array의 배열을 생성
analyser.getByteTimeDomainData(dataArray); // 시간기반의 데이터를 Unit8Array배열로 전달

// 얻어진 데이터를 기반으로 시각화 작업을 한다. 캔버스를 이용한다.

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

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

      for(var i = 0; i < bufferLength; i++) {
   
        var v = dataArray[i] / 128.0;
        var 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();

Specifications

Specification Status Comment
Web Audio API
The definition of 'AnalyserNode' in that specification.
Working Draft  

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
AnalyserNodeChrome Full support 14Edge Full support YesFirefox Full support 25IE No support NoOpera Full support 15Safari Full support 6WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 26Opera Android Full support 14Safari iOS Full support YesSamsung Internet Android Full support Yes
AnalyserNode() constructorChrome Full support 55Edge ? Firefox Full support 53IE No support NoOpera Full support 42Safari ? WebView Android Full support 55Chrome Android Full support 55Firefox Android Full support 53Opera Android Full support 42Safari iOS ? Samsung Internet Android Full support 6.0
fftSizeChrome Full support 14Edge Full support 12Firefox Full support 25IE No support NoOpera Full support 15Safari Full support 6WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 26Opera Android Full support 14Safari iOS Full support YesSamsung Internet Android Full support Yes
frequencyBinCountChrome Full support 14Edge Full support 12Firefox Full support 25IE No support NoOpera Full support 15Safari Full support 6WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 26Opera Android Full support 14Safari iOS Full support YesSamsung Internet Android Full support Yes
getByteFrequencyDataChrome Full support 14Edge Full support 12Firefox Full support 25IE No support NoOpera Full support 15Safari Full support 6WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 26Opera Android Full support 14Safari iOS Full support YesSamsung Internet Android Full support Yes
getByteTimeDomainDataChrome Full support 14Edge Full support 12Firefox Full support 25IE No support NoOpera Full support 15Safari Full support 6WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 26Opera Android Full support 14Safari iOS Full support YesSamsung Internet Android Full support Yes
getFloatFrequencyDataChrome Full support 14Edge Full support 12Firefox Full support 25IE No support NoOpera Full support 15Safari Full support 6WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 26Opera Android Full support 14Safari iOS Full support YesSamsung Internet Android Full support Yes
getFloatTimeDomainDataChrome Full support 14Edge Full support 12Firefox Full support 25IE No support NoOpera Full support 15Safari No support NoWebView Android Full support YesChrome Android Full support 18Firefox Android Full support 26Opera Android Full support 14Safari iOS ? Samsung Internet Android Full support Yes
maxDecibelsChrome Full support 14Edge Full support 12Firefox Full support 25IE No support NoOpera Full support 15Safari Full support 6WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 26Opera Android Full support 14Safari iOS Full support YesSamsung Internet Android Full support Yes
minDecibelsChrome Full support 14Edge Full support 12Firefox Full support 25IE No support NoOpera Full support 15Safari Full support 6WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 26Opera Android Full support 14Safari iOS Full support YesSamsung Internet Android Full support Yes
smoothingTimeConstantChrome Full support 14Edge Full support 12Firefox Full support 25IE No support NoOpera Full support 15Safari Full support 6WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 26Opera Android Full support 14Safari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

See also