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

JavaScript

2021.09.10

久しぶりの投稿となりました。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">
<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>sample</title>
</head>
<body>
<button id="start">録音</button>
<button id="stop">停止</button>
<hr>
<audio id="player" controls></audio>
<script>
    window.onload = function () {

        const start = document.querySelector('#start');
        const stop = document.querySelector('#stop');
        const player = document.querySelector('#player');

        let mediaRecorder = null;
        let mimeType = '';
        let chunks = [];

        navigator.mediaDevices.getUserMedia({"video": false, "audio": true})
            .then(function (stream) {
                mediaRecorder = new MediaRecorder(stream);
                mediaRecorder.ondataavailable = function (e) {
                    mimeType = e.data.type;
                    chunks.push(e.data);
                };
                mediaRecorder.onstop = function () {
                    const blob = new Blob(chunks, {'type': mimeType});
                    chunks = [];
                    player.src = window.URL.createObjectURL(blob);
                };
            })
            .catch(function (e) {
                alert(e);
            });

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

        stop.addEventListener('click', function () {
            mediaRecorder.stop();
        });
    };
</script>

</body>
</html>

以下のように録音できると思います。