WEB SPEECH API GOOGLE CHROME UPDATE

Making it smileįor our last step, we will update our index.html to display an area where we can show the emoji. While we can select other languages in the Web Speech API we would have to find a scored list similar to AFINN in our desired language to make the matching work. Now that we have the score returned, we just have to make it show in our browser. Package.json will end up looking something like this: What we want is the score property which in this case would lead to a positive result nodemon - so we don't constantly type node server.js whenever we make a change in our server.js file.expressjs - to have an HTTP server quickly running.

WEB SPEECH API GOOGLE CHROME INSTALL

On our folder, we will run npm run init which will create package.json.įor now, we will need to install two packages to make our life easier. Web Speech API section code will be added here The recognition.js file will be wrapped in the DOMContentLoaded event so we make sure that the page has loaded before executing our JS: document.addEventListener('DOMContentLoaded', speechToEmotion, false) On the front end side of things, our index.html file will include the JS and CSS: |-css // optional folder, we have only one obvious file |-public // folder with the content that we will feed to the browser Our project folder and files structure will be as follows: src/ Note: If you're familiar with project setup you can mostly skip the 'project files and setup' section below.

The browser shows a different emoji depending on the score.

The server evaluates the text using AFINN's list and returns the score.

It makes a request to our Node.js server with the text.

The browser listens to the user and returns some text using the Web Speech API.

Now that we know what we're going to use, we can sum it up: Since we're already using the browser we can show a different emoji with HTML, JavaScript and CSS depending on the result.

It has a limited scope with 'only' 2477 words but it's more than enough for our project.

It has exactly what we need in the SpeechRecognition interface.Īs for text scoring, I found AFINN which is a list of words that are already scored.

A way to show the result to the user that just spokeĪfter researching for a while, I discovered that the voice recording and translation to text parts were already done by the Web Speech API that's available in Google Chrome.

A way to translate the recording to text.

Before starting my search I noted down that I needed:

WEB SPEECH API GOOGLE CHROME HOW TO

When you're starting a project, you should sketch out - at least vaguely - your goal and how to reach it. The plan Voice detection -> Voice to text -> Text scoring -> Result That got me wondering how could I build a simplified version using the browser and Node.js that would be initiated by speaking.Īs a result, I ended up with a small project that detects if what was spoken has positive, neutral, or negative valence. The program can check what we write and then tells us if it might be seen as aggressive, confident, or a variety of other feelings. I got a newsletter which discussed tone detection. Have you ever wondered - can we make Node.js check to see if what we say is positive or negative?

Web speech api google chrome