AnalyserNode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

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

1 つの AnalyserNode は必ず 1 つの入力と出力を持ちます。出力先がなくてもこのノードは問題ありません。

音声ストリームを変更することなく、ノードは FFT を使用して、それに関連する周波数と時刻のデータを取得することができます。

EventTarget AudioNode AnalyserNode
入力の数 1
出力の数 1 (ただし未接続のままになる)
チャンネル数モード "max"
チャンネル数 2
チャンネルの解釈 "speakers"

コンストラクター

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 配列)へコピーします。

メモ: 音声の視覚化を作成するための詳細は、ウェブオーディオ API の視覚化のガイドを参照してください。

基本的な使い方

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

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

仕様書

Specification
Web Audio API
# AnalyserNode

ブラウザーの互換性

BCD tables only load in the browser

関連情報