How to Build A Smart Calculator with Voice input

How to Build A Smart Calculator with Voice input

In this tutorial, we will learn how to build a smart calculator with voice input. This tutorial focuses on speech recognition API in javascript. Using Speech recognition API, we'll get the audio input for the calculator.

how to build a smart calculator with voice input

This tutorial focuses on speech recognition API in javascript. Using Speech recognition API, we'll get the audio input for the calculator. Then we manipute the voice input that we've got. Additionally, we'll learn how to create a bubble effect in CSS & also we'll learn to create a tooltip.

The link to the final output: https://github.com/abarna-codespot/calculator-with-voice-input

The link to the code for basic calculator: https://github.com/abarna-codespot/A-simple-Calculator

The tutorial for the basic calculator: https://www.youtube.com/watch?v=CI2GwL--ll8&t=760s

A summary of the above tutorial:

Steps for speech recognition:

  1. For recording, use The SpeechRecognition interface of the Web Speech API.
  2. Create a new SpeechRecognition object instance using the SpeechRecognition() constructor
  3. Start() of SpeechRecognition will Start the speech recognition service, listening to incoming audio.
  4. The onresult event handler will b Fired when the speech recognition service returns a result, as in it fires when the user stoped speaking.
  5. Finally, get the transcript of the speech recognition.

Steps to manipulate the voice input:

  1. Set the voice input to the output section of the calculator & after 2s the output section will be overridden by the result.
  2. Define a function called evaluate for the above funationality.
  3. Call the evaluate() after 2s using setInterval method in Javascript.
  4. Now, put our eval function under a try catch block. if it works, it will print d result. if it doesn't, it comes to catch block where the output is set to empty & the exception is printed into d console.

Hope you enjoyed it. Thanks for watching!!

api javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Top 10 API Security Threats Every API Team Should Know

Learn what are the most important API security threats engineering leaders should be aware of and steps you can take to prevent them

An API-First Approach For Designing Restful APIs | Hacker Noon

I’ve been working with Restful APIs for some time now and one thing that I love to do is to talk about APIs.

Public ASX100 APIs: The Essential List

The method used for this initial research was to obtain a list of the ASX100 (as of 18 September 2020). Then work through each company looking at the following

Google Map Directions API & Places API Project Javascript - [2021] | Google Map Tutorial

Google Map Directions API & Places API Project Javascript is the latest and updated video in using google maps api. In this video we will work a little bit w...

What Are Good Traits That Make Great API Product Managers

What is API product management and what can you be doing to be a better API product manager — get aligned with SaaS and enterprise software requirements. This guide lays out what is API product management and some of the things you should be doing to be a good product manager.