発生している問題
音声認識のプログラムを書いています。終了ボタンを押しことで音声認識プログラムを終了させたいのですが、
音声認識が終了するたびに再スタートするループがあり、プログラムを終了することができません。
実現したいこと
音声認識終了を押したらプログラムが終了?初期化するようにしたいと考えています。
問題のコード
<body>
<h1>音声認識</h1>
<div id="japanese"></div>
<p class="recognize-text">認識結果が表示されます</p>
<button id="recognize">音声認識開始</button>
<button id="recognize-end">音声認識終了</button>
<div id="endMsg">入力完了と判定しました<br>入力:</div>
<script>
const textDisplay = document.querySelector('.recognize-text');
try {
// 音声認識
window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
const recognition = new webkitSpeechRecognition();
recognition.lang = 'ja-JP';
recognition.continuous = false;
recognition.interimResults = false;
var reset = recognition.onend;
// 認識スタート
recognition.onstart = (e)=>{
textDisplay.textContent = "認識中";
textDisplay.style.color = "#aaa"
console.log('Speech recognition service started')
}
// 認識終了
recognition.onresult = (e)=> {
const str = e.results[0][0].transcript;
textDisplay.textContent = str;
if(e.results[0].isFinal){
console.log(str);
document.getElementById("myobj").value = str;
document.getElementById("myobj").dispatchEvent(new Event('input'));
}
}
// スタートボタン
document.querySelector('#recognize').onclick = (e)=>{
recognition.start();
}
// リセットループ
recognition.onend = (e)=> {
console.log('reset')
textDisplay.textContent = "認識完了";
textDisplay.style.color = "#aaa"
recognition.start();
}
終了ボタン
document.getElementById('recognize-end').onclick = (e)=>{
document.getElementById("myobj").value = ""
recognition.end();
}
recognition.onerror = function(event) {
console.log('音声認識エラーが検出されました:' + event.error);
}
} catch (error) {
console.log(error);
}
</script>
<input type="text" id="myobj" value="">
<script>
var myobj = document.getElementById("myobj");
myobj.oninput = myfunc;
var gTimer;
function myfunc() {
// =========================================================
// 入力の度に実行される
// 入力完了までタイマーで実行待ちする
// タイマーまでに次の入力があると、再度タイマー設定
// =========================================================
// --- サンプル用 メッセージ出力 -------------------
var wObj = document.getElementById("endMsg");
wObj.innerHTML = '入力中です';
wObj.className = 'defStyle runStyle';
// =============================================
// 一定時間を待って入力完了と判断
// =============================================
if(gTimer){clearTimeout(gTimer);}
gTimer = setTimeout(inputEnd, 800);
}
function inputEnd(){
// =========================================================
// タイマー時間経過で入力完了と判断
// =========================================================
// サンプル用の処理です。入れ替えて利用ください
// 入力完了後のメッセージ入れ替え
var wObj = document.getElementById("endMsg");
wObj.innerHTML = '入力完了と判定しました<br>入力:'+document.getElementById("myobj").value;
wObj.className = 'defStyle endStyle';
}
</script>
</body>