speechRecognition.js

/*
  This only works on Chrome!

  Steps:
  1) Execute this in your dev console
  2) Click anywhere on your current webpage
  3) Try saying one of the colors in `colorList`
  4) See if the resulting "alert" prints out the color that you spoke
*/

const colorList = [
  'aqua',
  'azure',
  'beige',
  'bisque',
  'black',
  'blue',
  'brown',
  'chocolate',
  'coral',
  'crimson',
  'cyan',
  'fuchsia',
  'ghostwhite',
  'gold',
  'goldenrod',
  'gray',
  'green',
  'indigo',
  'ivory',
  'khaki',
  'lavender',
  'lime',
  'linen',
  'magenta',
  'maroon',
  'moccasin',
  'navy',
  'olive',
  'orange',
  'orchid',
  'peru',
  'pink',
  'plum',
  'purple',
  'red',
  'salmon',
  'sienna',
  'silver',
  'snow',
  'tan',
  'teal',
  'thistle',
  'tomato',
  'turquoise',
  'violet',
  'white',
  'yellow'
].join(' | ')


const Grammar = (statement) => {
  const grammar = new webkitSpeechGrammarList();
  grammar.addFromString(statement, 1);
  return grammar
}

const SpeechRecognition = (grammars) =>
  Object.assign(new webkitSpeechRecognition(), {
    grammars,
    lang: 'en-US',
    interimResults: false,
    maxAlternatives: 1
  })

const grammar = Grammar(`#JSGF V1.0; grammar colors; public <color> = ${colorList};`)
const recognition = SpeechRecognition(grammar)

document.body.onclick = function() {
  recognition.start();
  console.log('Ready to receive a color command.')
}

recognition.onresult = function(event) {
  const color = event.results[0][0].transcript
  alert('Result received: ' + color)
}