AnalyserNode
============

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

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

![音声ストリームを変更することなく、ノードは FFT を使用して、それに関連する周波数と時刻のデータを取得することができます。](/ja/docs/Web/API/AnalyserNode/fttaudiodata_en.svg)

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

### 基本的な使い方

 次の例では、 `AudioContext` で `AnalyserNode` を作成し、 `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 with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

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