Having trouble launching the SpeechRecognition feature on Ionic Cordova for Macdonst?

TL; DR: The app wasn't working because I was using it on Android 6.0 and needed to manually grant microphone access permission.

Here's the story: I set out to develop an Ionic app that utilizes speech recognition with this plugin: https://github.com/macdonst/SpeechRecognitionPlugin

But for some reason, it just wouldn't cooperate?

To start off, I created a new Ionic project:

ionic start cordova-speech blank

I then navigated into the newly created folder and added the plugin:

cordova plugin add https://github.com/macdonst/SpeechRecognitionPlugin

Next, I included the android platform.

This is what my HTML file looked like:

<body ng-app="starter">
    <ion-pane ng-controller="AppCtrl">        
      <ion-content class="padding">     
        <button class="button button-full button-positive" ng-click="record()">
          Record
        </button>
        <div class="card">
          <div class="item item-text-wrap">
            {{recognizedText}}
          </div>
        </div>
      </ion-content>
    </ion-pane>
</body>

As for my app.js file:

angular.module('starter', ['ionic'])

.controller('AppCtrl', function($scope) {
  $scope.recognizedText = '';

  $scope.record = function() {
    alert("step1");

    var recognition = new SpeechRecognition();
    alert("step2");

    recognition.onresult = function(event) {
      alert("step3");

        if (event.results.length > 0) {
            $scope.recognizedText = event.results[0][0].transcript;
            $scope.$apply();
        }
    };
    recognition.start();
    alert("step4");

  };
});

