{"id":21133,"date":"2019-12-20T09:05:52","date_gmt":"2019-12-20T14:35:52","guid":{"rendered":"https:\/\/www.solutionanalysts.com\/blog\/how-to-implement-voice-recognition-feature-in-ionic-application\/"},"modified":"2024-09-30T03:54:14","modified_gmt":"2024-09-30T09:24:14","slug":"how-to-implement-voice-recognition-feature-in-ionic-application","status":"publish","type":"post","link":"https:\/\/www.solutionanalysts.com\/blog\/how-to-implement-voice-recognition-feature-in-ionic-application\/","title":{"rendered":"How to Implement Voice Recognition Feature in Ionic Application"},"content":{"rendered":"

When it comes to developing enterprise-grade apps that can run seamlessly across multiple platforms including iOS, Android, and even desktop, Ionic Application remains a choice of many app developers. It is possible to develop mobile apps<\/a> as well as PWA (Progressive Web Apps) by using a single codebase thanks to the Ionic platform.<\/p>\n

Ionic Native, a TypeScript wrapper for Cordova\/PhoneGap<\/a> plugins, is useful for adding native functionality in the Ionic mobile app with ease. It wraps plugin callbacks in an observable or a Promise while providing a common interface for different plugins. What\u2019s more, Ionic Native ensures that native events trigger the change detected in Angular.<\/p>\n

Let\u2019s take an example of a voice recognition feature. At times, an Ionic Application needs to capture the user\u2019s voice. Cordova Speech Recognition plugin can help integrate this feature in the Ionic Application<\/a>. This plugin requires Internet access and works by recording the user\u2019s voice. It returns an array of matches to enable the app to do numerous things.<\/p>\n

Here is a concise guide to implementing Voice or Speech Recognition feature in the Ionic app<\/strong><\/a> and get an array of possible matches.<\/p>\n

<\/span>Installation Method of Ionic Application<\/strong>–<\/span><\/h2>\n

In the project folder, run the following 2 commands:<\/p>\n

\"cordova<\/p>\n

The plugin provides 5 methods to handle speech recognition.<\/p>\n

<\/span>(i) isRecognitionAvailable()<\/strong><\/span><\/h3>\n

This method checks the availability of a speech recognition feature on the device or not by returning a Boolean value of a success callback.<\/p>\n

\"Ionic<\/p>\n

<\/span>(ii) hasPermission()<\/strong><\/span><\/h3>\n

\"Ionic<\/p>\n

This method verifies if the application has permission for usage of the microphone. The result of success callback is a Boolean.<\/p>\n

\"Ionic<\/p>\n

<\/span>(iii) requestPermission()<\/strong><\/span><\/h3>\n

This method requests access permission to system resources if it was not granted before.<\/p>\n

\"requestPermission\"<\/p>\n

<\/span>(iv) getSupportedLanguages()<\/strong><\/span><\/h3>\n

This method retrieves the list of supported languages in array form.<\/p>\n

\"Ionic<\/p>\n

<\/span>(v) startListening()<\/strong><\/span><\/h3>\n

This method starts the process of speech recognition. This method has options as parameter, with the following options available:<\/p>\n

\u2022 language {String}: used language for recognition (default “en-US”)
\n\u2022 matches {Number}: number of return matches (default 5, on iOS: maximum number of matches)
\n\u2022 prompt {String}: displayed prompt of listener popup window (default “”, Android only)
\n\u2022 showPopup {Boolean}: display listener popup window with prompt (default true, Android only)
\n\u2022 showPartial {Boolean}: allow partial results to be returned (default false)<\/p>\n

\"Ionic<\/p>\n

There is a difference between Android<\/a> and iOS platforms. On Android speech recognition stops when the speaker finishes speaking (at the end of the sentence). On iOS, the user has to stop manually the recognition process by calling stopListening() method.<\/p>\n

\"<\/p>\n

<\/span>Concluding Lines<\/strong><\/span><\/h2>\n

Hope this article will assist you in integrating the voice recognition feature in an Ionic app. Cordova Speech Recognition plugin can check whether speech recognition is available for the device and developers can add a \u2018Request Permission\u2019 for a microphone usage in the device if necessary.<\/p>\n

Once the Ionic app gets a microphone usage permission, one can start listening to the speech that comes with an array of matching words. The user can perform various functions like changing the background and finding a particular movie through this feature.<\/p>\n

\"Ionic<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

When it comes to developing enterprise-grade apps that can run seamlessly across multiple platforms including iOS, Android, and even desktop, Ionic Application remains a choice of many app developers. It is possible to develop mobile apps as well as PWA (Progressive Web Apps) by using a single codebase thanks to the Ionic platform. Ionic Native, […]<\/p>\n","protected":false},"author":1,"featured_media":21143,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[199,108,201],"tags":[],"class_list":["post-21133","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ionic","category-mobile-app","category-phonegap"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.solutionanalysts.com\/blog\/wp-json\/wp\/v2\/posts\/21133","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.solutionanalysts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.solutionanalysts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.solutionanalysts.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.solutionanalysts.com\/blog\/wp-json\/wp\/v2\/comments?post=21133"}],"version-history":[{"count":3,"href":"https:\/\/www.solutionanalysts.com\/blog\/wp-json\/wp\/v2\/posts\/21133\/revisions"}],"predecessor-version":[{"id":40061,"href":"https:\/\/www.solutionanalysts.com\/blog\/wp-json\/wp\/v2\/posts\/21133\/revisions\/40061"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.solutionanalysts.com\/blog\/wp-json\/wp\/v2\/media\/21143"}],"wp:attachment":[{"href":"https:\/\/www.solutionanalysts.com\/blog\/wp-json\/wp\/v2\/media?parent=21133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.solutionanalysts.com\/blog\/wp-json\/wp\/v2\/categories?post=21133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.solutionanalysts.com\/blog\/wp-json\/wp\/v2\/tags?post=21133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}