{"id":6728,"date":"2017-08-14T04:00:15","date_gmt":"2017-08-14T04:00:15","guid":{"rendered":"https:\/\/assignment.essayshark.com\/blog\/?p=6728"},"modified":"2022-01-10T16:52:09","modified_gmt":"2022-01-10T16:52:09","slug":"recognition-speech-sample-voice-recognition-and-reading-text-in-the-browser","status":"publish","type":"post","link":"https:\/\/assignmentshark.com\/blog\/recognition-speech-sample-voice-recognition-and-reading-text-in-the-browser\/","title":{"rendered":"Recognition Speech Sample: Voice Recognition and Reading Text in the Browser"},"content":{"rendered":"<p>Voice recognition is one of the symbols of opportunity that the modern world gives us. Thanks to Siri and Google, this technology is now being developed day by day. But it is present not only in the mobile assistant. Have you ever noticed the microphone icon on the right of the Google search box?<\/p>\n<p><a href=\"https:\/\/assignmentshark.com\/blog\/wp-content\/uploads\/2017\/03\/voice-recognition-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6730\" src=\"https:\/\/assignmentshark.com\/blog\/wp-content\/uploads\/2017\/03\/voice-recognition-1.png\" alt=\"\" width=\"651\" height=\"55\" srcset=\"https:\/\/assignmentshark.com\/blog\/wp-content\/uploads\/2017\/03\/voice-recognition-1.png 651w, https:\/\/assignmentshark.com\/blog\/wp-content\/uploads\/2017\/03\/voice-recognition-1-300x25.png 300w\" sizes=\"auto, (max-width: 651px) 100vw, 651px\" \/><\/a><\/p>\n<p>Voice Recognition is available in the browser thanks to the power of a new experimental JavaScript API \u201cwebkitSpeechRecognition\u201d.<!--more--><\/p>\n<p><strong>Voice recognition<\/strong><\/p>\n<p>The scheme of work of Webkit Speech Recognition is quite simple from the client perspective. It is a &#8220;black box&#8221; that automatically processes the spoken words and provides a simple string, with which you can work in the future:<\/p>\n<p>[code language=&#8221;javascript&#8221;]<br \/>\n\/\/ create the recognizer<br \/>\nvar rec = new webkitSpeechRecognition();<\/p>\n<p>\/\/ recognize the speec before the client begins to say something<br \/>\nrec.interimResults = true;<\/p>\n<p>\/\/ specify the language to be recognized<br \/>\nrec.lang = &#8216;en-En&#8217;;<\/p>\n<p>\/\/ use the callback to work with results<br \/>\nrec.onresult = function (event) {<br \/>\n  var res = event.results[event.resultIndex];<br \/>\n  if (res.isFinal) {<br \/>\n    alert(&#8216;You said: &#8216; + res[0].transcript);<br \/>\n  } else {<br \/>\n    console.log(&#8216;Temporary result: &#8216;, res[0].transcript);<br \/>\n  }<br \/>\n};<\/p>\n<p>\/\/ start listening<br \/>\nrec.start();<br \/>\n[\/code]<\/p>\n<p>The detailed documentation can be found on the Mozilla Developer Network. However, the spotty support in browsers is not so gladdening. Today, the recognition is only supported by Opera and Chrome.<\/p>\n<p><a href=\"https:\/\/assignmentshark.com\/blog\/wp-content\/uploads\/2017\/03\/voice-recognition-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6732\" src=\"https:\/\/assignmentshark.com\/blog\/wp-content\/uploads\/2017\/03\/voice-recognition-2.png\" alt=\"\" width=\"880\" height=\"338\" srcset=\"https:\/\/assignmentshark.com\/blog\/wp-content\/uploads\/2017\/03\/voice-recognition-2.png 880w, https:\/\/assignmentshark.com\/blog\/wp-content\/uploads\/2017\/03\/voice-recognition-2-300x115.png 300w, https:\/\/assignmentshark.com\/blog\/wp-content\/uploads\/2017\/03\/voice-recognition-2-768x295.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/a><\/p>\n<p><strong>Voice recognition<\/strong><\/p>\n<p>The other API \u201cspeechSynthesis\u201d has much better support. You can run it not only in Chrome and Opera but in Safari, in Firefox and even in the latest Microsoft Edge.<\/p>\n<p>Usage is reduced to thereby three lines in pure JavaScript:<\/p>\n<p>[code language=&#8221;javascript&#8221;]<br \/>\nspeechSynthesis.speak(<br \/>\n  new SpeechSynthesisUtterance(&#8216;Hello world!&#8217;)<br \/>\n);<br \/>\n[\/code]<\/p>\n<p>You can also choose the voice and adjust a lot of other options which are written in detail in MDN:<\/p>\n<p>[code language=&#8221;javascript&#8221;]<br \/>\nvar voice = speechSynthesis.getVoices();<br \/>\nvar phrase = new SpeechSynthesisUtterance(&#8216;What&#8217;s up?);<br \/>\nphrase.voice = voices[1];<br \/>\nspeechSynthesis.speak(phrase);<br \/>\n[\/code]<\/p>\n<p>Thanks for your attention!<\/p>\n<blockquote><p><em>The presented assignment is a recognition speech sample created by our programming experts. We wish to remind you that you are not allowed to use any parts of this assignment or any other article posted on our blog without proper references to the source, because it will be considered as a violation of copyright law. In case you need help with your HTML assignment, you can always place your order to get expert help from our programming professionals. All you need to do is fill in a short order form at the top of the page and relax. \ud83d\ude42<\/em><\/p>\n<p><em>After you have placed your order and specified your instructions, our experts start bidding for it. You can choose the expert you like the most based in his or her profile information. A profile typically contains each expert\u2019s rating, feedback from previous customers and number of orders completed. You can also ask additional questions via the live chat if you still have some. When everything is settled with the preparation for the order, all you need to do is just relax and wait for your personal recognition speech sample to be made. We know that learning can be difficult and challenging, and we will gladly provide <a href=\"https:\/\/assignmentshark.com\/\" target=\"_blank\" rel=\"noopener\">online assignment help<\/a> for you to make it easy and enjoyable.<\/em><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Voice recognition is one of the symbols of opportunity that the modern world gives us. Thanks to Siri and Google, this technology is now being developed day by day. But it is present not only in the mobile assistant. Have you ever noticed the microphone icon on the right of the Google search box? Voice [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[53,35],"tags":[],"class_list":["post-6728","post","type-post","status-publish","format-standard","hentry","category-it","category-samples"],"_links":{"self":[{"href":"https:\/\/assignmentshark.com\/blog\/wp-json\/wp\/v2\/posts\/6728","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/assignmentshark.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/assignmentshark.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/assignmentshark.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/assignmentshark.com\/blog\/wp-json\/wp\/v2\/comments?post=6728"}],"version-history":[{"count":6,"href":"https:\/\/assignmentshark.com\/blog\/wp-json\/wp\/v2\/posts\/6728\/revisions"}],"predecessor-version":[{"id":12947,"href":"https:\/\/assignmentshark.com\/blog\/wp-json\/wp\/v2\/posts\/6728\/revisions\/12947"}],"wp:attachment":[{"href":"https:\/\/assignmentshark.com\/blog\/wp-json\/wp\/v2\/media?parent=6728"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/assignmentshark.com\/blog\/wp-json\/wp\/v2\/categories?post=6728"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/assignmentshark.com\/blog\/wp-json\/wp\/v2\/tags?post=6728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}