CC – Week 7: Sound and Video – Log

This week I'm using the p5.speech library to make something fun with web speech recognition.

(Note: requires Chrome or another browser that supports the Web Speech API.)

Open Demo

How this works

let speech = new p5.SpeechRec('en-US', parseResult)
speech.continuous = true
speech.interimResults = false

function setup() {
  createCanvas(window.innerWidth, window.innerHeight)
  background(255)
  fill(25)

  textSize(48)
  textAlign(CENTER)
  textStyle(BOLDITALIC)
  textFont('"Avenir Next", system-ui, sans-serif')
  text('SAY A COLOR', width / 2, height / 2)
  speech.start()
}

function draw() {
  // Where we’re going we don’t need drawing
}

const colors = []

function parseResult() {
  if (speech.resultValue) {
    const color = speech.resultString.split(' ').pop().toUpperCase()
    colors.push(color)
    background(color)
    text(color, width / 2, height / 2)
    console.log(colors)
  }
}

1. Loading the p5.speech library, in the HTML
2. Initializing web speech for English, using continuous (as opposed to one-time) dictation
3. Initializing a full-screen canvas
4. Drawing some basic instructions on the screen
5. Whenever the speech recognition returns a result, it runs a function that
   1. Gets the last word of the string, if it's a multi-word phrase
   2. Saves it to an array, primarily for debugging
   3. Sets the background color
   4. Updates the centered onscreen text with the new color name

---

Voilà! Check out the code on P5.