Speech Recognition

by Pranab Dey

HTML

<!-- <h3 style='text-align: center'>Send Email with Speech</h3> -->
<div class="main">
</div>
<div class='speech'>( Click start button &amp; talk )</div>
<button class='start' tabindex="0">Start</button>
<button class='stop'>Stop</button>
<!-- <button class='email'>Send Email</button> -->
<button class='instructionBtn'>Instruction</button>
<button class='clear'>Clear</button>
<span class="statusBar" data-text='Listening...'></span>
<br/>
<div class="instructionContainer" tabindex="-1">
  <button class='instructionClose' tabindex="-1">X</button>
  <h3>Instructions:</h3>
  <ol>
    <li>Click Start button and click 'allow' to use microphone if popup comes up.</li>
    <li>After allowing, just start talking means your subject text.</li>
    <li>Speaking Commands:
      <ul>
        <li>For comma(,) say <mark class='markText'>'comma'</mark>.</li>
        <li>For fullstop(.) say <mark class='markText'>'full stop'</mark>.</li>
        <li>For exclamation(!) say <mark class='markText'>'exclamation sign'</mark>.</li>
        <li>For question mark(?) say <mark class='markText'>'question mark'</mark>.</li>
        <li>For delete something, say <mark class='markText'>'delete now'</mark>.</li>
      </ul>
    </li>
    <li>After completing your subject, say <mark class='markText'>'line break'</mark> to break the line for your body content. After break, the body content part will start.</li>
    <li>Say <mark class="markText">'paragraph break'</mark> for provide break between two lines.</li>
    <li>When everything's done means after completing your body part, say <mark class='markText'>'send email'</mark> to open your default email provider(wheather it's a app or gmail account) and just edit your recipient's email address and send email.</li>
    <li>If you click send email button without provide 'line break' command (see point 4), then subject and body both will take the same content. </li>
  </ol>
  <h3>Background Color Change Commands:</h3>
  <pre style='white-space:...

CSS

body {
  overflow-x: hidden;
}

button {
  margin-top: 4px;
  border: 1px solid transparent;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
}

button:not(.instructionClose):hover,
button:not(.instructionClose):focus {
  border: 1px solid #333;
  outline: 0;
}

.main {
  border: 1px solid black;
  padding: 2px;
  margin-bottom: 4px;
}

.disable {
  pointer-events: none;
  opacity: 0.5;
}

.statusActive {
  visibility: visible;
  opacity: 1;
}

.statusActive:after {
  content: attr(data-text);
}

/* Instruction style */

.instructionContainer {
  position: absolute;
  overflow: hidden;
  overflow-y: visible;
  top: 0;
  left: 100%;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px 20px;
}

.instructionContainer h3,
.instructionContainer ol li,
.instructionContainer ol li>ul li {
  color: white;
}

.instructionContainer ol li {
  margin-bottom: 8px;
}

.instructionContainer .instructionClose {
  position: absolute;
  right: 25px;
  border: 0;
  background: #333;
  color: #fff;
  font-size: 20px;
  padding: 10px 15px;
  border-radius: 50px;
}

.instructionContainer .markText {
  margin: 0 3px;
  padding: 0 2px;
}

.instructionContainer span {
  color: yellow;
}

.instructionContainer small,
.instructionContainer pre {
  color: white;
}

.instructionContainer small:hover {
  border-bottom: 1px solid red;
}

.notSupport {
  width: 380px;
  margin: 40px auto;
  font-family: sans-serif;
  text-align: center;
  background: linear-gradient(to right, #d04848 0%, #e27479 50%, #d04848 90%);
  padding: 24px 10px;
  color: white;
  font-size: 14px;
  border-radius: 14px;
  box-shadow: 4px 6px 15px 0 rgba(0, 0, 0, 0.4);
}

.notSupport p:first-child span:not(:last-child) {
  margin-right: 5px;
}

.notSupport.hide {
  display: none;
}

.notSupport.show {
  display: block;
}

@media screen and (max-width: 350px) {
  .instructionContainer ol {
    padding-left: 15px;
  }
  .instructionContainer ul {
    padding-left: 20px;
    padding-top: 5px;
  }
 ...

JavaScript

var speech = document.querySelector('.speech'),
  startBtn = document.querySelector('.start'),
  stopBtn = document.querySelector('.stop'),
  msg = document.querySelector('.main'),
  status = document.querySelector('.statusBar'),
  email = document.querySelector('.email'),
  instructionBtn = document.querySelector('.instructionBtn'),
  close = document.querySelector('.instructionClose'),
  small = document.querySelector('.smallText'),
  marked = document.querySelectorAll('.markText'),
  clearText = document.querySelector('.clear'),
  notSupport = document.querySelector('.notSupport');

(window.SpeechRecognition || window.webkitSpeechRecognition) ? ((window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition), notSupport.classList.add('hide')) : notSupport.classList.add('show');

var recognition = new SpeechRecognition();
recognition.interimResults = true;
//recognition.continuous = false;
//recognition.maxAlternatives = 10;

//console.log(recognition);

recognition.onresult = (e) => {
  var colors = ['green', 'purple', 'yellow', 'white', 'tomato', 'tan', 'thistle', 'wheat', 'lime'];
  //console.log(e.results[0][0].transcript);
  if (e.results[0].isFinal) {
    var span = document.createElement('span'),
      span2 = document.createElement('p');
    span.innerHTML = span2.innerHTML = e.results[0][0].transcript;
    if (span.innerHTML.includes('open alert')) {
      alert('alert box open!');
    }
    if (span.innerHTML.includes('line break')) {
      span.innerHTML = '<p></p>';
      console.log(span.innerHTML);
    }
    if (span.innerHTML.includes('paragraph break')) {
      span.innerHTML = '<br><br>';
      console.log(span.innerHTML);
    }
    if (span.innerHTML.includes('full stop')) {
      span.innerHTML = span.innerHTML.replace(/(full stop)/g, '. ');
    }

    if (span.innerHTML.includes('comma')) {
      span.innerHTML = ', ';
    }
    if (span.innerHTML.includes('exclamation sign')) {
      span.innerHTML =...