n this tutorial we are going to experiment with the Web Speech API. It’s a very powerful browser interface that allows you to record human speech and convert it into text. We will also use it to do the opposite – reading out strings in a human-like voice.

Let’s jump right in!

The App

To showcase the ability of the API we are going to build a simple voice-powered note app. It does 3 things:

  • Takes notes by using voice-to-text or traditional keyboard input.
  • Saves notes to localStorage.
  • Shows all notes and gives the option to listen to them via Speech Synthesis.
shares