| license: mit |
Web Speech APIを使うことで、ブラウザの音声入力機能を利用することができます。 (Chrome以外は試していないのでChrome推奨です)
画面をクリックすると音声入力が開始されます。 開いているタブに赤い丸が表示されれば音声入力機能がONになっています。
キーボードで「,」を入力すると読点を、「.」を入力すると句点+改行を文章に追加することができます。 句読点の入力にはコツがいります。 例えば、「これは、パンです」と句読点を入れたい場合、
"これは(「,」キー入力後少し待つ)パンです"
とウエイトを入れて喋る必要があります。
Built with blockbuilder.org
| <!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> |
| 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); | |