先日、パソコンの前で手を叩いたら、その音をキッカケにして動作するアプリは作れないかな？という意見が挙がった。


というわけで、早速調べてみたところ、HTML5のAPIでWeb Audio APIをいう仕様を見つけた。

Web Audio API - Web API インターフェイス | MDN


というわけで、早速、上記のURLと下記のURLを参考にして録音アプリを作ってみた。

ユーザーから音声データを取得する  |  Web |  Google Developers


実際に書いたコードは下記の通り


<h1>Web Audio APIのサンプル</h1>
<p>実行と同時に録音がはじまり、10秒後に音声データを生成します</p>
<a id="dl">ダウンロード</a>

<script>
    //様々なブラウザでマイクへのアクセス権を取得する
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;

    //audioのみtrue。Web Audio APIが問題なく使えるのであれば、第二引数で指定した関数を実行する
    navigator.getUserMedia({
        audio: true,
        video: false
    }, successFunc, errorFunc);

    function successFunc(stream) {
        var recorder = new MediaRecorder(stream, {
            mimeType: 'video/webm;codecs=vp9'
        });

        //音を拾い続けるための配列。chunkは塊という意味
        var chunks = [];

        //集音のイベントを登録する
        recorder.addEventListener('dataavailable', function(ele) {
            if (ele.data.size > 0) {
                chunks.push(ele.data);
            }
        });

        // recorder.stopが実行された時のイベント
        recorder.addEventListener('stop', function() {

            var dl = document.querySelector("#dl");

            //集音したものから音声データを作成する
            dl.href = URL.createObjectURL(new Blob(chunks));
            dl.download = 'sample.wav';
        });

        recorder.start();

        //10秒後に集音を終了する。
        setTimeout(function() {
            alert("stop");
            recorder.stop();
        }, 10000);
    }

    // Web Audio APIが使えなかった時
    function errorFunc(error) {
        alert("error");
    }

</script>

ざっくりと作成したコードの解説をすると、上記のコードを記述したHTMLをChrome等のブラウザで開くと、問答無用で録音を開始し、開いてから10秒後に録音を止めて、録音した内容はsample.wavというファイルになってダウンロード出来るようになるというもの。


これでJavaScriptで音を拾えることはわかったけれども、実際にやりたいことは音に合わせて処理を変えるというものなので、取得した音を周波数として扱えるようにしなければならない。


- 続く-