I was watching this video --> https://www.youtube.com/watch?v=q_bXBcmfTJM
It is on speech recognition and he uses p5.js-speech. Here is the github --> https://github.com/IDMNYU/p5.js-speech
Now since i’m trying to follow his tutorial on codepen, how do i use p5.js-speech? How to link from github to codepen?
Here is my pen --> https://codepen.io/Mike-was-here123/pen/pZqWrR
Here is what i tried linking in the JS settings:
I just get the error:
Uncaught TypeError: p5.SpeechRec is not a constructor
and
You just changed the value of "remove", which was a p5 function. This could cause problems later if you're not careful.
I am using the exact same code at the video, so i think it is something with accessing p5. He seems to have downloaded and accessed it that way, but can i link it for codepen?
p5 itself is fine. It’s this: https://github.com/IDMNYU/p5.js-speech.git. That isn’t a JS file - it’s a .git file, it only has relevance to the git version control system. When you specify urls of files in the JS settings of Codepen, it’s basically just adding a script tag with the url to the head of your document. That isn’t a script file at all, so your code blows up when it tries to parse it.
What you need is the actual JS file: that file is stored on GitHub, in that repo, and if you click the download button on the main page of p5.speech on on GitHub (or the project site on the college website - so http://ability.nyu.edu/p5.js-speech/ or https://github.com/IDMNYU/p5.js-speech) you can get it locally on your computer. That’s what he’s done: he’s not using Codepen, he’s downloaded the file and is linking it on the web page he’s writing locally.
It doesn’t seem to be available on any CDNs so as far as I can see, unless you host the file yourself somewhere, you can’t just put it into codepen. You could copy the contents of the file into the JS section of your pen, that may work.
Personally, I would do the project locally if you can. It’s easier in a lot of ways. That also gives a good reason to learn git and GitHub as well, because then you can store your project code on GitHub (and display the end result publicly using GitHub pages), and the .git/git/etc gibberish will make more sense
Edit: btw, this is awesome, just watching the video now
1 Like