document.title = '音声認識 文章書き起こし';



var se = new Audio('/mp3/pi.mp3');

$(function(){
  rec = new webkitSpeechRecognition();

  var textarea = $('<textarea>',{id:'textarea'});
  var btnStart = $('<button>',{id:'btnStart'}).text('start');
  var btnStop = $('<button>',{id:'btnStop'}).text('stop');
  var outout = $('<input>',{id:'output'});
  var status = $('<div>',{id:'status'}).text('.');
  var p1 = $('<p>',{id:'p'}).text('音声を文章に書き起こします。');
  var p2 = $('<p>',{id:'p'}).text('マイクをONにして、一文ずつ区切って、ゆっくりしゃべってください。');
  var p3 = $('<p>',{id:'p'}).text('※ サーバに通信・記録は行われません');
  btnStart.on('click', function(){
    if($(this).hasClass('clicked')){return;}
  	rec.start();
    btnStart.addClass('clicked');
    btnStop.removeClass('clicked');
  });
  btnStop.on('click', function(){
    if($(this).hasClass('clicked')){return;}
  	rec.stop();
    btnStop.addClass('clicked');
    btnStart.removeClass('clicked');
  });
  btnStart[0].click();
  $('#demo')
    .append(outout)
    .append(textarea)
    .append(btnStart)
    .append(btnStop)
    .append(status)
    .append(p1)
    .append(p2)
    .append(p3);

  window.onload = ()=>{
  	readyRecognition();
  }

  function readyRecognition(callback){

    rec.continuous = true;
    rec.interimResults = false;
    rec.lang = 'ja-JP';
  	rec.onresult = (e)=>{
      var $textarea = $('textarea')
      var v0 = $textarea.val() || '';
  		for(let result of e.results){
  			if(!result.isFinal) continue;
          console.log(result[0])
          var v1 = result[0].transcript || '';
          $textarea.val(v0+'\n'+v1);
          $('#output').val(v1);
          se.play();
          $textarea.scrollTop($textarea[0].scrollHeight - $textarea.height());
  		}
  	}
  	rec.onend = (e)=>{
      btnStop[0].click();
      btnStart[0].click();
  	}
  	rec.onsoundstart = (e)=>{
       $('#status').text('●').css({color:'#f00'});
  	}
  	rec.onsoundend = (e)=>{
       $('#status').text('□').css({color:'#00f'});
  	}
  	rec.onerror = (e)=>{
  	}
  	return rec;
  }

});
//まだまだ認識精度は甘い
//当然ながら固有名詞や専門用語は認識弱い
//同じ端末内からの音声は認識しない、たとえば動画を流しても無反応
//早口だと聞き取れないので、ゆっくりしゃべってね
//https://developer.mozilla.org/ja/docs/Web/API/SpeechRecognition

body{
  overflow:hidden;
}

textarea{
  font-size:16px;
  width:99%;
  height:80vh;
}
input{
  font-size:16px;
  width:99%;
}
button{
  font-size:32px;
  display:none;
}
button.clicked{
  opacity:0.5;
}
#demo{
  text-align:center;
}

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

view-source:https://hi0a.com/demo/-js/js-speech-recognition/