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