In order to debug (as debugging this feature in the browser isn't possible), I inserted some alerts into the code. However, upon pressing the record button, only the first and second alert would show up. It appears that there is a problem with the onresult section. What could be causing this issue?

I am running Android 6.0

After performing an adb logcat, here are the results:

...

UPDATE: I tried installing

cordova plugin add cordova-plugin-chrome-apps-audiocapture --save
cordova plugin add org.apache.cordova.media

Some sources suggested removing the

<uses-permission android:name="android.permission.RECORD_AUDIO" />

from both the speechrecognition and cordova media plugins, but unfortunately, this did not resolve the issue. Although the fourth alert now executes, it still omits alert 3, indicating a lingering problem within the onresult function.

Answer №1

When you come across this line in the log:

02-14 03:39:29.569 30081 30096 E RecognitionService: call for recognition service without RECORD_AUDIO permissions

It indicates that you must grant permissions to record audio in your application. To do so, you can include the plugin org.apache.cordova.media

cordova plugin add org.apache.cordova.media 

as detailed here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporate a dynamic PowerPoint presentation directly onto my website

In my situation, on the client side, users can select image files (jpg|png|gif), PDF files, and PPT files which are then stored in a database. When viewing these selected files in the admin panel, I am using conditional statements to display them appropr ...

How to Conceal Axis Label in an HTML5 Canvas Line Chart

Is there a way to hide the x-axis label from a line chart without hiding the y-axis label as well? I tried using scaleFontSize: 0,, but that ended up hiding both axis labels. I only want to hide the x-axis label. var lineOptions = { ///Boo ...

Is it possible to obtain a reference that can call an operator?

Is it possible to obtain a reference to an operator (like ===) in TypeScript? The reason behind this question is the following function: function dedup<T>(values: T[], equals: (a: T, b: T) => boolean): T[] { return values.reduce<T[]>((pre ...

Issues with rendering alpha transparency correctly in Three.js png textures can be frustrating. Sometimes, the alpha

For my project, I am working on creating a cube and applying 6 different textures to each of its faces. These textures are .png files with transparent parts. Additionally, I want to apply a color to the cube and have that color show through the transparent ...

The Issue of Promises Chaining in Vue That is Causing Unexpected Behavior

Can’t seem to figure out what I’m missing here, so reaching out for help. Simply put, I want to achieve this in Vue (https://codesandbox.io/s/6zlmkm61m3) function p1() { return new Promise((resolve, reject) => { console.log('p1') ...

Tips for saving the visibility status of a <div> in your browser bookmarks?

Currently, I am in the process of developing a single webpage (index.html). The navigation bar at the top includes links to hash references (DIV IDs). If JavaScript is enabled, clicking on these links triggers a JavaScript function with the onclick attribu ...

Incorporating Angular, Angular UI, and Typescript while using the "controller as" approach

I'm having trouble with the combination in the topic, there must be a minor mistake somewhere that's causing this issue. Controller: class JobCtrl { job: Object; public $inject = ['$log', '$resource', &apos ...

Transferring data between different components in Angular 5

Presently, I am working with two distinct components within my project - a navigation component and a detail component. The navigation component contains several options or items that the user can select. Upon selection by the user, I am attempting to upda ...

Tips for accessing and displaying JSON data using jQuery

Data in JSON format: [ { "ID":"25", "Serial":"1", "Purchase_id":"8", "Item":"23", "Unit":"1", "HSN":"84212120", "Quantity":"10", "Purchase_rate":"100", ...

Ember JS: Master of Controlling

I am working with the following controllers: clusters_controller.js.coffee Portal.DashboardClustersController = Ember.ArrayController.extend dashboard_controller.js.coffee Portal.DashboardController = Ember.ArrayController.extend In my template, I am ...

Struggling to make image uploading function with Flask and JQuery

Utilize the code snippet below to submit forms and retrieve a modified version of text from Flask using AJAX and JQuery: from flask import Flask, render_template, request, jsonify app = Flask(__name__) @app.route('/') def index(): return re ...

Mapping an array to another array using AngularJS

I am working with two arrays - Users and Employments. Here is how they are structured: Users = [{id:1, name: "ryan"}, {id:2, name:"Julie"}] Employments = [{user_id: 1, title: "manager"}, {user_id: 2, title: "Professor"}] My goal is to display the E ...

I am having trouble with npm due to an incorrect configuration

Whenever I attempt to utilize the npm package manager for our JavaScript project, I use the following command: npm start However, I encounter the following error message: npm ERR! code E418 npm ERR! 418 Unknown - GET https://repo.huaweicloud.com/reposit ...

Failed to run react-native on Android

Server Update: Information - JS server is currently running. Installing the application... Task List: @react-native-community_datetimepicker:compileDebugJavaWithJavac react-native-fbsdk:compileDebugJavaWithJavac react-native-gesture-ha ...

What is the process of compiling a Vuejs single file component?

Seeking assistance with Vuejs 2 (webpack-simple template) - I am looking for a way to compile my template before rendering it. Below is the code snippet in question: App.vue <template> <div id="app"> <h1>{{ msg }}</h1> ...

'Error: "req.headers" is not functioning properly' encountered when attempting to send headers from client to a Node.js server

I am encountering an issue with passing headers from the frontend UI to the backend through a proxy server and Application API call. The error message TypeError: req.headers is not a function keeps showing up. Can someone please advise on what I might be m ...

Transfer a concealed input value to javascript using the href attribute

I have a question about using javascript to handle the href attribute. Here is the code snippet I am working with: <script> window.onunload = refreshParent; function refreshParent() { var SAPno = document.getElementById('Hidden ...

How to effectively utilize JSON responses with jQuery Mobile?

I've been facing an issue with working on my JSON result in JavaScript. Can anyone provide some insight? Even though the JSON call returns a success status code (200) and I can view the data in Firebug, no alert is being displayed. $(document).on(& ...

The variable in ng-init within ng-repeat becomes desynchronized

I used the ng-repeat method to list some items and included a nested ng-repeat. To keep track of my outer $index, I utilized ng-init. <div class="row" ng-repeat="product in products" ng-if="$index % 2 == 0" ng-init="current = $index"> <div c ...

Creating a "Container" component in Vue.js step by step

As a newcomer to Vue, I am facing a challenge in implementing a wrapper component similar to React's 'Wrapper' component. Specifically, I want to create a reusable datagrid component using a 3rd-party some-table component and a pagination co ...