JavaScript 30- Day 20 Study Notes
Day 20 of JavaScript 30 by Wes Bos used the speech recognition feature in the browser to make a simple transcription app. It surprised me that an additional library or API was not needed to do this. And now that I have an add-on webcam with a microphone, I completed this project without equipment issues.
To do this project, we needed a local server set up. Bos provided a package.json file with a “browser-sync” dependency that allowed us to do this. It was simple to type, “npm start” on the terminal and it worked without issue.
Some of the syntax and logic were new to me but pretty straightforward.
First, we had to access the speech recognition feature.
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;const recognition = new SpeechRecognition();recognition.interimResults = true;
Next, we added an event listener, placed the results into an array.
recognition.addEventListener('result', e =>{ const transcript = Array.from(e.results) .map(result => result[0]) .map(result => result.transcript) .join('')
Now, we had to create a paragraph element on HTML, and add the results to the text content.
p.textContent = transcript;if(e.results[0].isFinal){ p = document.createElement('p'); words.appendChild(p);
Apparently, you can access different languages using the speech recognition feature. Perhaps a foreign language learning app can be made.
Follow my study notes as I progress through JavaScript 30.
