Web Speech APIによる音声入力 by shimizu

Web Speech APIを使うことで、ブラウザの音声入力機能を利用することができます。 (Chrome以外は試していないのでChrome推奨です)

画面をクリックすると音声入力が開始されます。開いているタブに赤い丸が表示されれば音声入力機能がONになっています。

キーボードで「,」を入力すると読点を、「.」を入力すると句点+改行を文章に追加することができます。句読点の入力にはコツがいります。例えば、「これは、パンです」と句読点を入れたい場合、

“これは(「,」キー入力後少し待つ)パンです”

とウエイトを入れて喋る必要があります。

index.js

var box = document.querySelector("#box");
var prevText = "";
var Recflag = false;
var speechInputFlag = false;
var punctuation = ""

//Web Speech APIが使えるかチェック
if (!('webkitSpeechRecognition' in window)) {
    alert("このブラウザでは音声入力識機能を使用できません。");
  } else {
    var rec = new webkitSpeechRecognition();
    rec.continuous = true;
    rec.interimResults = true;
    rec.onresult = function(event) {
      speechInputFlag = true;
      var interim_transcript = ''; //入力中の文字列
      var final_transcript = '';  //最終的に確定した文字列
      
      for (var i = event.resultIndex; i < event.results.length; ++i) {
        if (event.results[i].isFinal) {
          final_transcript += event.results[i][0].transcript + punctuation;
        } else {
          interim_transcript += event.results[i][0].transcript + punctuation;
        }
      }
      box.innerText = prevText + interim_transcript;
      if(final_transcript) {
        prevText += final_transcript; 
        box.innerText = prevText;   
        punctuation = "";   
      }
  }
};

//音声入力を開始
function startRec() {
  if(Recflag) return;
  rec.lang =  "ja-JP";
  rec.start();

  rec.onstart = () => { 
    console.log("音声認識を開始しました。")
    Recflag = true 
  };
}

//喋らないとすぐ終了してしまうので、ループさせる。
rec.onend = () => { 
  console.log("音声認識を終了しました。");
  Recflag = false;
  startRec();
};

//クリックしたら開始するように設定
box.addEventListener("click", startRec);

//おまけ、キーボードで句読点を入力できるようにした(しゃべっている間は無効)
document.addEventListener('keydown', (event) => {
  const keyName = event.key;

  if (keyName === ',') {
    punctuation += "、";
    return;
  }
  if (keyName === '.') {
    punctuation += "。\n";
    return;
  }

}, false);

index.html

<!DOCTYPE html>
<html lang="jp">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="theme-color" content="#000000">

	<style>
		html, body{
			width: 100%;
			height: 100%;
			margin: 0;
      background-color:black;
		}
		#box {
			width: 99%;
			height: 99%;
			font-size:2em;
     color:white;
		}
	</style>

</head>

<body>
    <div id="box">画面をクリックすると、音声入力を開始します。</div>
</body>
<script src="index.js"></script>
</html>