JavaScript - Comandos por voz com a Web Speech API

var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition

// Cria a instância do módulo de reconhecimento de voz.
var recognition = new SpeechRecognition();

// Realiza configurações do módulo.
recognition.continuous = true;
recognition.lang = 'pt-BR';
recognition.interimResults = false;
recognition.maxAlternatives = 1;

// Acessa o elemento parágrafo em que irá apresentar os comandos recebidos.
var diagnostic = document.querySelector('.output');

// Acessa o elemento div em que irá criar elementos P e H3 mediante comandos.
var box = document.querySelector('#box');

// Evento que será chamado a cada reconhecimento processado.
recognition.onresult = function(event) {

  // Pego o tamanho do array dos resultados de transcrição.
  let length = event.results.length;

  // Acesso o último resultado de transcrição usando o tamanho menos um, como primeiro índice.
  let command = event.results[length-1][0].transcript;

  // Apresento o comando recebido no parágrafo que mostra ao usuário para verificação.
  diagnostic.textContent = 'Resultado recebido: ' + command + '.';

  // Se o comando recebido for "abrir o google", este bloco é executado.
  if (command.toLowerCase().indexOf("abrir google") > -1){
    window.open('http://google.com', '_blank');
  }
  // Se o comando recebido for "abrir o w3 schools", este bloco é executado.
  else if (command.toLowerCase().indexOf("abrir w3 schools") > -1){
    window.open('https://www.w3schools.com', '_blank');
  }
  // Se o comando recebido for "criar parágrafo", este bloco é executado.
  else if (command.toLowerCase().indexOf("criar parágrafo") > -1){
    let paragrafo = document.createElement("p");
    paragrafo.textContent = "Este é um novo parágrafo!";
    let box = document.getElementById("box");
    box.appendChild(paragrafo);
  }
  // Se o comando recebido for "criar título", este bloco é executado.
  else if (command.toLowerCase().indexOf("criar título") > -1){
    let titulo = document.createElement("h3");
    titulo.textContent = "Este é um novo título!";
    let box = document.getElementById("box");
    box.appendChild(titulo);
  }
}

document.querySelector('#btn-start').onclick = function() {
  recognition.start();
}

document.querySelector('#btn-stop').onclick = function() {
  recognition.stop();
}