AudioContextインターフェースのcreateAnalyser()メソッドは、音声の時間と周波数を解析するAnalyserNodeを生成します。これはデータの可視化などで使えます。

注: このノードの詳しい説明は、AnalyserNodeのページを参照してください。

構文

var audioCtx = new AudioContext();
var analyser = audioCtx.createAnalyser();

戻り値

AnalyserNode

次のサンプルでは、基本的なAudioContextAnalyserNodeの生成、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() の定義
草案  

ブラウザ互換性

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 10.0webkit 25.0 (25.0)  未サポート 15.0webkit
22
6.0webkit
Feature Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support ? 26.0 1.2 ? ? ? 33.0

参考

ドキュメントのタグと貢献者

このページの貢献者: maruhiro
最終更新者: maruhiro,