in this session How to add a voice search which is one of the 2019 technology trends and its necessary to optimize your website for voice search. Voice search/speech recognition queries multiplied by 35 times now and its expected that by 2020, 50% of search will be driven by voice.
In this web development tutorial looking at this trend, I have showed a simple step by step tutorial in an angular project by which you can easily add a voice search in your website in just 5 minutes and help on digital marketing, social media marketing and seo.
SOURCE CODE : git@github.com:kalyan11021980/angular-ssr-starter.git. in SP2 branch
-~-~~-~~~-~~-~-
Please watch: "Angular elements web components with angular 7/6"
-~-~~-~~~-~~-~-
If you any issue or if you have any question related to your custom implementation don’t hesitate to ask me. I will try my best to answer and resolve.
BlackBox Tech I couldn’t access the link. It won’t work
Sir….Plz make a video tutorial how to implement these code in to WordPress website….
I have used the POC and built a search functionality and it works like Charm. Thanks Black Box Tech.
I was facing some issues regarding the lexical scoping and hence used => for the same. Also after calling the API angular binding was an issue. We can use the code below for the same:
vSearch.onresult = (e) => { => helps to maintain the ‘this’ scope as the class scope
this.searchTerm = e.results[0][0].transcript;
this.addToBasketService(this.searchTerm);
vSearch.stop();
}
this.zone.run(() => { // <== added This helped to rerun the angular bindings and ensure the model is updated properly });
Does this work with wordpress?
Yes it will work with WordPress. It’s just simple JavaScript with html5 api
Can we Search through Voice within our Website? Or this will redirect only to Google Search?
yes its upto you where you want to use this feature as simply coverting your voice as text and you can use that text and pass that to your in app search function
@BlackBox Tech how can i contact you?
You can send me an email blackboxtechvideos at gmail.com
I have performed the same code step by step but i m not getting the result even though there is no error showing…i m using angular 7.0 with windows
hi Ayush in the video description, I have shared the code url. could you please download and try in your PC and let me know.
you just need to correct the name of the function in html page to voiceSearch()
@BlackBox Tech : I’m not able to find the code url could you please send me across.
Thanks Bro for Your tutorial
unfortunately it is not working in Safari. Do you have any alternative ? Thanks !
thanks master, nice tutorial. i add BrowserTransferStateModule in app.module.ts and then run successfully, thank you..
Thank you so much for your kind help!
Can u please update the repo link again. its not working.
Can this feature be used to show contents of our website rather than redirecting to google?
I just want you and your family family and dinner
I think you can do it
Yes i just try it ! you need to remove hidden option from the . remove also voiceSearchForm.submit();
Hi I pulled Sp2 branch. On executing line vSearch.start(), Microphone is blocked. I get error in browser ‘This page has been blocked from accessing your microphone’. I am trying to run this in office laptop. I have disabled Microphone’s ‘Blocked’ option in browser setting too. Still I face same issue
Great video sir!
Glad you liked it!
Can you please write HTML code in the comment box? so anyone can copy-paste it.
Thanks