AudioContext.createAnalyser()
AudioContext
インターフェースのcreateAnalyser()
メソッドは、音声の時間と周波数を解析するAnalyserNode
を生成します。これはデータの可視化などで使えます。
注: このノードの詳しい説明は、AnalyserNode
のページを参照してください。
構文
var audioCtx = new AudioContext();
var analyser = audioCtx.createAnalyser();
戻り値
例
次のサンプルでは、基本的なAudioContext
のAnalyserNode
の生成、requestAnimationFrame()
による時間データの周期的な収集と「オシロスコープのように」現在の音声を出力する方法を示しています。より完全な例と情報は、Voice-change-O-maticデモ(app.jsの128–205行目)を参照してください。
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
...
analyser.fftSize = 2048;
var bufferLength = analyser.fftSize;
var dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);
// 現在の音のオシロスコープのように描く
function draw() {
drawVisual = requestAnimationFrame(draw);
analyser.getByteTimeDomainData(dataArray);
canvasCtx.fillStyle = 'rgb(200, 200, 200)';
canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
canvasCtx.lineWidth = 2;
canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
canvasCtx.beginPath();
var sliceWidth = WIDTH * 1.0 / bufferLength;
var x = 0;
for(var i = 0; i < bufferLength; i++) {
var v = dataArray[i] / 128.0;
var y = v * 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 | Status | Comment |
---|---|---|
Web Audio API createAnalyser() の定義 |
草案 |
ブラウザ互換性
BCD tables only load in the browser