Javascriptでマイクから録音する

Javascriptでマイクから録音する


Javascriptでマイクから録音して、音声ファイルをダウンロードする、サーバーにPOSTする、録音を再生する

マイクから録音、再生する


ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=4,user-scalable=yes">
  <title>Sound Record From Microphone to download file, or to post server, or to play.</title>
<script>
  var mediaRecorder=null,
      mediaStream,startBtn,startBtn,
      chunks = [];
  window.addEventListener("load",function(){
    startBtn = document.querySelector('#start');
    stopBtn = document.querySelector('#stop');

    navigator.mediaDevices.getUserMedia({"audio":true})
    .then(function(stream){    //オーディオ(録音)メディアが取得できた(許可された)場合
      mediaStream = stream;

      mediaRecorder = new MediaRecorder(mediaStream,{"mimeType":"audio/webm"});
      mediaRecorder.addEventListener('dataavailable', function(e){
        chunks.push(e.data);
      });
      mediaRecorder.addEventListener('stop', function(){
        let blob=new Blob(chunks,{"type":chunks[0].type});
        chunks=[];

        //ファイルとしてダウンロードする場合
        let aTag = document.createElement('a');
        aTag.href = URL.createObjectURL(blob);
        aTag.download = 'record.webm';//ダウンロードするファイル名
        aTag.click();

        //DataURI変換して<input type="hidden">のvalueに入れてPOSTでサーバーに送る場合
        let fileReaderPost=new FileReader();
        fileReaderPost.addEventListener("load",function(){
          let formTag=document.createElement('form');
          formTag.method="post";
          formTag.action="post.php";//POST先URL
          let inputTag=document.createElement('input');
          inputTag.type="hidden";
          inputTag.name="record";//POST時の名前
          inputTag.value=this.result;//POST時の値
          formTag.appendChild(inputTag);
          //formTag.submit();//POST実行する
        });
        fileReaderPost.readAsDataURL(blob);

        /*
        //録音したblobを使って<audio>タグでそのまま再生する場合
        let audio_play=document.body.querySelector("#audio_play");
        if(audio_play==null){
          audio_play=document.createElement("audio");
          audio_play.setAttribute("controls","true");
          audio_play.setAttribute("id","audio_play");
          document.body.appendChild(audio_play);
        }
        audio_play.src=URL.createObjectURL(blob);
        audio_play.play();
        */

        //録音したblobをDataURIスキームに変換して<audio>タグでそのまま再生する場合
        let fileReaderAudio=new FileReader();
        fileReaderAudio.addEventListener("load",function(){
          let audio_play=document.body.querySelector("#audio_play");
          if(audio_play==null){
            audio_play=document.createElement("audio");
            audio_play.setAttribute("controls","true");
            audio_play.setAttribute("id","audio_play");
            document.body.appendChild(audio_play);
          }
          audio_play.src=this.result;
          audio_play.play();
        });
        fileReaderAudio.readAsDataURL(blob);
      });

      startBtn.addEventListener('click', function(){
        startBtn.setAttribute("disabled", true);
        stopBtn.removeAttribute("disabled");
        mediaRecorder.start();
      });
      stopBtn.addEventListener('click', function(){
        startBtn.removeAttribute("disabled", false);
        stopBtn.setAttribute("disabled", true);
        mediaRecorder.stop();
      });
    }).catch(function(err){//オーディオ(録音)メディアが取得できなかった(許可されなかった)場合
      startBtn.setAttribute("disabled", true);
      stopBtn.setAttribute("disabled", true);
      console.log(err);
    });
  });
</script>


</head>
<body>
  <button id="start">録音開始</button><button id="stop" disabled>録音終了</button>
</body>
</html>




Mam's WebSite