Speech Recognition e Speech Synthesis Web API

Obiettivo di questo post è quello di analizzare due API Web sperimentali, la Speech Recognition e la Speech Synthesis. Queste specifiche servono, rispettivamente, per poter trasformare la voce dell’utente in testo (speech-to-text) e per trasformare un testo in “voce” (text-to-speech).

Speech Recognition

Iniziamo con la più complessa delle due, ma probabilmente la più interessante. la Speech Recognition ci permette di stare in ascolto della voce dell’utente, previa autorizzazione ad utilizzare il microfono, e ritornare una stringa con la frase appena pronunciata. Ad oggi questa API è praticamente supportata esclusivamente da Chrome, come potete vedere dalla relativa pagina di Can I Use.

Compatibilità Speech Recognition Api

Compatibilità Speech Recognition Api

L’oggetto alla base di questa Api è webkitSpeechRecognition. Vediamo subito come utilizzarlo con un piccolo esempio:

Come vedete l’oggetto recognition mette a disposizione oltre dei classici metodi start e stop che servono per iniziare e fermare la registrazione del flusso audio dal microfono dell’utente. Inoltre abbiamo a disposizione alcuni hook, tra i quali quelli che vengono scatenati allo start, allo stop e per ogni risultato trovato. Concentriamoci per l’appunto sulla callback onresult. la variabile e.results contiene dei dati che hanno la seguente forma:

Questo oggetto contiene varie registrazioni, una sola delle quali marcata come final. Ogni registrazione contiene poi vari transcript e il valore che vogliamo ottenere è quello con la confidence più alta. Otteniamo questo risultato utilizzando il metodo maxBy di lodash.

Speech Synthesis

Passiamo all’altra faccia della medaglia, la Speech Synthesis. In questo caso partendo da una stringa riusciamo a far “parlare” il nostro browser. Sempre grazie a Can I Use vediamo come questa API sia implementata sia Safari che da Chrome.

Compatibilità Speech Synthesis Api

Compatibilità Speech Synthesis Api

Utilizzare la Speech Synthesis è un’operazione davvero semplice come dimostra il prossimo esempio:

Gli oggetti di tipo SpeechSynthesisUtterance hanno vari parametri tra cui il volume e la voce da utilizzare tra quelle disponibili nel sistema. Per l’elenco completo delle proprietà vi rimando alla documentazione su Mozilla Developer Network.

Conclusioni

Data la scarsissima adesione a queste Api la vostra webapp non può fare fortemente uso di queste tecnologie. Però possono essere un ottimo plus per tutti gli utenti Chrome. Immaginate ad esempio un servizio clienti su un e-commerce o un sistema di web banking che accetta come input la voce stessa dell’utente. Potete vedere un esempio in questa pagina github.io: una piccola chat in cui le risposte sono simulate grazie a Bacon Ipsum, un Lorem Ipsum a base di maiale! 🙂 Potete inoltre leggere il codice dell’applicazione in questo repository Github.

Il mio computer ama il maiale!

Il mio computer ama il maiale!

Come al solito concludo con una canzone, stavolta tocca a Burn The Witch dei Radiohead, tratto dal nuovissimo album A Moon Shaped Hole. Buon Ascolto.

Flattr this!

Pubblicato in Javascript Taggato con: , ,
3 comments on “Speech Recognition e Speech Synthesis Web API
  1. Irene scrive:

    Ciao,da quel che ho capito anche dalla doc questa API ti consente di leggere solo l’audio proveniente dal microfono. Secondo te c’è modo di usarla dandogli in pasto un file? Grazie.

1 Pings/Trackbacks per "Speech Recognition e Speech Synthesis Web API"
  1. […] molto probabilmente questo approccio porterà a nuove sfide tecnologiche e di esperienza utente: una delle possibilità che si aprono è quella di utilizzare la voce come strumenti di input/output nelle nostre applicazioni. per quanto riguarda le web applications ad oggi è già possibile utilizzare due API chiamate Speech Recognition e Speech Synthesis, che permettono rispettivamente di trasformare la voce dell’utente in testo (speech-to-text) e un testo in voce (text-to-speech). per chi fosse interessato è possibile trovare un approfondimento tecnico sul mio blog. […]

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.