はじめに
WebVRの研究中に音声認識をやりたくなって調べてみたら面白そうだったので試してみた
SpeechRecognition
概要
- HTML5に備わってるAPI (Mozilla作)
- 音ブラウザで音声を認識してくれる
準備
なし
使用方法
new SpeechRecognition()した後に設定値を入れて、
(※ chromeでは "webkit" プレフィックスを付けないといけないのでwebkitSpeechRecognition()になる)start()で認識開始onresult()で音声取得結果がわかるstop()で終了
音声認識を動かしてみる
仕様
- startボタンを押下 → 音声認識開始
- 話す → ログに音声認識結果を出す
- stopボタン押下 → 音声認識終了
ソースコード
speakTest.html
<!DOCTYPE html>
<html>
<head lang="ja-JP">
<meta charset="utf-8">
<title>Speak Test</title>
</head>
<body>
<button onclick="startbutton()">start</button>
<button onclick="stopbutton()">stop</button>
<script>
const SpeechRecognition = webkitSpeechRecognition || SpeechRecognition;
const rec = new SpeechRecognition();
rec.continuous = true;
rec.interimResults = false;
rec.lang = "ja-JP" // "en-US"なら英語で認識してくれる。指定がないとブラウザの言語になる
rec.onresult = function (e) {
console.log("on result")
for (var i = e.resultIndex; i < e.results.length; ++i) {
if (e.results[i].isFinal) {
const str = e.results[i][0].transcript;
console.log('Your speaking: ' + str);
}
}
}
function startbutton() {
console.log("start")
rec.start();
}
function stopbutton() {
console.log("stop")
rec.stop();
}
</script>
</body>
</html>
結果
うまくいきました
