A chatbot is a piece of software that simulates a conversation via auditory or textual methods in applications, on websites, in mobile apps, or through the telephone line. For businesses, chatbots open up a world of scaling customer service and help customers leave feedback, schedule appointments, or order products quicker.

I will show you how to join the chatbot revolution in only 10 minutes, making use of SpeechRecognition and SpeechSynthesis to build a small JavaScript-based chatbot.

The Web Speech API enables us to incorporate voice functionality easily into web applications. First, we are setting up a basic index.html with only a few elements.

We are creating one hyperlink tag with class=”talk” (line 7). If this is clicked, the voice will be activated later on. A button can be used alternatively.

We are creating a paragraph tag with class=”voice2text” (line 8). Whatever we speak to the microphone will be printed as text here later.

We are referencing to our JavaScript file app.js (line 10).

Now let’s have a look at the JavaScript part.

First, we query our two HTML elements talk and voice2text, and assign them to equally named variables (lines 1+2).

We are setting up the recognition interface to SpeechRecognition independent of the browser (line 4) and instantiating the speech recognition interface and assign it to const recorder (line 5).

(line 5). Adding an EventListener allows us to start the SpeechRecognition on click of our <a> tag (with class talk)(lines 15–17).

The onstart property represents an event handler that runs when the speech recognition service has started listening to incoming audio. In this case, we just print out that the voice is activated (lines 7–9).

The onresult interface represents an event handler that runs when the speech recognition service returns a result. We start with printing the result to the console (lines 11–13). Let’s have a look at the result.

Whatever we speak into the microphone is being logged in the event of the onresult interface. We can get it out of the path event.results.resultIndex.[0].transcript and can do something with it, e.g. printing it on the webpage. We just need to slightly adapt the onresult interface.