Sorry, your browser does not support the Web Speech API :(
35 |
45 | A couple of Web Components that can do
amazing stuff using the Web Speech API
46 |
48 | 50 | 52 |
53 |$ bower install voice-elements68 | Fork on GitHub 69 | Download as ZIP 70 |
Provides you a simple DOM API to do speech synthesis (text to speech).
80 | 81 | 82 |In the following demo, we set some content into the text attribute. Then, by using the autoplay attribute, the voice is played when the element loads.
83 | 84 |Reload the page to hear it again.
88 |<voice-player autoplay text="Welcome to the jungle! hahaha just kidding!"></voice-player>In the following demo, we define a different language by using the accent attribute. When the button is clicked, we call the speak method to trigger the audio.
94 | 95 |<voice-player id="mi-elemento" accent="es-ES" text="Me gusta la gasolina"></voice-player>
117 |
118 | <script>
119 | var form = document.querySelector('#mi-form'),
120 | element = document.querySelector('#mi-elemento');
121 |
122 | form.addEventListener('submit', function(e) {
123 | e.preventDefault();
124 | element.speak();
125 | });
126 | </script>In the following demo, the text attribute is set according to the input value. When the form is submitted, we call the speak method to trigger the audio.
130 | 131 |<voice-player id="player-element" text=""></voice-player>
161 |
162 | <script>
163 | var form = document.querySelector('#player-form'),
164 | input = document.querySelector('#player-input'),
165 | element = document.querySelector('#player-element');
166 |
167 | input.addEventListener('input', function(e) {
168 | element.setAttribute('text', input.value);
169 | });
170 |
171 | form.addEventListener('submit', function(e) {
172 | e.preventDefault();
173 | element.speak();
174 | });
175 | </script>
176 | | Attribute | 184 |Options | 185 |Default | 186 |Description | 187 |
|---|---|---|---|
| autoplay | 193 |boolean | 194 |false | 195 |Specifies if the audio should play when page loads. | 196 |
| accent | 199 |en-US, en-GB, es-ES, fr-FR, it-IT, de-DE, ja-JP, ko-KR, zh-CN | 200 |en-US | 201 |Specifies the language to be synthesized and spoken. | 202 |
| text | 205 |string | 206 |You are awesome | 207 |Specifies the text to be synthesized and spoken. | 208 |
| Method | 218 |Parameters | 219 |Returns | 220 |Description | 221 |
|---|---|---|---|
| speak() | 227 |None | 228 |Nothing | 229 |Triggers the voice audio to be played. | 230 |
| cancel() | 233 |None | 234 |Nothing | 235 |Triggers the voice audio to be canceled. | 236 |
| pause() | 239 |None | 240 |Nothing | 241 |Triggers the voice audio to be paused. | 242 |
| resume() | 245 |None | 246 |Nothing | 247 |Triggers the voice audio to be resumed. | 248 |
| Event | 258 |Description | 259 |
|---|---|
| onstart | 265 |Triggers when the voice begun to be spoken. | 266 |
| onend | 269 |Triggers when the voice completed to be spoken. | 270 |
| onerror | 273 |Triggers when the voice player detects an error. | 274 |
| onpause | 277 |Triggers when the voice player is resumed. | 278 |
| onresume | 281 |Triggers when the voice player is resumed. | 282 |
298 | Voice recognition is the translation of spoken words into text. This is achieved in the browser by using the SpeechRecognition interface from the Web Speech API. 299 |
300 |306 | Speech synthesis is the conversion of language text into speech. This is achieved in the browser by using then SpeechSynthesis interface from the Web Speech API. 307 |
308 |Provides you a simple DOM API to do voice recognition (speech to text).
317 | 318 | 319 |In the following demo, we trigger the voice recognition by using the start method when the user submits the form. Then, we add a listener to the result event to fetch the recognized content and put it into the textarea.
320 | 321 |Click "start", authorize, and say something...
341 | 342 | 350 |<voice-recognition id="recognition-element"></voice-recognition>
353 |
354 | <script>
355 | var form = document.querySelector('#recognition-form'),
356 | input = document.querySelector('#recognition-input'),
357 | element = document.querySelector('#recognition-element');
358 |
359 | form.addEventListener('submit', function(e) {
360 | e.preventDefault();
361 | element.start();
362 | });
363 |
364 | element.addEventListener('result', function(e) {
365 | input.textContent = e.detail.result;
366 | });
367 | </script>
368 | | Attribute | 376 |Options | 377 |Default | 378 |Description | 379 |
|---|---|---|---|
| continuous | 385 |boolean | 386 |true | 387 |Specifies if the recognition should continue when the user pauses while speaking. | 388 |
| accent | 391 |en-US, en-GB, es-ES, fr-FR, it-IT, de-DE, ja-JP, ko-KR, zh-CN | 392 |en-US | 393 |Specifies the language to be synthesized. | 394 |
| text | 397 |string | 398 |399 | | Returns the recognized text. | 400 |
| Method | 410 |Parameters | 411 |Returns | 412 |Description | 413 |
|---|---|---|---|
| start() | 419 |None | 420 |Nothing | 421 |Starts the voice recognition. | 422 |
| stop() | 425 |None | 426 |Nothing | 427 |Requests to recognition service to stop listening to more audio. | 428 |
| abort() | 431 |None | 432 |Nothing | 433 |Requests to immediately stop listening and stop recognizing. | 434 |
| Event | 444 |Description | 445 |
|---|---|
| onstart | 451 |Triggers when the recognition begins. | 452 |
| onerror | 455 |Triggers when there's a recognition error. | 456 |
| onend | 459 |Triggers when the recognition ends. | 460 |
| onresult | 463 |Triggers when there's a recognition result. | 464 |
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script><link rel="import" href="bower_components/voice-elements/dist/voice-player.html">
481 | <link rel="import" href="bower_components/voice-elements/dist/voice-recognition.html"><voice-player></voice-player>
485 | <voice-recognition></voice-recognition>