MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

AnalyserNode

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 10.0webkit 25.0 (25.0)  Not supported 15.0webkit
22 (unprefixed)
6.0webkit
Feature Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support ? 26.0 1.2 ? ? ? 33.0

See also

문서 태그 및 공헌자

 이 페이지의 공헌자: teoli, yuby
 최종 변경: teoli,