In this tutorial, we will create a virtual assistant (like Siri or Google assistant) in the browser with just 80 lines of javascript code. The app can be tested out here, in which it will listen to the users’ voice commands and reply with a synthetic voice.
What you need:
- Google Chrome (25+)
- A text editor
As the Web Speech API is still experimental, the app works only in supported browsers (Chrome 25+ and Edge 79+).
What components do we need to build?
To build this web app, we need to implement four components:
1. A Simple UI to display what users speak and what the assistant responses.
2. Convert speech to text.
3. Process the text and perform the action.
4. Convert text to speech.
UI
The first step is to create a simple UI, it contains a button to trigger the assistant, a div to display what users command and assistant’s responses, a p component to display the processing information.
const startBtn = document.createElement("button");
startBtn.innerHTML = "Start listening";
const result = document.createElement("div");
const processing = document.createElement("p");
document.write("<body><h1>My Siri</h1><p>Give it a try with 'hello', 'how are you', 'what's your name', 'what time is it', 'stop', ... </p></body>");
document.body.append(startBtn);
document.body.append(result);
document.body.append(processing);
#machine-learning #javascript #data-science #ai #web-development #programming
