So cool that you can do this with just a text editor and a browser! Love your videos. I've built six amazing projects today by watching this series. All of them are things that I would have considered way out of my ability level, but here they are, working. Thank you!
Great stuff! People are very slow to adapt to innovation. This video is a perfect example. It was done over a year ago and there is not much out there.
let transcript = e.results[0][0].transcript; this line seems to be working as well, instead of converting to array and then mapping through that array.
While it's cool, in MDN docs it's clearly mentions that Chrome sends your speech data to servers for processing and it won't work without internet. So unfortunately I have to use tensorflowjs for inbox recognition.
Dammit I can't get it to work, but it seems to recognise the sound... so the problem isn't the microphone. I tried the finished one just to check if it was related to my code but nope :(
This is only supported by Chrome. I'm using Opera for all the projects. Guess I'll have to skip this one out. But this is great stuff if it goes ahead from Experimental.
I mainly use Brave Browser, and unfortunately it doesn't have speech recognition... Chrome worked fine for me. If anyone found a work around for Brave, please let me know!
Hi Wes, Thanks a lot for your time and effort you put into creating another great video for us. I have a few questions regarding the speech recognition. 1). How many languages does it support? 2). How does it decide which language to choose by default? Does it look at your system's locale settings, or browser settings, or maybe your Google account settings? 3). Is it possible to set manually the language you'd like to use even if the system's locale is different? (ex. system locale settings are set to US but I want to use let's say a French language) 4. Is it supported in any other browsers apart from Chrome? It would be highly appreciated if you could answer any of the questions above. Thanks again for your content.
Hey, maybe I can help 1) It should support any of the ISO language codes you can use in the HTML lang attribute. 2) It defaults to the HTML lang attribute value, or the user agent's language setting if that isn't set either. 3) Yes, by using recognition.lang = 'fr'. 4) It looks like it's currently supported only by Chrome. Check out MDN docs developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition for more info about the api and caniuse.com/#search=speechrecognition for detailed info about browser support.
Hey there, I am quite new to js and I just started learning node/server-side js, so I was wondering if you actually needed to create a separate js file for your local host server. For example: // Dependencies var http = require("http"); var fs = require("fs"); // Set port to 8080 var PORT = 8080; // Create server var server = http.createServer(handleRequest); // Create a function for handling requests and responses coming into server function handleRequest(req, res) { // Here we use the fs package to read our index.html file fs.readFile(__dirname + "/index.html", function(err, data) { // We then respond to the client with the HTML page by specifically telling the browser that we are delivering // an html file. res.writeHead(200, { "Content-Type": "text/html" }); res.end(data); }); } (add some other stuff) // Starts server server.listen(PORT, function() { console.log("Server is listening on PORT: " + PORT); }); and of course all of the node modules and npm packages. Any help regarding running the app with a server would be greatly appreciated. Thanks so much!!
I'm having trouble with getting any text to show in the console on Windows. The innerHTML is not updating, so to print e.result is not even working. My mic is being picked up in the browser and I've run the npm commands, apache on xampp is running, not sure what I'm doing wrong. Any ideas?
I keep receiving an error 'SpeechRecognition' is not defined no-undef. I use chrome and I'm using webpack to access a server. This error might be because of webpack but can anyone help me? Here is my main.js looks like (following Wes Bos's code): (function() { window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); recognition.interimResults = true; let p = document.createElement('p'); const words = document.querySelector('.words'); words.appendChild(p); recognition.addEventListener('result', event => { const transcript = Array.from(event.results) .map(result => result[0]) .map(result => result.transcript).join(''); // Create a new container if you make a pause. if (event.results[0].isFinal) { p = document.createElement('p'); words.appendChild(p); } p.textContent = transcript; }); recognition.start(); // Start recognition after each pause recognition.addEventListener('end', recognition.start); }());
HI Gurgamel, I hope that I can answer this. The code that is in the index-Start.html file from that beginning of the lesson is necessary to this lesson also. Wes, is simply reviewing the key final pieces of the puzzle. To cut down on lesson length and repetition of information. Does that all make sense?
I can't get my app to accurately recognize Spanish speech. I don't want all the code here, but does anyone know if maybe the Spanish is just not that accurate? If so I'll stop banging my head against that wall and just use English.
Hello. First of all, Im sorry because my english not very good ;) then: I wirte this codes in my pc with xampp program and I have 2 problems: 1. In local host, this codes run correctly, but, when I upload this codes in my site, dont run! 2. If I open my site in Samsung internet browser, this codes run, but 1000 times request access for alow to use from microphon and I can afew talk then write.
For the transcript, the below code works well: const transcript = e.results[0][0]['transcript']; I don't know why we should turn transcript into array then join?
please , i need to know is that free ? , if i use that in video call app ? because i found on google cloud website , i have to pay if i use it for more than 60 mins but it didn't ask for a keyy
Well it's time to put voice control to my website. I am not sure how smart it is but hey, it's a competition. If face Id didn't win it last year, this doesn't have much chance but this combined with image recognition I think will be enough. We will see.
@@tika5635 last year I made an entire API in python with openCV and tensorflow for face identification.... I am a highschool student btw. I got beat by a girl which had a combustor which probably took her 2 weeks to make. Reasons: 1 she was a girl 2 she is wealthy and goes to a private school 3 they thought I downloaded the software (even though I shared the entire code and documented the progress of every day on my chsngelog) 4 I had won the year before that with my smart house prototype project using Arduino So this year I am making a web app for online learning that will use voice control for interface interaction. It won't be really that complex. I will give it a trigger word of "smart assistant" and it takes the words after that in a command string, which I will explode into every individual word and work out some AI solution which will compare those individual strings and try to find out which command out of an array of commands the user has given.
I got is to work. One small problem.. If the browser is in another language, it will only recognize the words that are in the same language as the broweser. For example, my phone's chrome is in Hebrew so it does not understand the English words. Same page on my pc - Chrome is in English - it understands only English... Is there a fix for this?
you can set the language, as Wes does with interimResults. here's my code as a reference: // initial set up const recognition = new SpeechRecognition(); recognition.interimResults = true; recognition.lang = 'en-US'; recognition.maxAlternatives = 1; you'lll need to find in the docs, how's hebrew described so you can assign it to recognition.lang = 'hb-HW' somehting like that
I am a developer which develop without an internet and speechrecognition seems dont work without internet... In recognition.onerror it return network error
Hey Wes, I've taken the two speech tutorials and used them to make a "hal9000" that will speak back to you but I'm having an issue. If I say hello, it says hey back which then kicks off another hey, and another... I've tried to combat this by adding a start, and stop event to the speechsynthesisutterance which stops and starts the recognition. The only problem is, when there is no response (msg.text = "") the start never fires which means the recognition never stops and starts back up. Now the problem is, since Chrome shuts recognition off after a while I have to add another event to fire on recognition end to restart it. This screws up everything by trying to restart started recognition... I have been messing with this all day and can't figure it out. Can you provide any help? Thank you!!! github.com/davidhenley/hal9000
Have you got this line in your code? recognition.addEventListener('end', recognition.start); Sorry if that is a really dumb questions, you are fields ahead of me.
![АЛАУДИНОВ у Скабеевой: эти их ВСУ нас НЕ ДОГОНЯТ 😁 [Пародия]](http://i.ytimg.com/vi/an0anqU4WGQ/mqdefault.jpg)
So cool that you can do this with just a text editor and a browser! Love your videos. I've built six amazing projects today by watching this series. All of them are things that I would have considered way out of my ability level, but here they are, working. Thank you!
Great stuff! People are very slow to adapt to innovation. This video is a perfect example. It was done over a year ago and there is not much out there.
Man, this one was really nice!! Amazing! Thank you so much for these guides
Wow! It’s new to me and seems fascinating already!
It was a good video 😊
You could use this to learn how to say ternary.
You're an amazing tutor bruv!
let transcript = e.results[0][0].transcript;
this line seems to be working as well, instead of converting to array and then mapping through that array.
const transcript = e.results[0][0].transcript
instead of
const transcript = Array.from(e.results)
.map(result => result[0])
.map(result => result.transcript)
.join("")
seems also possible
That works great :)
It deliveries tons of new features for out apps!
While it's cool, in MDN docs it's clearly mentions that Chrome sends your speech data to servers for processing and it won't work without internet.
So unfortunately I have to use tensorflowjs for inbox recognition.
Great tutorial, subscribed right after watching this one. Thanks a lot.
Just beware of that this Web API doesn't work on browsers other than Edge, Chrome, and Safari (it's a paid API provided by Google)
As you mention towards the end, how would you make it only run the recognised function once, so it doesn't keep repeating?
Dammit I can't get it to work, but it seems to recognise the sound... so the problem isn't the microphone. I tried the finished one just to check if it was related to my code but nope :(
Thanks u a lot.....it's simply great!!!!
I need source code of this tutorial. could anyone who made it ,send me please...
thank you a lot. you are so awsome
If you use WebStorm, you don't need to have a server running; WebStorm creates its own for you.
wow bless you dev😉
This is only supported by Chrome. I'm using Opera for all the projects. Guess I'll have to skip this one out. But this is great stuff if it goes ahead from Experimental.
I mainly use Brave Browser, and unfortunately it doesn't have speech recognition... Chrome worked fine for me.
If anyone found a work around for Brave, please let me know!
Hi Wes,
Thanks a lot for your time and effort you put into creating another great video for us. I have a few questions regarding the speech recognition.
1). How many languages does it support?
2). How does it decide which language to choose by default? Does it look at your system's locale settings, or browser settings, or maybe your Google account settings?
3). Is it possible to set manually the language you'd like to use even if the system's locale is different? (ex. system locale settings are set to US but I want to use let's say a French language)
4. Is it supported in any other browsers apart from Chrome?
It would be highly appreciated if you could answer any of the questions above.
Thanks again for your content.
Hey, maybe I can help
1) It should support any of the ISO language codes you can use in the HTML lang attribute.
2) It defaults to the HTML lang attribute value, or the user agent's language setting if that isn't set either.
3) Yes, by using recognition.lang = 'fr'.
4) It looks like it's currently supported only by Chrome.
Check out MDN docs developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition for more info about the api and caniuse.com/#search=speechrecognition for detailed info about browser support.
Hey Andrea,
Thanks a lot for answering and proving the useful links.
Hey there, I am quite new to js and I just started learning node/server-side js, so I was wondering if you actually needed to create a separate js file for your local host server. For example:
// Dependencies
var http = require("http");
var fs = require("fs");
// Set port to 8080
var PORT = 8080;
// Create server
var server = http.createServer(handleRequest);
// Create a function for handling requests and responses coming into server
function handleRequest(req, res) {
// Here we use the fs package to read our index.html file
fs.readFile(__dirname + "/index.html", function(err, data) {
// We then respond to the client with the HTML page by specifically telling the browser that we are delivering
// an html file.
res.writeHead(200, { "Content-Type": "text/html" });
res.end(data);
});
}
(add some other stuff)
// Starts server
server.listen(PORT, function() {
console.log("Server is listening on PORT: " + PORT);
});
and of course all of the node modules and npm packages. Any help regarding running the app with a server would be greatly appreciated. Thanks so much!!
I'm having trouble with getting any text to show in the console on Windows. The innerHTML is not updating, so to print e.result is not even working. My mic is being picked up in the browser and I've run the npm commands, apache on xampp is running, not sure what I'm doing wrong. Any ideas?
Could you Codepen it? I and the rest of the comment section can have a look at the code for you
How do we change paragraph? What do we need to speak?
I keep receiving an error 'SpeechRecognition' is not defined no-undef. I use chrome and I'm using webpack to access a server. This error might be because of webpack but can anyone help me? Here is my main.js looks like (following Wes Bos's code):
(function() {
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.interimResults = true;
let p = document.createElement('p');
const words = document.querySelector('.words');
words.appendChild(p);
recognition.addEventListener('result', event => {
const transcript = Array.from(event.results)
.map(result => result[0])
.map(result => result.transcript).join('');
// Create a new container if you make a pause.
if (event.results[0].isFinal) {
p = document.createElement('p');
words.appendChild(p);
}
p.textContent = transcript;
});
recognition.start();
// Start recognition after each pause
recognition.addEventListener('end', recognition.start);
}());
why it keeps on asking me permission to use mic
How stop recognition
this is still not supported in Firefox. Annoying
But thnx man, this is amazing
I have error in Firefox, network error. May be you know, how fix this bug?
That's really cool~!!!!
why didn't it work? Did something change?
Thanks mate.
Im new to programming and I was wondering what I have to watch/do or if I even need that outher stuff that is there from the beginning.
HI Gurgamel,
I hope that I can answer this. The code that is in the index-Start.html file from that beginning of the lesson is necessary to this lesson also.
Wes, is simply reviewing the key final pieces of the puzzle. To cut down on lesson length and repetition of information.
Does that all make sense?
Does Safari support this feature, and what about others like MicroSoft's Edge?
I can't get my app to accurately recognize Spanish speech. I don't want all the code here, but does anyone know if maybe the Spanish is just not that accurate? If so I'll stop banging my head against that wall and just use English.
how can stop that !??
your video is great
but I have a doubt ,
how can I export this text in another js file.
THANK YOU
fs -- FileSystem the node module.
Hello. First of all, Im sorry because my english not very good ;) then:
I wirte this codes in my pc with xampp program and I have 2 problems:
1. In local host, this codes run correctly, but, when I upload this codes in my site, dont run!
2. If I open my site in Samsung internet browser, this codes run, but 1000 times request access for alow to use from microphon and I can afew talk then write.
Love it!
all this browsers support this or not ? or should we go for some external apis like google or microsoft ??
For the transcript, the below code works well:
const transcript = e.results[0][0]['transcript'];
I don't know why we should turn transcript into array then join?
each of the possible translations from speech to text is stored as an index in a 2d array.
that was awesome
is this one works for codova - hybrid app? any other solution plz. tahnx
Seems not working on Android chrome. Any ideas???
Sir how to create search engine using voice recognition?
im sorry but is this for off-line ? or do i need to be in a network
please , i need to know is that free ? , if i use that in video call app ? because i found on google cloud website , i have to pay if i use it for more than 60 mins but it didn't ask for a keyy
Well it's time to put voice control to my website. I am not sure how smart it is but hey, it's a competition. If face Id didn't win it last year, this doesn't have much chance but this combined with image recognition I think will be enough. We will see.
@@tika5635 last year I made an entire API in python with openCV and tensorflow for face identification.... I am a highschool student btw. I got beat by a girl which had a combustor which probably took her 2 weeks to make. Reasons:
1 she was a girl
2 she is wealthy and goes to a private school
3 they thought I downloaded the software (even though I shared the entire code and documented the progress of every day on my chsngelog)
4 I had won the year before that with my smart house prototype project using Arduino
So this year I am making a web app for online learning that will use voice control for interface interaction. It won't be really that complex. I will give it a trigger word of "smart assistant" and it takes the words after that in a command string, which I will explode into every individual word and work out some AI solution which will compare those individual strings and try to find out which command out of an array of commands the user has given.
@@tika5635 also are you Bulgarian or otherwise Eastern European?
hey, I couln't find the server, how can I do it?
i didn't see the source code, does anyone saw where could find this project's source code?
you can sign up for his course (which includes this lesson with source code) for free. Just search for Javascript30 wes bos course
What font do you use in ur IDE?
nice that music
Mine is not working .. please find the below code .. Could any one please help me where i was wrong??
Speech Detection
window.SpeechRecognition = window.SpeechRecognition || Window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.interimResults= true;
recognition.lang = 'en-US';
let p = document.createElement('p');
const words = document.querySelector('.words');
words.appendChild(p);
recognition.addEventListner('result', e =>{
const transcript = Array.from(e.results)
.map(result => result[0])
.map(result => result.transcript)
.join('');
p.textContent = transcript;
if (e.results[0].isFinal) {
p=document.createElement('p');
words.appendChild(p);
}
console.log(transcript);
});
recognition.addEventListner('end', recognition.start);
recognition.start();
html
{
font-size: 10px;
}
body
{
background:#ffc600;
font-family: 'helvwtica neue';
font-weight: 200;
font-size: 20px;
}
.words{
max-width:500px;
margin:50px auto;
background:white;
border-radius:5px;
box-shadow:10px 10px 0 rgba(0,0,0,0.1);
padding:1rem 2rem 1rem 5rem;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
background-size: 100% 3rem;
position: relative;
line-height:3rem;
}
p {
margin: 0 0 3rem;
}
.words:before {
content: '';
position: absolute;
width: 4px;
top: 0;
left: 30px;
bottom: 0;
border: 1px solid;
border-color: transparent #efe4e4;
}
hey there here i uploaded the correct code...u have done a little grammar mistakes
Speech Detection
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.interimResults= true;
recognition.lang = 'en-US';
let p = document.createElement('p');
const words = document.querySelector('.words');
words.appendChild(p);
recognition.addEventListener('result', e =>{
const transcript = Array.from(e.results)
.map(result => result[0])
.map(result => result.transcript)
.join('');
p.textContent = transcript;
if (e.results[0].isFinal) {
p=document.createElement('p');
words.appendChild(p);
}
console.log(transcript);
});
recognition.addEventListener('end', recognition.start);
recognition.start();
html
{
font-size: 10px;
}
body
{
background:#ffc600;
font-family: 'helvwtica neue';
font-weight: 200;
font-size: 20px;
}
.words{
max-width:500px;
margin:50px auto;
background:white;
border-radius:5px;
box-shadow:10px 10px 0 rgba(0,0,0,0.1);
padding:1rem 2rem 1rem 5rem;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
background-size: 100% 3rem;
position: relative;
line-height:3rem;
}
p {
margin: 0 0 3rem;
}
.words:before {
content: '';
position: absolute;
width: 4px;
top: 0;
left: 30px;
bottom: 0;
border: 1px solid;
border-color: transparent #efe4e4;
}
does this work on all browsers ?
I got is to work.
One small problem.. If the browser is in another language, it will only recognize the words that are in the same language as the broweser.
For example, my phone's chrome is in Hebrew so it does not understand the English words.
Same page on my pc - Chrome is in English - it understands only English...
Is there a fix for this?
you can set the language, as Wes does with interimResults. here's my code as a reference:
// initial set up
const recognition = new SpeechRecognition();
recognition.interimResults = true;
recognition.lang = 'en-US';
recognition.maxAlternatives = 1;
you'lll need to find in the docs, how's hebrew described so you can assign it to recognition.lang = 'hb-HW' somehting like that
@@pablowbk thanks a lot.. I've been looking for this
I am a developer which develop without an internet and speechrecognition seems dont work without internet...
In recognition.onerror it return network error
In chrome, the API uses google cloud, so yeah it needs internet access. You can try pocketsphinx.js for an offline soluction.
I tried downloading the pocketsphinx.js zip but don't know how to go about it, can you please explain more with a link or an example tutorial?
Why SpeechRecognition doesn't work for mobile ?
Also it work only on localhost :(
Thanks for help
It only support on chrome or android: developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#Browser_compatibility
Give mi simple site code
Wow awesome code can you shared code
Here's what you can use for the 🦄 unicorn!
When i try to run it with cordova app. It always gives me Network error.
Can you solve this please
Make sure to use whitelist plugin and add an entry for any origin *
@@erikramirez7210 Got it. Trying
gives error on angular component
Because angular and jQuery do not work together...
♥️♥️♥️♥️♥️
Hi,
Does it work on chromium browser ?
Yes, but you have to generate some free keys
see later
WDF
O:
Hey Wes,
I've taken the two speech tutorials and used them to make a "hal9000" that will speak back to you but I'm having an issue.
If I say hello, it says hey back which then kicks off another hey, and another...
I've tried to combat this by adding a start, and stop event to the speechsynthesisutterance which stops and starts the recognition.
The only problem is, when there is no response (msg.text = "") the start never fires which means the recognition never stops and starts back up.
Now the problem is, since Chrome shuts recognition off after a while I have to add another event to fire on recognition end to restart it.
This screws up everything by trying to restart started recognition...
I have been messing with this all day and can't figure it out.
Can you provide any help?
Thank you!!!
github.com/davidhenley/hal9000
David Henley your project looks cool! Did you allready fix your problem?
Have you got this line in your code?
recognition.addEventListener('end', recognition.start);
Sorry if that is a really dumb questions, you are fields ahead of me.
Hi! Great application, but how can I add Speech recognition Depending of the country, for example, "Es_Co", "En_Us" and like this...