DEV Community: PrakharV10

Getting Started with Speech Recognition in JS

PrakharV10 — Tue, 08 Dec 2020 18:44:28 +0000

Skip if you don't like Intros -

From Google Assistant to Apple's Siri, from Amazon's Alexa to Microsoft's Cortana, everywhere voice recognition is being used. Be it for searching something, or asking some questions, everyone enjoys a Hands-Free experience!!

Did you know, even our websites can be integrated with Speech Recognition system? Just by using some commands, we can operate our websites, Change themes and even get Text to Voice Output.

In this tutorial, we will walkthrough the process for setting up Speech Recognition using Web Speech API in JavaScript.

Now without further much wait, let's get started -

Prerequisites -

IDE installed for JavaScript/ You can also use Repl.it as an online IDE.
Basic knowledge of JavaScript. (Refer my previous blog for an overview of JavaScript.
And as always, The enthusiasm to learn!

Understanding Web Speech API -

As the name suggests Web Speech is basically an API for handling voice/texts commands.

It has 2 parts:

Speech Recognition (Voice to text)
Speech Synthesis (Text to Speech)

Note - The API is not compatible with all the browsers. The compatibility chart is given below.

Compatibility for Speech Recognition -

Compatibility for Speech Synthesis -

Setting up -

First of all, we start by setting the recognition interface to Speech Recognition :

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();

Function for firing the Speech Recognition -

Now, we define the function for starting the Speech Recognition-

recognition.onstart = function(){
    console.log("The Recognition has fired, start speaking!");
}

Note - The concole.log command will print the specified statement in the console(Can be seen by Inspect page or Ctrl + Shift + I)

Function to handle the result of Recognition -

After we are done speaking, The onresult event handler returns a SpeechRecognitionEvent with a property results which is a two-dimensional array. To use these results we define a recognition.onresult function, as shown below -

recognition.onresult = function(event){
    var transcript = event.results[0][0].transcript; 
    document.querySelector("#OutputBox").textContent = transcript;

recognition.start();

The event.results matrix returned, contains the converted Speech as its 1st object named transcript.

By the help of querySelector, We are able to get the ID of an element present in our HTML code and we can print the results in that element, so as to show it on the user's screen.

The recognition.start() is used to start the recognition.

Finishing up-

The Speech recognition with just Speech-to-Text may seem a bit less useful, but integrating it with other ideas can make User Experience, a lot better.
For example, It can used to

Fill forms, without actually typing each and every details.
Change Themes by just using the specified keyword.
Copy and Paste texts from One part of website to another.

What's Next?

If you have followed this article till here, I'm sure you were able to integrate the Speech Recognition successfully.

If you liked the article and found it to be of a little use to you, award me with a Unicorn 🦄.

Also, Stay tuned for more tutorials, as in the next one I'll be integrating Speech Recognition for making an Awesome Web Application!

Sources -

MDN web docs

Building A F.R.I.E.N.D.S Quiz Using JavaScript

PrakharV10 — Fri, 27 Nov 2020 17:25:24 +0000

In this tutorial, we will learn to create our first ever project : Creating a Quiz using only JavaScript with Repl.it

Without further wait, Let us begin :

Prerequisites :-

Create an account on Repl.it.
Ready the Questions of your quiz, the options and the correct answer of the questions.
Make a Blueprint, involving the marking schemes and the structures of levels to be included. (optional)

Understanding Repl -

A "Repl" at Repl.it is an interactive programming environment. We can create a workspace in most popular programming languages, where we are given a container on a virtual machine where our code can run. It allows us to write code and build apps and websites using a browser. Additionally, We can also share projects through various ways.

Importing Packages

This is our one the most essential commands, for creation of our projects. We import packages - readline-sync and chalk.

readline-sync - Allows our console to have a 'conversation' with the users. Basically, We use it to take input from users. The Input can be of any data-type eg- String, integer etc.
chalk package is used for the beautification of our project. By the help of chalk we can introduce various text-colors, background-colors and styles to our text.

We import these packages by using command -

var readline = require('readline-sync');
var chalk = require('chalk');

Taking Input from the user -

Next, we take Username as Input from our user, in order to display their name and make the Quiz more interactive.
We input username by using the readline-sync package and Display it(with enhancing their colors a bit by the chalk package) we installed in the previous step, as shown below -

var Username = myVar.question(chalk.red("Hi! What is your name?\n"));
console.log(chalk.cyanBright("Welcome " + Username));

Note - console.log() is used to print output to the console.

Introducing the Question Bank -

Now, we define a variable named questionBank which includes various JavaScript objects, in which our questions and answers would be included.

An Object is a collection of properties, and a property is an association between a name (or key) and a value.

Below is an example, which shows the initialization of various Questions and Answers, to be asked in the quiz -

var questionBank = [{
  question : "Which of the actors on Friends unfortunately decides 
to whiten his teeth\n before going out on a first date with a girl\n
he's had a crush on for some time?\n",
  answer : "Ross"
},
{
  question : "Who was Ross's second wife?\n",
  answer : "Emily"
},
{
  question : "Who is Gunther's roommate?\n",
  answer : "Jasmine"
}]

Note - Here '\n' is used to change line, that will be shown on the user's screen.

Defining a Function, to check user-provided Answer to the Actual Answer -

To define a function, we use the keyword function, followed by the name of the functions, followed by the parameters to be passed in it.
For eg- Here we define a function named 'checkAnswer', and we pass the question and answer from questionBank as its parameters.
We output the respective question to the user and check their answer to our pre-defined answer.

function checkAnswer(question , answer){
  var userAnswer = myVar.question(chalk.cyanBright(question));
    if(userAnswer == answer){
    console.log(chalk.green("Correct."));
    score ++;
    }

    else{
    console.log(chalk.red("Wrong."));
    }
}

A loop to access all the questions of `questionBank` -

Now, we run a for loop, in order to access every object of the questionBank and then use function checkAnswer() to check the user's answers.
Additionally, we introduce a variable score, which can keep a check on the total score of the user.

var score = 0;
for(var i = 0; i<questionBank.length; i++){
    current = questionBank[i];
    checkAnswer(current.question,current.answer);
  }
  console.log(chalk.yellowBright("Total = " + score + " out of " 
+ questionBank.length));

Note -questionBank.length is used to get the number of objects present in the questionBank list, we defined earlier.

Our quiz is now complete! Press the Run command to play the quiz by yourself.

Sharing the Quiz with your Friends -

Add ?embed=1&output=1 in the URL of your project to share the Quiz. For eg-
Initial URL - https://repl.it/@your-username/Project-name
URL to share - https://repl.it/@your-username/Project-name?embed=1&output=1

What's Next?

If you have followed this article till here, I'm sure you were able to create the Quiz successfully. If you faced any difficulties, you can always refer to my code.
Also if you want to play my version of the Quiz, you can do it here.

If you liked this tutorial, share it with your friends and help them learn!

Also! Stay tuned for more of these informative tutorials. :)

DEV Community: PrakharV10

Getting Started with Speech Recognition in JS

Skip if you don't like Intros -

Prerequisites -

Understanding Web Speech API -

Setting up -

Function for firing the Speech Recognition -

Function to handle the result of Recognition -

Finishing up-

What's Next?

Sources -

Building A F.R.I.E.N.D.S Quiz Using JavaScript

Prerequisites :-

Understanding Repl -

Importing Packages

Taking Input from the user -

Introducing the Question Bank -

Defining a Function, to check user-provided Answer to the Actual Answer -

A loop to access all the questions of questionBank -

Sharing the Quiz with your Friends -

What's Next?

A loop to access all the questions of `questionBank` -