Voice Search with JavaScript (Web Speech API)
ฝัง
- เผยแพร่เมื่อ 10 ก.ค. 2019
- Learn how to add Speech Recognition to your websites and web applications with JavaScript, using the Web Speech API.
Speech recognition involves receiving speech through a device's microphone, which is then checked by a speech recognition service and a result is returned as a text string, allowing for further actions to be initiated as a result.
Web Speech API allows for Speech Recognition in the browser, using JavaScript. This opens up many new possibilities regarding user interaction with websites and web applications.
In this video, we use the Web Speech API in order to build a Voice Search feature. In the first few minutes, we create an HTML Google Search Form and we then proceed to exploring the Web Speech API and using JavaScript to implement the Voice Search feature!
Enjoy 🙂
Web Speech API: developer.mozilla.org/en-US/d...
SpeechRecognition: developer.mozilla.org/en-US/d...
Code for this Project: codepen.io/Coding_Journey/pen...
Support the Channel 💙☕🙏
PayPal: paypal.me/CodingJourney
Suggested Videos:
Font Awesome 5 Icons: • Font Awesome 5 Icons
Typing Effect with HTML, CSS and JavaScript: • Typing Effect with HTM...
Simple Auto-Playing Image Slideshow (HTML, CSS and JavaScript): • Simple Auto-Playing Im...
Arrow Swipe Game with HTML, CSS and JavaScript: • Arrow Swipe Game with ...
Thanks for watching! For any questions, suggestions or just to say hi, please use the comment section below!
Codepen: codepen.io/Coding_Journey/
Twitter: / codingjrney
Email: codingjourney123@gmail.com
Subscribe 💖
/ @codingjourney
Brilliant! Thanks mate!!!
awesome and great tutorial.
Thank you very much!
Ευχαριστώ! Μου 'φτιαξες τη μέρα :)
Oooh my pleasure 🙂 Heheh! Τέλεια!!! 💙💙
Thank you so much for this
I am searchin for it! Thanks so much It worked
Amazing! Very glad it helped 🙂
That was awesome, thank man!
Amazing, glad you liked it 🙂💙
it is awesome it really works
Thanks it helps alot
Thank you sir, God bless u..
Very glad you liked it 🙂 Thanks for the lovely message!! 🙏
perfect representation of topic it help me a lot in my project thank you very much
Amazing! Very very glad to hear that 🙂
@@CodingJourney i have question related to this can we store input and output file in any database like mangodb or anyother . after that we can compare it like what i told and what my program write
i want to create use it in translation service so want to fatch my data so for that i want to store my input (may be as a wave or mp3 format )and output simple file
if you have any idea or suggestion please rply
Thanks in advance
Great presentation, Could you please let me know how we can make this work in conjunction with md-autocomplete option ?
Thnk u so much, helped me alot
Superb! My pleasure 💙💙
Super cool, thank you Guruji.
🙏💙💙
Job well executed !
Oh thank you! 🙂
Awesome (from India)
🙏💙💙
Eccelent and well explained
Thanks for the nice words!! Keep coding 🙂
How we can get audio file source to convert it to text without download it
Great video!! :D
Thanks Tyler!! 💙🙏🙂
Good one Sir!
Thank you Sir 😉
Greetings from Ukraine! Thank you for the good work :)
Oh thank you 🙂 warm greetings to Ukraine 💙💙
nice. Thanks a lot
My pleasure, very glad you liked it!! 💙
How to run this code on http because chrome does not allow please provide solution
i want all result for example if i say anything it remove last result and display new one but i want all result in serch box untill i stop speech recognition
please give me some suggestion
Bravo Griego! Added it to my site autocomplete suggest search and works like a charm! Thank you! A siri like sound wave below the bar, while mic is on, would be ultimate. Any ideas where to start?
Heh 😉 Thanks man, very glad you found this useful! Sorry for the late reply btw and I hope that by now you've figured it out because what you are asking is quite complicated and requires some research! There are libraries for this, which might be helpful e.g. the SiriWave(JS): github.com/kopiro/siriwave and here's an example I found after a quick search: siriwavejs.herokuapp.com/ (I think if you inspect the code of this one might help you connect the pieces). Now, if you want to create the audio visualizer from scratch, feel free to do your research and end up with the solution which makes more sense to you!! All the best!!! 💙
awesome video sir
please make this type more video
please
Thank you! Glad you liked it!! Welcome aboard 🙂
In my script onerror function return network
can i change the speech.lang to another language?
nice
Hi,
After giving the code for html as you have done. I am not able to get the voice symbol when it is run live server
Hey, what's up man! In the description you can find a link to the finished project. So you can try opening it and if you can't see the microphone icon then it is a browser support issue. If you can see it then you can compare the finished project's code with yours and figure out the problem. All the best! Keep coding 🙂
sir i have executed the program but the voice search is not working i have to type them manually thn its working pls help ...
sir in the google search the mic is not showing and not working to search please help
great work
Oh thank you! 🙂 Very glad you liked it!!
@@CodingJourney wlc
Thank you, absolutely great tutorial! Does anyone know if this API has a request limit?
Tengo la misma pregunta
Hi,
did anyone use this Web Speech API to fill out a form fields via voice?
Any hints?
th-cam.com/video/5HAF0m2nUQA/w-d-xo.html
It might be helpful
how can I use this to type a document? Can you please help me or make a video on that
Hey man! I think after watching this video you should be able to implement what you want. Unfortunately I don't have the time to create a separate project for every specific request 🙁 Here's a link with Web Speech API demonstration on speech to text. Check whether you are satisfied with the accuracy!
www.google.com/intl/en/chrome/demos/speech.html
All the best, keep coding! 🙂
So it cant work offline, right?
I made this and it didnt work in my pc offline
But it works offline in my Android phone! Why?
Whats goin' on?
Is there specific thing in my Android phone's Local storage??? Can it add to Windows to work offline???
I have many questions!!! Help!!!
I also made this thing and then uploaded to a free host (my website) but it didnt work!!!
It just works online in local storage!
Its not work over the Internet for me
Why?
Pls answer to all my questions
Tnx
Brilliant work.
One small doubt, what if I want to search a html file in my directories.
same question..please answer if u solved this
thanks for this amazing video
my browser is chrome and its not working and says in console.log ( Uncaught TypeError: Cannot read property 'querySelector' of null)
please help me to solve this problem
Hey thanks, glad you liked it! It is very difficult to debug without looking at the code, however this error implies that you are trying to access a null object. Make sure there isn't any typing error and also note that:
const searchForm = document.querySelector("#search-form");
const searchFormInput = searchForm.querySelector("input"); // document.querySelector("#search-form input");
Also make sure that you include the at the end of the or in the using the "defer" attribute in order to ensure that DOM content has been loaded before trying to access it!
You can also find a link to the code for this project in the description. Good luck!!
thank you so much for your help, please make next tutorial for voice assistance have custom response like these videos ( th-cam.com/video/gnz9X3SSQyY/w-d-xo.html ), ( th-cam.com/video/JIrSueiHXcs/w-d-xo.html ) I like your explanation, i hope you will make as soon as possible
If two persons are there , can it recognise the person who is speaking ?
Hi! I think, up to this point, Web Speech API is trying to recognize what is being said (the words) and not who is saying it.
Gujarati will understand the early song
Awesome but it is difficult
Thanks mate! I agree but practice makes it easier 🙂 All the best, keep coding!!