I am making buttons that when clicked, a script performs speech recognition on the user's speech. There are multiple click buttons, one for each sentence. The buttons occur in pairs: one button is to be clicked and will start the speech recognition. The other button that's next to it shows the score.
I got the basic script from Glen Shires (Introduction to Web Speech API) and am trying to adapt it for my own needs. I got so far up to the point where I got the score to show in a designated button.
However, I would like to show the score in the button that's next to the one that's clicked.
I am trying to make one javascript script that works for all the buttons.
I tried putting: el.previousElementSibling.innerHTML in the onresult part, but it doesn't work.
What method can I use?
This is the HTML:
<div class="container-fluid m-1 p-2">
<button id="score_button" type="button" class="btn mr-3 btn-info" style="height:50px; width:200px;"></button>
<button id="start_button" onclick="startButton(this)" type="button" class="fas fa-microphone" style="color: orange; font-size:50px; text-decoration:none;"></button>
</div>
<div class="container-fluid m-1 p-2">
<button id="score_button2" type="button" class="btn mr-3 btn-primary" style="height:50px; width:200px;"></button>
<button id="start_button2" onclick="startButton(this)" type="button" class="fas fa-microphone" style="color: lime; font-size:50px; text-decoration:none;"></button>
</div>
<div class="container-fluid m-1 p-2 bg-warning">
<p><strong>Here is the transcript: </strong></p>
<div>
<span id="final_span" class="final_span"></span>
<span id="interim_span" class="interim"></span>
</div>
</div>
This is the JavaScript script:
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
var x = new SpeechRecognition();
x.continuous = true;
x.lang = 'en-US';
x.interimResults = true;
x.maxAlternatives = 1;
var ignore_onend;
var start_timestamp;
var recognizing = false;
var final_transcript = '';
x.onstart = function(){
recognizing = true;
event.setAttribute("class", "fas fa-stop-circle");
};
x.onend = function(){
recognizing = false;
if (ignore_onend) {
return;
}
el.setAttribute("class", "fas fa-microphone");
if (!final_transcript) {
return;
}
};
x.onresult = function() {
var interim_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
} else {
interim_transcript += event.results[i][0].transcript;
}
}
final_span.innerHTML = final_transcript;
interim_span.innerHTML = interim_transcript;
document.getElementById("score_button").innerHTML = stringSimilarity.compareTwoStrings(final_transcript, "why");
//el.previousElementSibling.innerHTML = stringSimilarity.compareTwoStrings(final_transcript, "why");
};
function startButton(el){
if (recognizing) {
x.stop();
el.setAttribute("class", "fas fa-microphone");
return;
}
final_transcript = '';
x.start();
ignore_onend = false;
el.setAttribute("class", "fas fa-stop-circle");
start_timestamp = event.timeStamp;
};
I made another script. With this one, I wrapped the whole script in curly braces and called it "function startButton", and it worked well too. I was even able to show the score in the right button, such as Score Button No.1 if Button No.1 was clicked, and Score Button No.2 if Button No.2 was clicked. The only problem is now the speech recognition won't stop even after I click the stop button. The only thing that stops the speech recognition is if I refresh the page. I can tell that it is still recognizing because the transcript keeps showing up in the transcript window below and there is a recording favicon showing in the title tab of the browser. Here is the second script. I wasn't sure whether to ask this in a whole new question or add it to the current one.
function startButton(el){
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
var x = new SpeechRecognition();
x.continuous = true;
x.lang = 'en-US';
x.interimResults = true;
x.maxAlternatives = 1;
var ignore_onend;
let listening = false;
var final_transcript = '';
var z = el.getAttribute("class");
if (z ==="fas fa-stop-circle") {
x.stop();
el.setAttribute("class", "fas fa-microphone");
listening = false;
return;
} else {
x.start();
final_transcript = '';
ignore_onend = false;
listening = true;
el.setAttribute("class", "fas fa-stop-circle");
start_timestamp = event.timeStamp;
};
x.onstart = function(){
listening = true;
};
x.onend = function(){
listening = false;
if (ignore_onend) {
return;
}
if (!final_transcript) {
return;
}
};
x.onresult = function() {
var interim_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
} else {
interim_transcript += event.results[i][0].transcript;
}
}
final_span.innerHTML = final_transcript;
interim_span.innerHTML = interim_transcript;
el.previousElementSibling.innerHTML = stringSimilarity.compareTwoStrings(final_transcript, "what are you doing");
};
};
