Notes on Day 20 of 30 Days of JavaScript

• notes • series • javascript • javascript30 • speech-recognition

Table of Contents

Lessons Learned

SpeechRecognition

This interface, a part of the Web Speech API, is the controller interface for the recognition service.

Some of its properties are the following:

  • SpeechRecognition.lang - sets the language of the current SpeechRecognition instance.
  • SpeechRecognition.interimResults - accepts boolean values and controls whether interim results should be returned based on the setting.
  • SpeechRecognition.continuous - controls whether continuous results are returned for each recognition, or only a single result.
const speechRecognition = new SpeechRecognition();
speechRecognition.lang = 'en-US';
speechRecognition.interimResults = true;
speechRecognition.continuous = false;

SpeechRecognitionEvent.results

This interface returns a SpeechRecognitionResultList object representing all the speech recognition results for the current session.

speechRecognition.addEventListener('results', event => {
  const transcript = Array.from(event.results)
    .map(result => result[0])
    .map(result => result.transcript)
    .join('');

  document.getElementById('transcript').textContent(transcript)
});

Node.textContent

The textContent property of the Node interface represents the text content of the node and its descendants.

<div>
  <h3>Section title</h3>
  <p>Section <strong>description</strong></p>
</div>

Accessing its content returns a string or otherwise null.

console.log(document.querySelector('div').textContent)
> " 
    Section title
   Section description
  "

The content can also be set through assignment:

document.querySelector('div').textContent = "Hello World";

<div class"container">Hello World</div>

textContent is different from innerHTML. Please refer to this page for some important differences.

References

Twitter, LinkedIn