Skip to content

Instantly share code, notes, and snippets.

@shimizu
Last active May 21, 2020 00:06
Show Gist options
  • Save shimizu/7b3b7043c2941028a1a82fc9e6eccbfd to your computer and use it in GitHub Desktop.
Save shimizu/7b3b7043c2941028a1a82fc9e6eccbfd to your computer and use it in GitHub Desktop.
Web Speech APIによる音声入力
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment