AnalyserNode

コンストラクター

AnalyserNode()

AnalyserNode オブジェクトの新しいインスタンスを生成します。

インスタンスプロパティ

親である AudioNode から継承したプロパティもあります。

AnalyserNode.fftSize

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

AnalyserNode.frequencyBinCount 読取専用

符号なし long 型の値で、 FFT のサイズの半分の値。一般的に音声再生時の可視化に用いられます。

AnalyserNode.minDecibels

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

AnalyserNode.maxDecibels

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

AnalyserNode.smoothingTimeConstant

double 型の値で、分析フレームの平均間隔を表します。基本的に、時間的にスペクトルを平滑化させるのに用いられます。

インスタンスメソッド

親である AudioNode から継承したメソッドもあります。

AnalyserNode.getFloatFrequencyData()

現在の周波数データを、引数として渡された Float32Array 配列へコピーします。

AnalyserNode.getByteFrequencyData()

現在の周波数データを、引数として渡された Uint8Array 配列（unsigned byte 配列）へコピーします。

AnalyserNode.getFloatTimeDomainData()

現在の波形または時間領域データを、渡された Float32Array 配列へコピーします。

AnalyserNode.getByteTimeDomainData()

現在の波形または時間領域データを、引数として渡された Uint8Array 配列（unsigned byte 配列）へコピーします。

例

基本的な使い方

次の例では、 AudioContext で AnalyserNode を作成し、 requestAnimationFrame と <canvas> で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。 より完全な応用例/情報については、 Voice-change-O-matic のデモを調べてください（関連するコードは app.js の 108-193 行目を参照）。

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// …

const analyser = audioCtx.createAnalyser();
analyser.fftSize = 2048;

const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

// Connect the source to be analysed
source.connect(analyser);

// Get a canvas defined with ID "oscilloscope"
const canvas = document.getElementById("oscilloscope");
const canvasCtx = canvas.getContext("2d");

// draw an oscilloscope of the current audio source

function draw() {
  requestAnimationFrame(draw);

  analyser.getByteTimeDomainData(dataArray);

  canvasCtx.fillStyle = "rgb(200, 200, 200)";
  canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

  canvasCtx.lineWidth = 2;
  canvasCtx.strokeStyle = "rgb(0, 0, 0)";

  canvasCtx.beginPath();

  const sliceWidth = (canvas.width * 1.0) / bufferLength;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    const v = dataArray[i] / 128.0;
    const y = (v * canvas.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();

仕様書

ブラウザーの互換性

関連情報

• ウェブオーディオ API の使用