Hey zenorocha, super great element I have there. In fact, I wrote a blog introducing your component solely on Vaadin blog platform. You can check it out -> https://vaadin.com/blog/a-voice-component-for-your-next-web-app

We were having a blast while testing this element, especially when I start to put those tongue twisters sentences in different languages and let the element speak.

It would be really cool if the original author can drop a comment down below in the blog comment section, or in this tweet if you prefer something quicker.

Cheers!

When the Speech Recognition is not supported on the browser, the element throws a TypeError because it tries to set a sub-property to its recognition property that is undefined.

Tested on Firefox 58.0.2

There is 2 questions I would like to ask about this snippet.

Why the voice-recognition element is working?

Due to the prefix increment of i in the for-loop, I expect a TypeError because cannot read "0" of undefined no matter is the array length. I added a log and the i variable seems incremented after a loop.

Do we need a for-loop?

I think what we need is simply read the last entry of the results array. AFAIK, the resultIndex variable is the index of the last result received. So the for-loop do 1 loop on the last entry right?

Thanks to help me to understand how it's working. 👨‍🎓

When i try to change the accent atributte, simply doesnt work!, and i have no bad code because in the voice-element page in "me gusta la gasolina" example dont change the accent.
My personal computer is in spanish, and the accent sound in spanish, but at work, (deutsch computer) sounds in english accent,I try to change accent in but nothing change

hi, I think this is awesome that you have implemented voice-elements. I got to hear the presentation at JS.LA a while back. I am testing the voice-player out for a class project and it is crashing when I try to play a string > about 306 or 308 characters.
after the crash, even if I refresh my browser, the voicePlayer.speak() function does not recover. if I restart my webserver, the speak() function will recover. I don't know where to search for error messages. thanks.
(Chrome 44.0 on Mac OSX 10.10.4)

bower.json

"dependencies": {"polymer": "Polymer/polymer#~0.3.1"}

I have tested with 0.4.0 and voice-elements still works. This limitation prevents users from using 0.4.0.

"dependencies": {"polymer": "Polymer/polymer>=0.3.1"}

Will correct this.

In firefox, the code below throw a TypeError : this.speech is undefined

textChanged: function() {
                this.speech.text = this.text;
},

Some controls should be welcome in order to don't crash all app when this.speech is not initialize in created function.
like

textChanged: function() {
    if ( this.speech) {
                this.speech.text = this.text;
   }
},

Hi everyone,

I'm having some trouble implementing in my Polymer app. It's based on Polymer's quiz demo app and I'm trying to use the voice recognition element to submit answers. This is my code:

<link rel="import" href="../quiz-base.html">
<link rel="import" href="../../paper-input/paper-input.html">
<link rel="import" href="../../voice-elements/voice-player.html">
<link rel="import" href="../../voice-elements/voice-recognition.html">

<polymer-element name="quiz-voice-recognition" extends="quiz-base">
<template>

<style>  
:host {
padding: 40px;
}

:host-context(.wide) {
width: 304px;
margin: 0 auto;
}

paper-input {
width: 100%;
height: 48px;
}

core-icon[icon="av:mic"] {
width: 120px;
height: 120px;
}  
 </style>

<div>{{quiz.start}}</div>

<voice-recognition id="recognition-element"></voice-recognition>

<script>
var form = document.querySelector('#recognition-form'),
input = document.querySelector('#recognition-input'),
element = document.querySelector('#recognition-element');
form.addEventListener('submit', function(e) {
e.preventDefault();
element.start();
});
element.addEventListener('result', function(e) {
input.textContent = e.detail.result;
});
</script>

<form id="recognition-form">
<fieldset>
<textarea id="recognition-input" readonly=""></textarea>
</fieldset>
<fieldset>
<button id="recognition-submit">Start!</button>
</fieldset>
</form>

<div>{{quiz.end}}</div>
</template>

<script>
Polymer('quiz-voice-recognition', {

eventDelegates: {
'input': 'answered'
},

isCorrect: function() {
return this.areEqual(this.value, this.quiz.answer);
},

areEqual: function(s1, s2) {
return s1 && s2 && s1.trim().toLowerCase() === s2.trim().toLowerCase();
}

});
</script>
</polymer-element>

Everytime I load the page I get the following error and when clicking the submit button it doesn't trigger the authorization popup to enable voice recognition as seen in the demo site: Uncaught TypeError: Cannot read property 'addEventListener' of null

Hello
I am making text Pronunciation web application for language learning.
if i use "voice-elements" can i check user Pronunciation. When user read some text, sentence or word
application give score for user Pronunciation.

