ずっと音声認識やりたくていろいろ試していました。
web speech apiの存在は知っていたけど、、javascriptが嫌だなぁと避けてましたが、、
やはり良さそうだと思ってちょっと頑張ってみました。
web_speech_api.html
<style>
body{
text-align: left;
font-size:40px;
-webkit-text-size-adjust:100%;
}
div.status{
color:gray;
font-size:30px;
-webkit-text-size-adjust:100%;
}
</style>
<body>
<div id="status-div" class=status></div>
<div id="result-div"></div>
</body>
<script>
let finalTranscript = '';
function SPEECH(){
const resultDiv = document.querySelector('#result-div');
const statusDiv = document.querySelector('#status-div');
SpeechRecognition = webkitSpeechRecognition || SpeechRecognition;
let recognition = new SpeechRecognition();
recognition.lang = 'ja-JP';
// recognition.interimResults = true;暫定的な結果はandroidだとうまく出来ませんでした
recognition.continuous = true;
recognition.start();
recognition.onaudiostart = function(){
statusDiv.innerHTML = "STATUS>>認識中";
};
recognition.onaudioend = function() {
statusDiv.innerHTML ="STATUS>>再読込完了";
SPEECH();
};
recognition.onnomatch = function() {
statusDiv.innerHTML="STATUS>> ";
};
recognition.error = function() {
statusDiv.innerHTML="エラー<br>ブラウザで更新してください";
};
recognition.onresult = (event) => {
let interimTranscript = ''; //暫定的な結果はandroidだとうまく出来ませんがなんとなく残してます
for (let i = event.resultIndex; i < event.results.length; i++) {
let transcript = event.results[i][0].transcript;
if (event.results[i].isFinal) {
finalTranscript = '>'+transcript+'<br>'+finalTranscript;
} else {
interimTranscript = transcript;//暫定的な結果はandroidだとうまく出来ませんがなんとなく残してます
}
}
resultDiv.innerHTML = finalTranscript;
}
}
window.onload =function(){
SPEECH();
};
</script>
連続で認識させたかったので、音声認識の部分を丸ごと関数にして、音が途切れて音声認識が終了したらまたその関数を呼び出す
みたいな感じにしてます。（注：httpsサーバーに置かないと、呼び出しの度にマイクの使用許可を確認してきます。。）
pythonのある環境でしたら、このファイルが置いてあるディレクトリで
python3 -m http.server 8080
でローカル環境で試すこと出来ます