</div>
<div id=”log”>Click to start speaking</div>
</div>7 .Add Javascript
Nowadd the script tags before the closing body tag.
Thisis where all of the JavaScript will go. The first two
linesgrab the page elements with the matching ID
andstore them in a variable. The transcription is the
textresult of the speech. The log will update the user
withhow to use. it<script>
var transcription = document.getElementById
(‘transcription’);
var log = document.getElementById(‘log’);
</script>8 .Variable results
Usingthe next few variables, more interface elements
arecached into them. The speech button will become
a toggle, letting users switch speech on and off.,
monitored by a Boolean, true/false variable. The clear-all
button will delete unsatisfactory speech results.Builda voicecontrolled UI
var start = document.getElementById
(‘speechButton’);
var clear = document.getElementById
(‘clear-all’);
var speaking = false;9. Is it supported?
The first thing our code will do is find out if this speech
feature is supported by the user’s browser. If this result
comes back as null then the if statement throws up the
hidden message, while simultaneously taking the start
button away from the interface to stop the speech input.window.SpeechRecognition = window.
SpeechRecognition ||
window.webkitSpeechRecognition ||
null;
if (window.SpeechRecognition === null){
document.getElementById(‘unsupported’).
classList.remove(‘hidden’);
start.classList.add(‘hidden’);
} else {10. Start the recognition
The speech recognition is started as the ‘else’ for the
speech recognition being available. The continuous
input is started as that is the default on the radio
buttons. The ‘onresult’ function will handle the results
of the speech input. This will be added into the
transcription’s text field.var recognizer = new window.Keep the
user informed
Asusers are not familiar with text input, make sure
youkeep users informed on the screen with
instructions for usage.
Tutorials
SpeechRecognition();
recognizer.continuous = true;
recognizer.onresult = function(event) {
transcription.textContent= ‘’;
for (vari = event.resultIndex;i < event.
results.length; i++) {11. Final or interim?
The if statement now checks to see if the user wants
to display the text as they are talking (interim) or only
after they finish speaking (final). You will notice that if
it’s interim, each word gets added to the text with the
‘+=’, while the final just dumps the whole text in there.if (event.results[i].isFinal) {
transcription.textContent = event.
results[i][0].transcript;
} else {
transcription.textContent += event.
results[i][0].transcript;
}
}
};12. Handling errors
As with most JavaScript APIs there is an error handler
that will allow you to decide what to do with any issues
that might arise. These are thrown into the ‘log’ div to
give feedback to the user, as it is essential that they are
aware of what might be going on with the interface.recognizer.onerror = function(event) {658 tttttttttttttttttttttttttttttttttttttttttttttttttttutorial