Using ionic with polymer voice elements


#1

I’m trying to use https://zenorocha.github.io/voice-elements/ (https://github.com/zenorocha/voice-elements) with ionic to provide text to speech and speech to text functionality in my ionic app. Not sure if there’s a better approach for speech to text and text to speech.

I’m using one of their samples from the above page to test it out:

   <head>
                <script src="lib/ionic/js/voice-elements/platform.js"></script>
                <link rel="import" href="lib/ionic/js/bower_components/polymer/polymer.html"></script>
                <link rel="import" href="lib/ionic/js/voice-elements/polymer-body.html"></script>
                <link rel="import" href="lib/ionic/js/voice-elements/voice-player.html"></script>
                <link rel="import" href="lib/ionic/js/voice-elements/voice-recognition.html"></script>
        </head>
        ...
    <ion-content>
          <voice-player autoplay text="Welcome to the jungle! hahaha just kidding!"></voice-player>
    </ion-content>

In Chrome, the voice is successfully playing but as soon as I click on a text box I get the below error and anything I type does not show up in the textbox.

I’m getting the following error trace in my js console when I click on a text box:

tapClick mouseup BUTTON (1207,191) ionic.bundle.js:2556
clickPrevent BUTTON ionic.bundle.js:2580
tapClick mouseup INPUT (639,90) ionic.bundle.js:2556
Uncaught InvalidStateError: Failed to execute 'dispatchEvent' on 'EventTarget': The event provided is null. events.js:182
m events.js:182
C.dispatchEvent events.js:718
ionic.EventController.trigger ionic.bundle.js:482
(anonymous function) ionic.bundle.js:3835
(anonymous function) ionic.bundle.js:3038
(anonymous function) ionic.bundle.js:4490
ionic.views.Scroll.ionic.views.View.inherit.__publish ionic.bundle.js:5359
ionic.views.Scroll.ionic.views.View.inherit.scrollTo ionic.bundle.js:4837
ionic.views.Scroll.ionic.views.View.inherit.doTouchEnd ionic.bundle.js:5255
(anonymous function) ionic.bundle.js:4212
s events.js:329
r events.js:268
o events.js:221
m events.js:178
clickPrevent INPUT 

Is Ionic compatible with Polymer? Should I be using a different approach? Will a polymer component like this work on an iPhone / Android?


#2

Hi, found any solution for this? :smile: