Ετικέτα: css

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.

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.

 

Our App for Taking Notes Using Voice Input.

 

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.

The HTML and CSS are pretty standard so we are going to skip them and go straight to the JavaScript. To view the full source code go to the Download button near the top of the page.