Javascript Speech Recognition App

Javascript Speech Recognition App

Have you ever hear about speech recognition I think yes and here today I have a tool for you which will work like speech recognition software it will automatically transcribe what you say in your microphone so let's build it together.

I have provided all the source code below you can simply copy that or download it from the link below.

How are you people today we are going to design Javascript Speech Recognition App.

As you know the HTML markup is essential for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.

Save It As index.html :

<!DOCTYPE html>
<html lang="en" >
<meta charset="UTF-8">
<title>Javascript Speech Recognition App</title>
<link rel="stylesheet" href="css/style.css">
<div class="words" contenteditable>

HTML markup was just so simple I used Div tag with the contenteditable attribute.
Without CSS our this script (Javascript Speech Recognition App) will never look appealing. So here we are, our HTML markup is ready now we have to personalize our HTML and it can be done using CSS.

So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new directory called css and put this file to that directory.

Save It As style.css :

@import url("");

html {
  font-size: 10px;

body {
  background: #fce6d3;
  font-family: "Open Sans", sans-serif;
  font-size: 2rem;
  color: #1d2e4b;

.words {
  max-width: 500px;
  margin: 50px auto;
  background: #fff;
  border-radius: 5px;
  padding: 1rem 2rem 1rem 5rem;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#cfddf9), color-stop(4%, #fff)) 0 4px;
  background-size: 100% 3rem;
  position: relative;
  line-height: 3rem;
  -moz-box-shadow: 2px 8px 15px rgba(228, 126, 118, 0.5);
  -webkit-box-shadow: 2px 8px 15px rgba(228, 126, 118, 0.5);
  box-shadow: 2px 8px 15px rgba(228, 126, 118, 0.5);

p {
  margin: 0 0 3rem;

.words:before {
  content: "";
  position: absolute;
  width: 4px;
  top: 0;
  left: 30px;
  bottom: 0;
  border: 1px solid;
  border-color: transparent #ffd9d9;

I have styled it as I want you can change the style of this tool as you want and as you like
So we have written HTML markup and customised it and now we will add some functionality in this project (Javascript Speech Recognition App).

To make this project (Javascript Speech Recognition App) work properly so for that we will use JavaScript.

So here is a JavaScript for our project (Javascript Speech Recognition App) and also save it with the filename as provided. Make a new directory called js and put this file to that directory.

Save It As index.js :

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

if (!window.SpeechRecognition) {
  alert("Your browser does not support speech recognition. Use Chrome!")

const recognition = new SpeechRecognition();
recognition.interimResults = true;

let p = document.createElement('p');
const words = document.querySelector('.words');

recognition.addEventListener('result', e => {
  const transcript = Array.from(e.results)
    .map(result => result[0])
    .map(result => result.transcript)

    p.textContent = transcript;

    if(e.results[0].isFinal) {
      p = document.createElement('p');


recognition.addEventListener('end', recognition.start);

So here we will use speech recognition API which works in Chrome browser so have a look at the code provided above you will find that API at the starting or beginning of the code.

Denouement :

So here we are, We have done and our project Javascript Speech Recognition App is ready now you can save all the files as provided.
Like CSS files in css directory and JavaScript files in a JS directory name. Below is directory tree of the files and folders of this project.

  • Javascript Speech Recognition App
    • css
      • style.css
    • js
      • index.js
    • index.html

Download Project (Javascript Speech Recognition App) File :

Javascript Speech Recognition
File Size 2.26 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.

I hope that you will like my this post and if you do then please share it with your friends and keep visiting this site for more this kind of projects and tutorials.

Post a Comment

Help us improve this article by leaving your feedback below.
Previous Post Next Post