AnalyserNode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

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

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

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

入力の数	`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 の視覚化のガイドを参照してください。

次の例では、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 analysedsource.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 sourcefunction 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();