Home

#voicerecognition #reconnaissancevocale

Voice Elements est un ensemble de composants web dédiés à la reconnaissance vocale et au text to speech.

Voice Elements est un ensemble de composants web dédiés à la reconnaissance vocale et au text to speech.

Depuis fin 2012, les spécifications de la Web Speech API ont été conçues par le W3C.

Voice Elements vous permettra de mettre en place facilement sur vos pages web des fonctionnalités de reconnaissance vocale et du Text to Speech, par le biais de la Web Speech API.

Concrètement, voice elements apporte 2 composants web:

  • voice-player: Un lecteur tect to speech permettant de lire oralement le texte contenu dans un attribut du composant.
  • voice-recognition: Permet de retranscrire dans un textearea les paroles d’un utilisateur via son micro.

Ces deux composants permettent d’ajouter de l’interactivité à vos sites et applications web.

Le résultat est plutôt intéressant, ça passe bien sur Chrome dernière version et Safari, mais pas encore supporté par IE ou Firefox.

Côté mise en place, voilà comment ça se passe pour le voice-player:

01.<voice-player id="player-element" text=""></voice-player>
02.<script>
03.var form = document.querySelector('#player-form'),
04.input = document.querySelector('#player-input'),
05.element = document.querySelector('#player-element');
06.input.addEventListener('input', function(e) {
07.element.setAttribute('text', input.value);
08.});
09.form.addEventListener('submit', function(e) {
10.e.preventDefault();
11.element.speak();
12.});
13.</script>

Et pour le voice-recognition:

01.<voice-recognition id="recognition-element"></voice-recognition>
02.<script>
03.var form = document.querySelector('#recognition-form'),
04.input = document.querySelector('#recognition-input'),
05.element = document.querySelector('#recognition-element');
06.form.addEventListener('submit', function(e) {
07.e.preventDefault();
08.element.start();
09.});
10.element.addEventListener('result', function(e) {
11.input.textContent = e.detail.result;
12.});
13.</script>

A tester !

Site Officiel

Publicités

Laisser un commentaire

Choisissez une méthode de connexion pour poster votre commentaire:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s