概要

mediaDevices.getUserMediaとMediaRecorder APIを使ってブラウザ上での録音を試してみました。

やりたいこと

1つのボタンで録音の開始と停止を切り替える
getUserMediaとMediaRecorderで音を録音する
audioタグに録音した音を再生する
録音中以外はgetUserMediaはオフにする

環境

Mac iOS 10.11.6
Chrome 66.0.3359.181

ソースコード

<!DOCTYPE html>
<head>
　　　　<title>recording</title>
</head>
<body>
　　　　<div style="display:flex;">
  　　　　<button id="recorder">Record</button>
  　　　　<audio id="player" controls></audio>
　　　　</div>
</body>
<script>
if (!navigator.mediaDevices) {
 alert("mediaDevices is unavailable");
}

var mediaRecorder = null;
var localstream;

// 録音開始
rec_start = function(){
  navigator.mediaDevices.getUserMedia({audio:true})
    .then(function(stream) {
      localstream = stream;
      mediaRecorder = new MediaRecorder(stream);
      mediaRecorder.start();
    })
    .catch(function(e){
      console.log(e);
    });
}

// 録音停止
rec_stop = function(){
  mediaRecorder.stop();
  mediaRecorder.ondataavailable = function(e) {
    document.getElementById('player').src = URL.createObjectURL(e.data);
  }
  localstream.getTracks().forEach(track => track.stop());
}

document.getElementById('recorder').onclick = function(){
  // ボタンの色で録音開始、停止を切り替える
  if (this.style.backgroundColor == ''){
    rec_start();    // 開始
    this.style.backgroundColor = '#c71585';
  } else {
    rec_stop();     // 停止
    this.style.backgroundColor = '';
  }
}
</script>

これだけでブラウザから録音ができるのはとても簡単で良いですね。
mediaRecorder.ondataavailable部分の処理を変えれば、ファイル形式を指定して保存など色々できそうですね。

参考

MediaDevices.getUserMedia() - Web API インターフェイス | MDN
MediaRecorder API - Web API インターフェイス | MDN

getUserMediaとMediaRecorder APIを使ってブラウザから録音

概要

やりたいこと

環境

ソースコード

参考