​

function showResult() {

  console.log(foo.resultString); // log the result

  label = foo.resultString;

}

​

let label = "listening...";

let confidence = 0.0;

let outputs = [];

​

let sound1, sound2, sound3, sound4, sound5, sound6;

​

function preload() {

  sound1 = loadSound("Music.mp3");

  sound2 = loadSound("Bird.mp3");

  sound3 = loadSound("Creek.mp3");

  sound4 = loadSound("Ocean.mp3");

  sound5 = loadSound("Rain.mp3");

  sound6 = loadSound("Wind.mp3");

}

​

function setup() {

  foo = new p5.SpeechRec(); // speech recognition object (will prompt for mic access)

  foo.onResult = showResult; // bind callback function to trigger when speech is recognized

  foo.continuous = true; // do continuous recognition

  // foo.interimResults = true; // allow partial recognition (faster, less accurate)

  foo.start(); // start listening

​

  createCanvas(600, 400);

  background(0);

  sound1.loop();

  sound1.setVolume(0.5);

}

​

function draw() {

  background(0);

  fill(255);

  // use of the result!

  noStroke();

  if (label == "listening..." ) {

    textSize(30);

    text(label, width / 2, height / 2);

  }

​

  //   if (label == "Stop") {       // case-sensitive

  //     textSize(30);

  //     text(label, width / 2, height / 2);

  //     sound1.stop();

  //   }

​

  //   else if (label == "Play") {     // case-sensitive

  //     textSize(30);

  //     text(label, width / 2, height / 2);

  //     if (!sound1.isPlaying()){

  //         sound1.play();

  //     }

  //   }

​

  if (label.toUpperCase().indexOf("BIRD") > -1) {

    textSize(30);

    text("bird", width / 2, height / 2);

    if (!sound2.isPlaying()) {

      sound2.play();

      sound2.setVolume(3);

      sound3.stop();

      sound4.stop();

      sound5.stop();

      sound6.stop();

    }

  } else if (label.toUpperCase().indexOf("CREEK") > -1) {

    textSize(30);

    text("creek", width / 2, height / 2);

    if (!sound3.isPlaying()) {

      sound3.play();

      sound2.setVolume(3);

      sound2.stop();

      sound4.stop();

      sound5.stop();

      sound6.stop();

    }

  } else if (label.toUpperCase().indexOf("OCEAN") > -1) {

    textSize(30);

    text("ocean", width / 2, height / 2);

    if (!sound4.isPlaying()) {

      sound4.play();

      sound2.setVolume(3);

      sound2.stop();

      sound3.stop();

      sound5.stop();

      sound6.stop();

    }

  } else if (label.toUpperCase().indexOf("RAIN") > -1) {

    textSize(30);

    text("rain", width / 2, height / 2);

    if (!sound5.isPlaying()) {

      sound5.play();

      sound2.setVolume(3);

      sound2.stop();

      sound3.stop();

      sound4.stop();

      sound6.stop();

    }

  } else if (label.toUpperCase().indexOf("WIND") > -1) {

    textSize(30);

    text("wind", width / 2, height / 2);

    if (!sound6.isPlaying()) {

      sound6.play();

      sound2.setVolume(3);

      sound2.stop();

      sound3.stop();

      sound4.stop();

      sound5.stop();

    }

  }

​

  // display the most confident result

  // else {

  //   textSize(30);

  //   text(label, width / 2, height / 2 );

  // }

  //text(confidence, width / 2, height / 2 + 50);

​

  // display the whole results

  textSize(10);

  for (let i = 0; i < outputs.length; i++) {

    let output = outputs[i];

​

    let x = 10;

    let y = 20 + i * 30;

    text(output.label, x, y);

    text(output.confidence, x, y + 10);

  }

}

​

function gotResult(error, results) {

  if (error) {

    console.error(error);

  }

​

  //console.log(results);

  outputs = results;

​

  if (results.length > 0) {

    label = results[0].label;

    confidence = results[0].confidence;

  }

}

​