view source

JavaScript

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

CSS

#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;
}

HTML

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

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

ABOUT

hi0a.com 「ひまアプリ」は無料でつかえる便利ツールやブラウザ上で遊べるミニゲームを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。ご了承下さい。