document.title = 'ボイスレコーダー 音声録音';
var recorder;
var audioData = [];
var status;
$(function(){


  var getYYYYMMDD_HHNNSS = function(){
    var date = new Date();
    var yyyy = date.getFullYear();
    var mm = ('00' + (date.getMonth()+1)).slice(-2);
    var dd = ('00' + date.getDate()).slice(-2);
    var hh = ('00' + date.getHours()).slice(-2);
    var nn = ('00' + date.getMinutes()).slice(-2);
    var ss = ('00' + date.getSeconds()).slice(-2);
    var yyyymmdd = yyyy + '' + mm + '' + dd;
    var hhnnss = hh + '' + nn + '' + ss;
    var result = yyyymmdd +'-'+ hhnnss;
    return result;
  }

  var getExtension = function(audioType) {
        let extension = 'mp3';
        const matches = audioType.match(/audio\/([^;]+)/);
        if(matches) {
            extension = matches[1];
        }
        return '.'+ extension;
    }
  var initRecord = function(stream){
    recorder = new MediaRecorder(stream);
    console.log(recorder);
    recorder.addEventListener('dataavailable', e => {
      audioData.push(e.data);
      console.log(e.data)
      audioExtension = getExtension(e.data.type);
      console.log(audioExtension)
      
    });
    recorder.addEventListener('stop', () => {

      status = 'stop';
      const audioBlob = new Blob(this.audioData);
      const url = URL.createObjectURL(audioBlob);
      //const dl = 'recoad-'+Math.floor(Date.now() / 1000) + audioExtension;
      const dl = 'recoad-' + getYYYYMMDD_HHNNSS() + audioExtension;

      $audio[0].src = url;
      //$audio[0].play();
      $a.text('DOWNLOAD');
      $a.attr({href:url});
      $a.attr({download:dl});
      let a = document.createElement('a');
      audioData = [];
    });
    status = 'ready';
  }

  navigator.mediaDevices.getUserMedia({ audio: true })
    .then(initRecord);


  var $h1 =$('<h1>').text(document.title);

  var $form =$('<form>');
  var $btn =$('<a>',{id:'rec',title:'●REC　録音開始'}).text('●');
  var $audio = $('<audio>',{ controls:' controls'});
  var $img =$('<img>',{src:'mic-permission',title:'次の許可を求めています マイクを使用する'});
  var $linkMp3 =$('<a>',{href:'https://convertio.co/ja/webm-mp3/',targer:'_blank'}).text('WEBM TO MP3 変換');


  var $a =$('<a>',{id:'dl'}).text(' - ');
  $btn.on('click', function(){
    if(status === 'recording'){
      recorder.stop();
      $(this).text('●');
    } else {
      srartRecord();
      $(this).text('■');
    };
  });
  $('#demo')
    .append($form)
  $form
    .append($btn)
    .append($audio)
    .append($a);

  var $after =$('<div>');
  $('#demo')
    .after($after);
  $after
    .append($h1)
    .append($linkMp3)
    .append($img);

  var srartRecord = function(){
    status = 'recording';
    audioData = [];
    recorder.start();
  };



});

/*
windows10 Google Chrome
録音した音声データ（録音テープ）は証拠能力がある
*/

//https://developer.mozilla.org/ja/docs/Web/API/MediaRecorder
//https://developer.cybozu.io/hc/ja/community/posts/360041597711-MediaRecorder-API%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E9%8C%B2%E9%9F%B3%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E3%81%A4%E3%81%8F%E3%82%8D%E3%81%86

//https://www.tagindex.com/html/basic/mimetype.html
//主なMIMEタイプの一覧
//音声 MP3	.mp3	audio/mpeg
//デフォルトだとMP3指定できない様子 webmになる？

//mp3
//https://quickblox.github.io/javascript-media-recorder/docs/index.html

#demo{
  display: grid;
  text-align:center;
  place-items: center;
}
#demo a#rec{
  display:block;
  width:100%;
  margin:8px auto;
  font-size:240px;
  color:#f00;
  cursor:pointer;
}
audio{
  width:40vw;
  min-width:240px;
  display:block;
  margin:8px auto;
}
#demo a#dl{
  display:block;
  margin:8px auto;
  font-size:18px;
}

#demo img{
  display:block;
  width:40vw;
  margin:8px auto;
}

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-audio-recorder/