How about Pronunciation training and assessment in "voice-elements" ?

I am having one word being pronounced as a similar word. I would like to know how to make the input word "project" to be defined as a works in the making or as in a media "project".

This idea is intended to optimize web browsing on AR-like devices such as Google Glass. However it could just as easily be used on phones.

End Goal:

               <a-voice ph="fuh-net-ik" href="...">phonetic name</a-voice>

ph = phonetic attribute -> could be used to optimize voice based search engines later

Anyhow thanks @zenorocha for suggesting I post this as an "issue" lol

Thank you for sharing this.
Is it possible to specify if the text is spoken by a female or male voice?

Is there the ability to script these in ?
For example "full stop" or "new paragraph" or "delete"

I tried "full stop" and it worked. But its not in your code, so its part of the google code ?

I woudl like to extend at the script level so that when a control word is said, i can react

I want to first congratulate the project is truly splendid.

I would be pergutar is compatible with android or other mobile OS. I could just use google chrome.

Create a version using Polymer 2 could be nice.

Maybe @zenorocha recommends to use OBVI on Polymer 2 app?

On my app, I have a button to start and stop voice recognition.

("Parlez" = "Speak now")

The purpose is simply to fill an input form. On browser everything is working well. The user starts and stops the audio capture when they wants.

On my Nexus 5, the mobile phone itself stops the capture. Moreover, the end event is not thrown and the result event is twice. As the app is waiting for end event to update the button style, it's never updated.

Current behaviors

• mobile phone stops the audio capture even when continuous attribute is true
• result event is fired twice when mobile phone stops the capture

Expected behaviors

• mobile phone records the voice continuously when continuous attribute is true
• result event fired only once

Nexus 5
Android 6.0.1
Chrome mobile
Polymer 1.9.1

I like this project and its a great one. the current version supports English only in . no OPTIONS for recognizing other language. I hope you can add this option in coming versions. thanks

Hi, I am having a pestering problem where the last result get's appended to the current result, the more times I trigger the element, the way I solved this was by keeping a track of how long the last e.detail.result was and accordingly substring out that length from the next result, but this is a sure shot way of creating memory leaks, or unnecessary computation.

Is it possible to clear the internal results after a on-result is triggered. Thanks.

As requested by @marefat17

Because my whole project doe not use bower, and also, can I use it with webpack?

Thanks

I click on the start button and nothing happens afterward I allow access to my mic.

How can i use this from mobiles also?

• https://github.com/Polymer/polymer/releases/tag/0.2.3

This is an awesome element, Just curios to know if you guys are going to upgrade it in Polymer 2.0?

It may be possible to support Safari and iOS

http://caniuse.com/#feat=web-speech says no

but there is Apple browser support

https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/PlayingandSynthesizingSounds/PlayingandSynthesizingSounds.html

and this answer on Stack suggests so..

http://stackoverflow.com/questions/12517000/no-sound-on-ios-6-web-audio-api/12569290#12569290

It seems in the demo, when I insert certain characters (such as a number with a decimal like "59.1") The demo breaks and nothing on the page will function until I completely close and re-open chrome. Is there anything error handling or checking for not supported characters? Is this something to take up with the polymer component, if so where does that live?

This is amazing, I think it will be huge for web accessibility.

I want the option of having them available alongside the finalized results.

Bug 1 : The event textChanged should play the new text in autoplay=true mode.
The solution is something like that (int voice-player)

 textChanged: function() {
                this.speech.text = this.text;
                if (this.autoplay) {
                    this.speak();
                }
            },

Bug 2 : In autoplay=false, is not possible to call speach function with the current text
Each time it play the old one, because the event textChanged, arrive after the speachTextChanged
like this sample

  <template>
     <core-input inputValue="{{searchText}}"></core-input>
    <paper-icon-button icon="search" on-tap="{{speachButtonHanlder}}"></paper-icon-button>
     <voice-player id="search_notif_vocal" text="{{speachText}}" accent="en-US" autoplay="true"></voice-player>
  </template>
  <script>
       ...
            speachButtonHanlder : function (e) {
               this.$.search_notif_vocal.setAttribute("text", this. speachText);
                this.$.search_notif_vocal.speak();
            },
       ...
  </script>

This code play all the time the old Text.

I believe it would be a very interesting feature if it were possible to generate an audio file. Someone know how I can do that?

I realize that when I make a speak() call when another audio is playing it doesn't work anymore. If I reload the page it works again until I call speak twice and I don't wait for the audio to stop.

Probably it is a Web Speech API problem.