Web Speech Recognition App Javascript

Web Speech Recognition App Javascript

Speech recognition is the capability in latest browsers to recognize spoken text. Today we are going to build it.

How do you do designers today we are going to make Web Speech Recognition App. As you know the HTML markup is necessary 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>Web Speech Recognition Demo</title>
<link rel="stylesheet" href="css/style.css">
<h1 id="headline">
<a href="http://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html">
Web Speech API</a> Demo</h1>
<div id="language">
Language: <select id="select_language" onchange="updateCountry()"></select>
<select id="select_dialect"></select>
<div id="info">
<p id="info_start">Click on the round button and begin speaking.</p>
<p id="info_speak_now">Speak now.</p>
<p id="info_no_speech">No speech was detected. You may need to adjust your
<a href="//support.google.com/chrome/bin/answer.py?hl=en&answer=1407892">
Microphone settings</a>.</p>
<p id="info_no_microphone" style="display:none">
No microphone was found. Ensure that a microphone is installed and that
<a href="//support.google.com/chrome/bin/answer.py?hl=en&answer=1407892">
Microphone settings</a> are configured correctly.</p>
<p id="info_allow">Click the "Allow" button above to enable your microphone.</p>
<p id="info_denied">Permission to use microphone was denied.</p>
<p id="info_blocked">Permission to use microphone is blocked. To change,
Go to chrome://settings/contentExceptions#media-stream</p>
<p id="info_upgrade">Web Speech API is not supported by this browser.
Upgrade to <a href="//www.google.com/chrome">Chrome</a>
Version 25 or later.</p>
<button id="start_button" onclick="startButton(event)"></button>
<div id="results">
<span id="final_span" class="final"></span>
<span id="interim_span" class="interim"></span>

Here we have completed html code.

Without CSS our this script (Web Speech Recognition App) will never look foxy. So here we are, our HTML markup is ready now we have to customize 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 :

