This project will help you creates dynamic captions based on speech recognition.
- node.js
- npm
A microphone is needed and you also require an internet connection as this is a cloud based process.
A call to recognizer.js from the index instantiates, a p5.Speech API interaction.
function setup() {
noCanvas();
let recording = new p5.SpeechRec();
recording.onResult = showResult;
let continuous = true;
let iterim = true;
recording.start(continuous, iterim);
function showResult() {
if (recording.resultString) {
document.getElementById('caption').innerText = recording.resultString;
}
}
}
See: http://ability.nyu.edu/p5.js-speech/ for documentation.
$ git clone https://github.com/mjrdnk/captioner.git
$ cd captioner
$ npm install
$ npm start
Consult your command-line documentation for instructions on ending the execution. In windows on CMD it is CTRL + C. It responds with a prompt asking if you would like to quit.
Finally open your browser to localhost:3000, you will be prompted to enable your microphone, and enjoy the captions:
Google Chrome | Mozilla Firefox | Opera | Safari | Internet Explorer |
---|---|---|---|---|
✔️ | ❌ | ❌ | ❌ | ❌ |
Many thanks to the brilliant Daniel Shiffman's instruction in: The Coding Train - https://www.youtube.com/watch?v=q_bXBcmfTJM