Voice Recognition in JavaScript

index.html

<div class="container">
  <h1>Speech To Text</h1>
  <div>
    <label for="lang">
      Choose your language:
      <select name="lang" id="lang">
        <option value="en-GB" id="en-GB" selected="selected">English - GB</option>
        <option value="en-US" id="en-US">English - US</option>
        <option value="es-ES" id="es-ES">Español - ES</option>
      </select>
    </label>
  </div>
  <div>  
    <button id="start" title="record"></button>
  </div>
  <span id="tooltip" class="init"> to clipboard!</span>
  <div id="transcription" title="copy">
  </div>
</div>

script.js

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

document.querySelector('#start').addEventListener('click', ()=>{
  const startBtn = document.querySelector('#start');
  recognition.lang = document.querySelector('#lang').value || 'en-GB';
  recognition.continuous = true;

  recognition.onresult = (event) => {
    const accumulatedResult = [];
    for (const result of event.results) {
      accumulatedResult.push(`${result[0].transcript}`);
    }
    document.querySelector('#transcription').innerHTML = accumulatedResult;
  };
  
  if(startBtn.classList.contains('listening')) recognition.stop();
  else {
    recognition.start();
  }
  startBtn.classList.toggle('listening');
  // audiostart
  // audioend
});

document.querySelector('#transcription').addEventListener('click', (e) => {
  navigator.clipboard.writeText(e.target.innerText).then( () => {
    document.getElementById('tooltip').classList.add('active');
    setTimeout( () => {
      document.getElementById('tooltip').classList.remove('active');
    }, 3100);
  });
  
});

setTimeout( () => {
  document.getElementById('tooltip').classList.remove('init');
}, 3100);

style.scss

@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:wght@400;700&display=swap');

* {
  font-family: sans-serif;
  box-sizing: border-box;
}
body {
  background: linear-gradient(90deg, #121212, #000, #000, #121212);
  .container {
    max-width: 414px;
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
    padding-left: 24px;
    padding-right: 24px;

    h1 {
      font-family: 'Lobster Two', cursive;
      font-size: 48px;
      text-align: center;
      width: 100%;
      color: white;
      text-shadow: 0 0 5px #333;
    }
    span {
      background: #ffffffaa;
      padding: 24px;
      max-width: 128px;
      border-radius: 4em 4em 4em .25em;
      margin-bottom: 16px;
      margin-left: 24px;
      transform: rotate(-15deg);
      opacity: 0;
      &.active {
        animation: tooltipIn 3s ease-in-out;
        &::before {
          content: 'Copied'
        }
      }
      &.init {
        animation: tooltipOut 3s ease-in-out;
        &::before {
          content: 'Copy'
        }
      }
    }
    div {
      display: flex;
      flex: 0 1 100%;

      &#transcription {
        background-color: #ffffffcc;
        width: 100%;
        min-height: 48px;
        border-radius: .25em;
        padding: 18px 16px;
        cursor: pointer;
        &::before {
          content: '📋';
          font-size: 24px;
          padding-right: 8px;
        }
      }
      label {
        width: 100%;

        select {
          background: #fefefe;
          margin-top: 8px;
          color: #121212;
          width: 100%;
          font-size: 18px;
          padding: 8px 4px;
          border: 2px solid #fefefeee;
          border-radius: .25em;
          outline: none;
        }
      }
      button {
        width: 100%;
        margin: 36px 16px 0;
        background: transparent;
        border: none;
        cursor: pointer;
        &.listening {
          &::before {
            animation: listening 1s ease-in;
            animation-iteration-count: infinite;
          }  
        }
        &::before {
          content: '🎙️';
          font-size: 100px;
          color: white;
          background: rgba(255,255,255, .25);
          border: 24px solid rgba(255, 255, 255, .025);
          padding: 8px;
          border-radius: 50%;
        }
      }
    }
  }
}

@keyframes tooltipIn {
  from {
    opacity: 0;
    margin-left: -10px;
  } to {
    opacity: 1;
    margin-left: 10px;
  }
}

@keyframes tooltipOut {
  from {
    opacity: 0;
    margin-left: -10px;
  } to {
    opacity: 1;
    margin-left: 10px;
  }
}

@keyframes listening {
  from {
    border-width: 2px;
  } to {
    border-width: 24px;
  }
}

voice-recognition-in-javascript.markdown

Voice Recognition in JavaScript

A Pen by joelbonetr on CodePen.

License.