* {
  font-family: Verdana, Arial, sans-serif;
Body {
  text-align: center;
Body > div {
  margin: 20px;
A:link {
  text-decoration: none;
A:visited {
A:hover {
Select {
  font-size: 1em;

.final {
  color: black;
  padding-right: 3px; 
.interim {
  color: gray;
.info {
  font-size: 14px;
  color: #777;
  display: none;

#headline {
  font-size: 40px;
  font-weight: 300;
#info {
  font-size: 1.2em;
  color: #777;
  visibility: hidden;
#results {
  font-size: 1.5em;
  font-weight: bold;
  border: 1px solid #ddd;
  padding: 15px;
  min-height: 150px;
#start_button {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  cursor: pointer;
#start_button:focus {
  background: red;
#language {
  font-size: 1.2em;

You can make customizations to make it look more beautiful.

So we have written HTML markup and customised it and now we will add some functionality in this project (Web Speech Recognition App).

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

So here is a JavaScript for our project (Web 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 :

var langs = [
 ['English',         ['en-AU', 'Australia'],
                     ['en-CA', 'Canada'],
                     ['en-IN', 'India'],
                     ['en-NZ', 'New Zealand'],
                     ['en-ZA', 'South Africa'],
                     ['en-GB', 'United Kingdom'],
                     ['en-US', 'United States']],
 ['Español',         ['es-AR', 'Argentina'],
                     ['es-BO', 'Bolivia'],
                     ['es-CL', 'Chile'],
                     ['es-CO', 'Colombia'],
                     ['es-CR', 'Costa Rica'],
                     ['es-EC', 'Ecuador'],
                     ['es-SV', 'El Salvador'],
                     ['es-ES', 'España'],
                     ['es-US', 'Estados Unidos'],
                     ['es-GT', 'Guatemala'],
                     ['es-HN', 'Honduras'],
                     ['es-MX', 'México'],
                     ['es-NI', 'Nicaragua'],
                     ['es-PA', 'Panamá'],
                     ['es-PY', 'Paraguay'],
                     ['es-PE', 'Perú'],
                     ['es-PR', 'Puerto Rico'],
                     ['es-DO', 'República Dominicana'],
                     ['es-UY', 'Uruguay'],
                     ['es-VE', 'Venezuela']],
 ['Français',        ['fr-FR']],
 ['Italiano',        ['it-IT', 'Italia'],
                     ['it-CH', 'Svizzera']],
 ['Português',       ['pt-BR', 'Brasil'],
                     ['pt-PT', 'Portugal']],
 ['日本語',           ['ja-JP']],
 ['Lingua latīna',   ['la']]

For (var i = 0; i < langs.length; i++) {
  select_language.options[i] = new Option(langs[i][0], i);
Select_language.selectedIndex = 6;
Select_dialect.selectedIndex = 6;

Function updateCountry() {
  for (var i = select_dialect.options.length - 1; i >= 0; i--) {
  var list = langs[select_language.selectedIndex];
  for (var i = 1; i < list.length; i++) {
    select_dialect.options.add(new Option(list[i][1], list[i][0]));
  select_dialect.style.visibility = list[1].length == 1 ? 'hidden' : 'visible';

Var final_transcript = '';
Var recognizing = false;
Var ignore_onend;
Var start_timestamp;
If (!('webkitSpeechRecognition' in window)) {
} else {
  start_button.style.display = 'inline-block';
  var recognition = new webkitSpeechRecognition();
  recognition.continuous = true;
  recognition.interimResults = true;

  recognition.onstart = function() {
    recognizing = true;
    start_img.src = 'mic-animate.gif';

  recognition.onerror = function(event) {
    if (event.error == 'no-speech') {
      start_img.src = 'mic.gif';
      ignore_onend = true;
    if (event.error == 'audio-capture') {
      start_img.src = 'mic.gif';
      ignore_onend = true;
    if (event.error == 'not-allowed') {
      if (event.timeStamp - start_timestamp < 100) {
      } else {
      ignore_onend = true;

  recognition.onend = function() {
    recognizing = false;
    if (ignore_onend) {
    start_img.src = 'mic.gif';
    if (!final_transcript) {


  recognition.onresult = function(event) {
    var interim_transcript = '';
    for (var i = event.resultIndex; i < event.results.length; ++i) {
      if (event.results[i].isFinal) {
        final_transcript += event.results[i][0].transcript;
      } else {
        interim_transcript += event.results[i][0].transcript;
    final_transcript = capitalize(final_transcript);
    final_span.innerHTML = linebreak(final_transcript);
    interim_span.innerHTML = linebreak(interim_transcript);
    if (final_transcript || interim_transcript) {

Function upgrade() {
  start_button.style.visibility = 'hidden';

Var two_line = /\n\n/g;
Var one_line = /\n/g;
Function linebreak(s) {
  return s.replace(two_line, '

').replace(one_line, ' '); } Var first_char = /\S/; Function capitalize(s) { return s.replace(first_char, function(m) { return m.toUpperCase(); }); } Function startButton(event) { if (recognizing) { recognition.stop(); return; } final_transcript = ''; recognition.lang = select_dialect.value; recognition.start(); ignore_onend = false; final_span.innerHTML = ''; interim_span.innerHTML = ''; start_img.src = 'mic-slash.gif'; showInfo('info_allow'); showButtons('none'); start_timestamp = event.timeStamp; } Function showInfo(s) { if (s) { for (var child = info.firstChild; child; child = child.nextSibling) { if (child.style) { child.style.display = child.id == s ? 'inline' : 'none'; } } info.style.visibility = 'visible'; } else { info.style.visibility = 'hidden'; } }

We are done now.

Ending :

So here we are, We have done and our project Web 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.

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

Download Project (Web Speech Recognition App) File :

Web Speech Recognition App.zip
File Size 4.33 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 this post help you a lot and I think you will appreciate it so don't take that appreciation with you if you like my post appreciate me in the comment form below.

Thank you !

Post a Comment

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