Web Audio API お勉強その１ - Hope is a Dream. Dream is a Hope.

g200kgさんのサイトにオーディオ波形を表示するサンプルコードがありましたので、お勉強させていただきます。

Web Audio API 解説 - 12.アナライザーの使い方 | g200kg Music & Software

UI部分

操作画面

f:id:hope_is_dream:20140417124210j:plain

HTMLコード

  <!DOCTYPE html>
  <html>
  <head></head>
  <body>
  <h1>Analyser</h1>
  <button onclick="Play()">Play</button><br/>
  <button onclick="Stop()">Stop</button><br/>
  <table>
  <tr><td>Frequency/TimeDomain : </td><td><select id="mode" onchange="Setup()"><option>Frequency</option><option>TimeDomain</option></select></td></tr>
  <tr><td>SmoothingTimeConstant : </td><td><input type="text" id="smoothing" value="0.9" onchange="Setup()"/></td></tr>
  <tr><td>MinDecibels : </td><td><input type="text" id="min" onchange="Setup()"/></td></tr>
  <tr><td>MaxDecibels : </td><td><input type="text" id="max" onchange="Setup()"/></td></tr>
  </table>
  <br/><br/>
  <canvas id="graph" width=256 height=256></canvas>
  <hr/>

構成

再生ボタン
停止ボタン
グラフ表示の周波数/時間領域の切り替え
SmoothingTimeConstant:
スペクトラムデータの動きの速さの設定.(TimeDomainデータには影響しない.
- 範囲:0-1
- 0: 最も早い
- 1: 最も遅い
minDecibels/maxDecibels:
実装のデフォルト値を確認する意味もあって最初に読み出して変更も可能にしていますが、通常は触らなくても良いと思います。とのことです。
グラフ:
fftSizeが1024の内, 256だけデータを読み出し表示している.

処理部分

各ブラウザ対応のためのスクリプトを読み出しています.

waapisim.jsはg200kgさんのgithubに上がってました.

    <script type="text/javascript" src="./docs/WAAPISim/waapisim.js"></script>

    if(typeof(webkitAudioContext)!=="undefined")
      var audioctx = new webkitAudioContext();
    else if(typeof(AudioContext)!=="undefined")
      var audioctx = new AudioContext();

XMLHttpRequet経由で音声ファイルをbufferへ格納している。

    var buffer = null;
    LoadSample(audioctx, "./sample.wav");

    function LoadSample(ctx, url) {
        var req = new XMLHttpRequest();
        req.open("GET", url, true);
        req.responseType = "arraybuffer";
        req.onload = function () {
            if(req.response)
                buffer = ctx.createBuffer(req.response, false);
            else
                buffer = ctx.createBuffer(VBArray(req.responseBody).toArray(), false);
        }
    req.send();
    }

XMLHttpRequest とは

URL からデータを読み出す簡単な方法を提供します。XMLHttpRequest という名前ではあるものの、XML に限らないデータ形式を取り扱うことができ、（ file および ftp を含む） HTTP 以外のプロトコルもサポートしています。

メソッド

open()
- リクエストの初期化.
send()
- リクエストの送信.

プロパティ

readyState
- リクエストの状態
  - 0 : UNSENT(open()がまだ呼び出されていない)
  - 1 : OPENED(send()がまだ呼び出されていない)
  - 2 : HEADERS_RECEIVED(send()が呼び出され, ヘッダーとステータスが通った.)
  - 3 : LOADING(ダウンロード中)
  - 4 : DONE(一連の動作が完了した)
response
- responseTypeに従ったレスポンスの実体。
- (今回の場合はArrayBuffer)
rewponseType
- 値を設定することでレスポンス型を変更することができます。これにより、サーバーに対して、どの形式のレスポンスを求めているかを表明します。
- empty string : Stirng (デフォルト)
- "arraybuffer" : ArrayBuffer
- "blob" : Blog
- "document" : Document
- "text" : String
- "json" : サーバが返してきたJSON文字列をパースしたJavaScriptオブジェクト
status
- リクエストに対するレスポンスのステータスです。この値は HTTP リザルトコードとなります（例えばリクエストに成功した場合、status は 200 となります）.読み取り専用。
statusText
- HTTP サーバーから返ってきたレスポンス文字列です。status とは異なり、（"200 OK" のように）レスポンスメッセージの完全な文が含まれています。読み取り専用。

ArrayBufferとは

ArrayBuffer は、一般的な固定長のバイナリデータのバッファを示すために使われるデータタイプです。ArrayBuffer の内容物を直接操作することはできません。代わりにバッファを特定の形式で表現し、またバッファの内容物を読み書きするために使用される ArrayBufferView オブジェクトを作成します。