In 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.
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.
We won’t be using any fancy dependencies, just good old jQuery for easier DOM operations and Shoelace for CSS styles. We are going to include them directly via CDN, no need to get NPM involved for such a tiny project.