//js-audio-recorder-QBMediaRecorder
//https://quickblox.github.io/javascript-media-recorder/docs/QBMediaRecorder.html#download
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 rec;
var _stream;
var audioData =[];
var blob;

var opts = {
    onstart: function onStart() { // Use named function.
        console.log('Recorder is started');

        var time = 0,
            step = 1000;

        setTimeout(function () {
            time += step;
            console.info(`You are recording ${time} sec.`);
        }, step);
    },
    onstop: function onStop(blob) {
      var src = URL.createObjectURL(blob);
      $audio[0].src = src;
      var filename = getYYYYMMDD_HHNNSS() + '.mp3';
      $audio[0].currentTime = 0;
      $audio[0].play();
      $a[0].download = filename;
      $a[0].href = src;
      $a.text('DOWNLOAD');
    },
    ondataavailable: function(e){
      blob = e.data;
      $audio[0].src = window.URL.createObjectURL(blob);
    },
    //mimeType: 'video/mp4',
    mimeType: 'audio/mp3',
    workerPath: 'qbAudioRecorderWorker.js'
//webmでなくMP3で取得できるが、容量が10倍で処理時間もかかる様子
};

var recorder = new QBMediaRecorder(opts);

var type = QBMediaRecorder.getSupportedMimeTypes('audio');
console.info(type);


navigator.mediaDevices
    .getUserMedia({audio: true})
    .then((stream) => {
      rec = new QBMediaRecorder(opts);
      console.log(rec);
      _stream = stream;
      console.log(rec);
      console.log(stream);
      $support1.text('OK');

    });


$(function(){
  console.log(recorder);
  $btn = $('<button>',{title:'REC'}).text('●');
  $a = $('<a>',{download:'REC.mp3'});
  $video = $('<video>');
  $audio = $('<audio>',{ controls:' controls'});
  $support1 = $('<p>').text('...');

  $btn.on('click', function(){
    console.log(_stream);
    if(rec.getState() == 'recording'){
      $(this).text('●');
      rec.stop();
    } else {
      $(this).text('■');
      rec.start(_stream);
    }
  });

  $('#demo')
    .append($btn)
    .append($audio)
    .append($support1)
    .append($a);
/*
  if( recorder.isTypeSupported('video/mp4') ) {
     $support1.text('support');
  }
  if( recorder.isTypeSupported('video/mp3') ) {
     $support2.text('support');
  }
*/
});

/*
QBMediaRecorder
https://quickblox.github.io/javascript-media-recorder/docs/QBMediaRecorder.html
*/

#demo{
  text-align:center;
}
a{
  display:block;
  margin:0 auto;
}
audio{
  display:block;
  margin:0 auto;
}
button{
  appearance: none;
  display:block;
  margin:0 auto;
  width:50vmin;
  height:50vmin;
  color:#f00;
  background:transparent;
  border:0;
  font-size:40vmin;
  cursor:pointer;
}

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

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