AnalyserNode

この記事は技術レビューを必要としています。ぜひご協力ください

この記事は編集レビューを必要としています。ぜひご協力ください

AnalyserNodeインタフェースはリアルタイム時間領域/周波数領域分析情報を表現します。AudioNodeは、入力から出力の流れにおいてaudio streamそのものは変えず、データ加工や音声の可視化をすることができます。

1つのAnalyzerNodeは必ず1つの入力と出力を持ちます。出力先がなくても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"

Inheritance

このインタフェースは以下のインタフェースと継承関係にあります。:

Properties

 以下は、AudioNodeからプロパティを継承する.

AnalyserNode.fftSize

符号なしのlong型の値でFFT(高速フーリエ変換)において周波数領域を決定するために使われているサイズを表している。

AnalyserNode.frequencyBinCount 読取専用
符号なしのlong型でFFT(高速フーリエ変換)のサイズの半分の値。一般的に音声再生時の可視化に用いられる。
AnalyserNode.minDecibels

unsigned byte型値へ変換するFFT分析データのスケーリング時の最小のパワー値を表すdouble型の値である。一般的に、この値は、getByteFrequencyData()の使用時の結果の範囲の最小値として明記される。

AnalyserNode.maxDecibels

unsigned byte型値へ変換するFFT分析データのスケーリング時の最大のパワー値を表すdouble型の値である。一般的に、この値は、getByteFrequencyData()の使用時の結果の範囲の最大値として明記される。

AnalyserNode.smoothingTimeConstant
分析フレームの平均間隔を表すdouble型の値で、使用例として時間的にスペクトルを平滑化させるのに用いられる。

Methods

AudioNodeからメソッドを継承する.

AnalyserNode.getFloatFrequencyData()
周波数データを引数として渡されたFloat32Array配列へコピーする。
AnalyserNode.getByteFrequencyData()
周波数データを引数として渡されたUint8Array配列(unsigned byte配列)へコピーする。
AnalyserNode.getFloatTimeDomainData()
音声波形データを引数として渡されたFloat32Array配列へコピーする。
AnalyserNode.getByteTimeDomainData()
音声波形データを引数として渡されたUint8Array配列(unsigned byte配列)へコピーする。

Examples

Note: オーディオヴィジュアライゼーションのためのWeb Audio APIを使ったヴィジュアライゼーションガイドを御覧ください。

Basic usage

以下の例では、AudioContextから1つのAnalyserNodeを作成しており、requestAnimationFrameと<canvas>へ繰り返し時間波形データを繰り返し集め現入力を“オシロスコープスタイル”で出力し描画している。

より多くのサンプルは 我々の Voice-change-O-matic デモにご覧頂けます。 (see app.js lines 128–205 for relevant code).

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

      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
AnalyserNode の定義
草案  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 10.0webkit 25.0 (25.0)  未サポート 15.0 webkit
22
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

ドキュメントのタグと貢献者

 このページの貢献者: ikohs, dskmori
 最終更新者: ikohs,