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 つの入力と出力を持ちます。出力先がなくてもこのノードは問題ありません。
入力の数 | 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 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