How to make a simple JavaScript chatbot using the Web Speech API
In 2019, chatbots are very serious business. We are no longer living in the era of smarterchild where chatbots were little more than novelty.
Nowadays, demand for chatbots, especially those using sophisticated natural language processing and artificial intelligence, is incredibly high. Large companies have invested huge sums of money into developing technologies for text sentiment analysis, as well as general conversational bots to help lead customers in the right direction when dealing with trouble shooting. Before diving into making our own simple bot, let’s first go over some background.
Text sentiment analysis is one of the key attributes in modern chatbots. This allows the program to detect the general meaning of a piece of text in order to classify it. This has extremely wide potential applications, but most notably is used for customer service. Angry customers are difficult to deal with, and companies often want to be able to focus on these customers in order to prevent churn. Rather than having to employ call centers all over the world, companies can scale down and use sentiment analysis to increase efficiency and make more with less.
Another very important aspect to chatbots is natural language processing. NLP is used to help computers detect speech in more natural ways. It allows the program to come off as less robotic and more human, as well as more accurately detect speech. Humans are very imperfect creatures, and with the innumerable amounts of dialects within a single language it would be nearly impossible for a computer to understand them all. This is where NLP comes in.
The types of chatbots I described are incredibly complicated and are still a work in progress, but I believe the best way of understanding how something so complex works is to first start with the basics.
For our application, the basic structure is to receive input, classify the input or look for keywords, then give the intended output. I’ve built a simple version of this below, and in this post I’ll walk you through the steps of how to make some small talk with the bot and even have it check the weather for you using a free weather API.
First, write up a simple HTML file and style it however you want. It isn’t even necessary to add anything at first, as long as you include some sort of button to start the process.
Now, create an index.js file and define the variables used for speech synthesis:
Build better voice apps. Get more articles & interviews from voice technology experts at voicetechpodcast.com
Now that we have declared an instance for SpeechRecognition, we can create a few arrays with sample responses and a function to start the speech recognition part when the user gives permission to access their microphone:
This will listen to the words spoken through the microphone, and call the function that we will be declaring in order to read back the responses. The responses simply take an option at random from the arrays we declared and outputs it in synthesized speech.
Finally, we have declared the function that will respond to the user based on what they say. After the basic greetings, if it hears the user ask it to check the weather it will run the function checkWeather() with the users city (in this example I used my city as default in order to simplify things). Now for the final function:
Open Weather Map has an excellent free weather API. All that it requires is that you sign up for a free account, and they will issue you a private key. Once you add the key into your fetch request you will get back clean JSON data with quite detailed weather information on the given city. We must convert the temperature into Fahrenheit from Kelvin, then simply push whatever information you want included in the response into the weather array we made before. That’s it, you’re all set!
This is a very simplified example of how a chatbot/speech app is made, but even so, it’s much more simple than many think. It surprised me at how straightforward it was and it’s a great way to practice your JavaScript. I hope this will be of help to some of you. Happy coding.
