宣誓しないと押せないボタン

気合いボタン

宣誓しないとボタンが有効化されない

SpeechRecognitionAPIで”宣誓”や”せんせい”と言っているか判定

宣誓できたらポップアップ表示&ボタン有効化

code:spirits.js

const spiritButton = document.getElementById("spiritButton");

const startButton = document.getElementById("startButton");

//気合い有無

let isSpirited = false;

//録音有無

let isRecording = false;

let recognition;

let timerId;

//spilitButtonをまず無効化する

spiritButton.setAttribute("disabled", "true");

startButton.addEventListener("click", () => {

startRec();

timerId = window.setTimeout(() => {

stopRec();

}, 2000);

});

// 録音の開始処理

function startRec() {

console.log("recording start!");

isRecording = true;

recognition.start();

}

// 録音の停止処理

function stopRec() {

console.log("recording stop!");

isRecording = false;

recognition.stop();

}

//音声で認識していく

// APIが使えるかどうかの判定（ここそんなに頑張らなくてもいいと思うので）

if (window.webkitSpeechRecognition) {

recognition = new window.webkitSpeechRecognition();

recognition.continuous = true;

recognition.onresult = ev => handleSpeechRecognition(ev); //record完了イベントを定義

} else {

// 対応してなかったら強制的に飛ばす

alert("このブラウザは非対応です。\n 最新のChromeでお試しください。");

}

// 音声認識が完了した時の処理

function handleSpeechRecognition(ev) {

console.log({ result });

if (result.includes("先生") || result.includes("宣誓")) {

console.log("気合が確認されました!");

alert("気合が確認されました!");

//ボタンを有効化するときdisabled属性そのものを削除する

spiritButton.removeAttribute("disabled");

} else {

alert("気合が足りません!");

//spilitButtonをまず無効化する

spiritButton.setAttribute("disabled", "true");

}

}