17
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-06-23

#概要
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

17
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?