発生している問題
音声認識で取得したテキストをinputにvalueで送信して、oninputでイベントを発火させたいのですが、プログラムからの入力では発火しないようです。
実現したいこと
音声認識で取得したテキストをもとに、oninputなどで入力が終わった瞬間から一定時間が経つと入力完了と判断するというイベントを発火させたいと思っています。
問題のコード
<p class="recognize-text">ぼく、ドラ○もん</p>
<button id="recognize">音声認識開始</button>
<div id="endMsg">入力完了と判定しました<br>入力:</div>
<input type="text" id="myobj" value="">
<script>
const textDisplay = document.querySelector('.recognize-text');
try {
// 音声認識
const recognition = new webkitSpeechRecognition();
recognition.lang = 'ja-JP';
recognition.continuous = true;
recognition.interimResults = true;
// 認識スタート
recognition.onstart = (e)=>{
textDisplay.textContent = "認識中";
textDisplay.style.color = "#aaa"
}
// 認識終了
recognition.onresult = (e)=>{
const str = e.results[0][0].transcript;
textDisplay.textContent = str;
document.getElementById("myobj").value = str;
}
document.querySelector('#recognize').onclick = (e)=>{
recognition.start();
}
recognition.onend = function() {
console.log('Speech recognition service disconnected');
}
} catch (error) {
console.log(error);
}
var myobj = document.getElementById("myobj");
var gTimer;
myobj.oninput = () => {
// =========================================================
// 入力の度に実行される
// 入力完了までタイマーで実行待ちする
// タイマーまでに次の入力があると、再度タイマー設定
// =========================================================
var wObj = document.getElementById("endMsg");
wObj.innerHTML = '入力中です';
// =============================================
// 一定時間を待って入力完了と判断
// =============================================
if(gTimer){clearTimeout(gTimer);}
gTimer = setTimeout(inputEnd, 700);
}
function inputEnd(){
var wObj = document.getElementById("endMsg");
wObj.innerHTML = '入力完了と判定しました<br>入力:'+document.getElementById("myobj").value;
wObj.className = 'defStyle endStyle';
}
</script>