これは2017年WebRTCアドベントカレンダーの23日目の記事です。

はじめに

最近、話題のスマートスピーカーGoogle HomeのCMようなことブラウザでもやりたい。

ということで

いろいろ調べてみると最もお手軽なのはWeb_Speech_APIしたが、ブラウザ互換性を見ると
Safari未サポートということなのでcloud speech API用の音声ファイルを作ってみます。

ちなみにGoogle Cloud Speech APIはLINEAR16 または MULAW でエンコードされたwavファイルも対応
しているのでブラウザでマイク音声からwavファイルを生成する手引 1
こちらで十分なのですが

今回は違う形式の音声ファイル(flac)をブラウザで作成したいので
ライブラリないかなと探していた所、いいのありました！

ライブラリ

Flacエンコード用
https://github.com/mmig/libflac.js
MIT License

Blob保存
https://github.com/eligrey/FileSaver.js
MIT License

WebWorkerを使ったDemoも用意されてます
https://mmig.github.io/speech-to-flac/

実装方法

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>flac recorder</title>
</head>
<body>
    <input type="button" id="start-button" onclick="startRecording();" value="Rec"></input>
    <input type="button" id="stop-button" onclick="stopRecording();" value="Stop"></input>
    <script type="text/javascript" src="libflac3-1.3.2.min.js" /></script>
    <script type="text/javascript" src="FileSaver.min.js" /></script>
    <script type="text/javascript">
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia;
    window.URL = window.URL || window.webkitURL;

    var encoder = null;
    var recording = false;
    var localStream = null;
    var audio_context = null;
    var source = null;
    var node = null;

    function startRecording() {
        //worker開始
        encoder = new Worker('encoder.js');
        encoder.onmessage = function(evt) {
            if (evt.data.cmd == 'end') {
                //flac保存処理
                saveAs(evt.data.buf, 'output.flac');
                //worker破棄
                encoder.terminate();
                encoder = null;
            }
        };

        navigator.getUserMedia({ video: false, audio: true },
            function(stream) { // for success case
                localStream = stream;
                gotStream(localStream);
            },
            function(err) { // for error case
                console.log(err);
            }
        );
    }


    function gotStream(stream) {
        console.log('start recording');
        recording = true;

        var audio_context;
        if (typeof webkitAudioContext !== 'undefined') {
            audio_context = new webkitAudioContext;
        } else if (typeof AudioContext !== 'undefined') {
            audio_context = new AudioContext;
        }
        source = audio_context.createMediaStreamSource(stream);

        if (source.context.createJavaScriptNode) {
            node = source.context.createJavaScriptNode(4096, 1, 1);

        } else if (source.context.createScriptProcessor) {
            node = source.context.createScriptProcessor(4096, 1, 1);
        }

        var samplerate = audio_context.sampleRate; //44100 または 48000
        //flac初期処理
        encoder.postMessage({ cmd: 'init', config: { samplerate: samplerate, bps: 16, channels: 1, compression: 5 } });

        node.onaudioprocess = function(evt) {
            if (!recording) {
                return;
            }

            var channel = evt.inputBuffer.getChannelData(0);
        　　　//flacエンコード
            encoder.postMessage({ cmd: 'encode', buf: channel });
        };

        source.connect(node);
        node.connect(audio_context.destination);
    }

    function stopRecording() {
        if (!recording) {
            return;
        }
        console.log('stop recording');
        var tracks = localStream.getAudioTracks()
        for (var i = tracks.length - 1; i >= 0; --i) {
            tracks[i].stop();
        }
        recording = false;
        //worker終了
        encoder.postMessage({ cmd: 'finish' });

        source.disconnect();
        node.disconnect();
        source = node = null;
    };
    </script>
</body>

</html>

おわりに

そのうちMediaRecorderのmimeTypeにflacが追加されるのを期待しますｗ！

ブラウザでgetUserMediaしたストリームからflacファイルを作成してみる

はじめに

ライブラリ

実装方法

おわりに