Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Swipe with your voice
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script>
<script src="p5.speech.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<h1><p align="center">~Swipe with your voice~</p></h1>
</head>
<div><p align="center">
click
<button id="my-button">I'm ready</button>
to describe your *type* in keywords until you find *the one*</p>
</div>
<body>
<script src="sketch.js"></script>
</body>
</html>
let dude = [];
let keywords = ['dog', 'six pack', 'nice eyes', 'fish','scooter','clothes on','gym selfie','better six pack','coffee','cook','outdoor','hipster'];
let amp;
let myRec = new p5.SpeechRec();
myRec.continuous = true;
function preload() {
dude[00] = loadImage('assets/dude01.jpg');
dude[01] = loadImage('assets/dude02.jpg');
dude[02] = loadImage('assets/dude03.jpg');
dude[03] = loadImage('assets/dude04.jpg');
dude[04] = loadImage('assets/dude05.jpg');
dude[05] = loadImage('assets/dude06.jpg');
dude[06] = loadImage('assets/dude07.jpg');
dude[07] = loadImage('assets/dude08.jpg');
dude[08] = loadImage('assets/dude09.jpg');
dude[09] = loadImage('assets/dude10.jpg');
dude[10] = loadImage('assets/dude11.jpg');
dude[11] = loadImage('assets/dude12.jpg');
}
function setup() {
createCanvas(windowWidth, windowHeight);
amp = new p5.Amplitude();
myRec.onResult = showResult;
// myRec.start();
}
function showResult()
{
if(myRec.resultValue==true) {
for(let i=0; i<keywords.length; i++) {
if(myRec.resultString == keywords[i]) {
imageMode(CENTER);
image(dude[i],windowWidth/2, windowHeight*(1/3),400,530);
}
}
}
console.log(myRec.resultString);
}
document.querySelector('#my-button').onclick = () => {
console.log('clickity');
myRec.start();
};
html, body {
margin: 0;
padding: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment