トップへ(mam-mam.net/)

Recording Audio from the Microphone in JavaScript: Download, POST to Server, and Playback

Japanese

Record and Play Audio from the Microphone

Press the “Enable Microphone” button to activate the microphone.
Then press the “Start Recording” button to begin recording.




(Reference) Using MediaRecorder allows you to compress audio data, but the codec format differs depending on the browser.

Source Code

<!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">

<script>
  var TMamMicRec=function(control,micOnBtn,recStartBtn,recStopBtn,recMime){
    this.control=control;
    this.micOnBtn   =micOnBtn;
    this.recStartBtn=recStartBtn;
    this.recStopBtn =recStopBtn;
    this.recMime = recMime;
    
    this.stream=null;
    this.mediaRecorder=null;
    this.chunks=[];
    this.recStartBtn.setAttribute("disabled",true);
    this.recStopBtn.setAttribute("disabled",true);
    this.type=null;
    
    this.micOnBtn.addEventListener("click",function(){
      if(navigator.mediaDevices==undefined){
        alert('Unsupported browser or not using HTTPS');
        return;
      }
      navigator.mediaDevices.getUserMedia({audio:true})
      .then(function(stream){
        this.stream=stream;
        
        this.mediaRecorder=new MediaRecorder(this.stream);
        this.mediaRecorder.addEventListener("dataavailable",function(event){
          this.chunks.push(event.data);
          console.log(event.data);
        }.bind(this));
        this.mediaRecorder.addEventListener("stop",function(e){
          // audio/webm;codecs=opus audio/ogg; codecs=opus
          this.type=this.chunks[0].type;
          this.recMime.innerHTML=this.type;
          let blob=new Blob(this.chunks,{"type":this.type});
          this.chunks=[];

          /*
          // When downloading a file
          let aTag=document.createElement("a");
          aTag.href=URL.createObjectURL(blob);
          aTag.download="a.mp4";
          aTag.click();
          */

          /*
          //Convert to Data URI, place it in a <input type="hidden"> value, and send it to the server via POST
          let fileReaderPost = new FileReader();
          fileReaderPost.addEventListener("load", function(event){
            let formTag = document.createElement('form');
            formTag.method = "get";
            formTag.action = "post.php"; // URL to send the POST request to

            let inputTag = document.createElement('input');
            inputTag.type = "hidden";
            inputTag.name = "record"; // Name used when sending via POST
            inputTag.value = event.target.result; // Value sent via POST

            formTag.appendChild(inputTag);
            this.control.appendChild(formTag);
            formTag.submit(); // Execute POST
          }.bind(this));

          fileReaderPost.readAsDataURL(blob);
          */

          //Convert the recorded blob to a Data URI and play it directly using an <audio> tag
          let fileReaderAudio=new FileReader();
          fileReaderAudio.addEventListener("load",function(event){
            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");
              audio_play.setAttribute("playsinline","");
              this.control.appendChild(audio_play);
              //document.getElementById("Control").appendChild(audio_play);
            }else{
              audio_play.pause();
              audio_play.currentTime=0;
            }
            audio_play.setAttribute("src",event.target.result);
            //audio_play.src=this.result;
            audio_play.load();
            audio_play.play();
          }.bind(this));
          fileReaderAudio.readAsDataURL(blob);

          this.recStartBtn.removeAttribute("disabled");
          this.recStopBtn.setAttribute("disabled",true);
        }.bind(this));
        this.recStartBtn.removeAttribute("disabled");
        this.micOnBtn.setAttribute("disabled",true);
      }.bind(this)).catch(function(e){
        console.log(e);
        document.getElementById("alert").innerHTML=e;
      }.bind(this));
    }.bind(this));
    this.recStartBtn.addEventListener("click",function(){
      this.recStartBtn.setAttribute("disabled", true);
      this.recStopBtn.removeAttribute("disabled");
      this.mediaRecorder.start();
    }.bind(this));
    this.recStopBtn.addEventListener("click",function(){
      this.mediaRecorder.stop();
    }.bind(this));
  }
  window.addEventListener("DOMContentLoaded",function(){
    mamMicRec=new TMamMicRec(
      document.getElementById("Control"),
      document.getElementById("MicOn"),
      document.getElementById("RecStart"),
      document.getElementById("RecStop"),
      document.getElementById("RecMime")
    );
  });
</script>
</head>
<body>
  <div id="Control">
    <button id="MicOn">Enable Microphone</button><br/>
    <button id="RecStart">Start Recording</button>
    <button id="RecStop" disabled>Stop Recording</button><br>
    <div id="RecMime"></div>
  </div>
</body>
</html>