getUserMedia、MediaRecorderを使ってブラウザで録音する

getUserMedia、MediaRecorderを使ってブラウザで録音する

久しぶりの投稿となりました。kyamashitaです。

今回はgetUserMedia、MediaRecorderを使ってブラウザで録音してみます。

準備

browser-syncを使えるようにします

npm init
npm install browser-sync

browser-syncの設定します

録音処理にはhttpsが必須のためhttpsをtrueにします。
npx browser-sync init

bs-config.jsを修正します。
module.exports = {
    "files": ["htdocs/index.html"],
    "server": 'htdocs',
    "https": true,
    "startPath": '/',
};

npmのコマンドを書いておきます

package.json
"scripts": {
    "start": "browser-sync start --config bs-config.js"
},

index.htmlを一旦作成しておきます

htdocs/index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>sample</title>
</head>
<body>
<h1>sample</h1>
</body>
</html>

起動の確認

ターミナルで
npm run start
を実行し

https://localhost:3000/
にアクセスできることを確認します。

録音処理

htdocs/index.htmlを変更します。 録音ボタンを押して録音開始 停止ボタンを押して録音終了し、audioを追加します。 getUserMediaのconstraintsはChromeとそれ以外で変更します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>sample</title>
<style>
.buttons {
text-align: center;
margin-bottom: 20px;
}
.medias {
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>

<div class="buttons">
<button class="start">録音</button>
<button class="stop">停止</button>
</div>
<div class="medias">
</div>

<script>
window.onload = function () {
    const start = document.querySelector('.start');
    const stop = document.querySelector('.stop');
    const medias = document.querySelector('.medias');
    let mediaRecorder = null;
    let chunks = [];
    const constraints = getConstraints();

    navigator.mediaDevices.getUserMedia(constraints)
        .then(function (stream) {
            mediaRecorder = new MediaRecorder(stream);
            mediaRecorder.ondataavailable = function(e) {
                chunks.push(e.data);
            };
            mediaRecorder.onstop = function() {
                const blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
                chunks = [];
                const elementDiv = document.createElement('div');
                const elementAudio = document.createElement('audio');
                elementAudio.controls = true;
                elementAudio.src = window.URL.createObjectURL(blob);
                elementDiv.appendChild(elementAudio);
                medias.appendChild(elementDiv);
            };
        })
        .catch(function (e) {
            alert(e);
        });

    start.addEventListener('click', function(){
        mediaRecorder.start();
    });

    stop.addEventListener('click', function(){
        mediaRecorder.stop();
    });

    function getConstraints() {
        const ua = window.navigator.userAgent.toLowerCase();
        const isChrome = (ua.indexOf('chrome') !== -1) && (ua.indexOf('edge') === -1) && (ua.indexOf('opr') === -1);
        let constraints = {};
        if (isChrome) {
            constraints = {
                "video": false,
                "audio": {
                    "mandatory": {
                        "googEchoCancellation": false,
                        "googAutoGainControl": false,
                        "googNoiseSuppression": false,
                        "googHighpassFilter": false
                    },
                },
            };
        } else {
            constraints = {
                "video": false,
                "audio": {
                    "echoCancellation": false,
                    "autoGainControl": false,
                    "noiseSuppression": false
                },
            };
        }
        return constraints;
    }
};
</script>

</body>
</html>
以下のように録音できると思います。 kyamahsita_202109_01.png

感想

今回は録音だけ記載してみました。 フィルターを使って録音した音声を加工したり、 別のファイルを合成したり、 WebGLと組み合わせて波形を出力したりなどもできるので次回以降紹介していきたいと思います。
  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