Speech Recognition

p5.js Libraries
8

Looking at your code, the first thing you need to be aware is when p5 is available, which is within the setup() function. I did a search an found this

Below is a working demo. If it shows an error, just start speaking and you will see it starts processing the audio. Tested in Chrome. It doesn’t seem to be supported in FF.

Kf

var myRec;
var mostrecentword = "";

var x, y;
var dx, dy;
var step;

function setup() {
  createCanvas(300,400);  
  
  
  myRec = new p5.SpeechRec('en-US'); // new P5.SpeechRec object
  myRec.continuous = true; // do continuous recognition
  myRec.interimResults = true; // allow partial recognition (faster, less accurate)
  
  myRec.onResult=parseResult;
  myRec.onError= showError;
  myRec.start(); 
  
  // graphics stuff:
  textFont('Georgia');
  textSize(12);
  textAlign(LEFT);
  fill(0, 0, 0, 255);
  x = width / 2;
  y = height / 2;
  dx = 0;
  dy = 0;
  
  step=10;

}

function draw() {
  background(200);

  text("Hello", 12, 30);
  
  if (mostrecentword != "") {
    x=x+dx;
    y=y+dy;
    text(String(mostrecentword),x ,y);
    dx=0;
    dy=0;
  }
  
}

function parseResult() {
  
  // recognition system will often append words into phrases.
  // so hack here is to only use the last word:
  mostrecentword = myRec.resultString.split(' ').pop();
  
  if (mostrecentword.indexOf("left") !== -1) {
    dx = -step;
    dy = 0;
  } else if (mostrecentword.indexOf("right") !== -1) {
    dx = step;
    dy = 0;
  } else if (mostrecentword.indexOf("up") !== -1) {
    dx = 0;
    dy = -step;
  } else if (mostrecentword.indexOf("down") !== -1) {
    dx = 0;
    dy = step;
  } else if (mostrecentword.indexOf("clear") !== -1) {
    //background(255);
  }
  console.log(myRec.resultString);
  console.log(myRec.resultString.split(' ').length);
}

function showError(){
	console.log('There is an error');
	text('There is an error', windowWidth/2, windowHeight/2);
}