Convertire il testo in voce e viceversa con Javascript: tutorial+codice


 
 

In questo tutorial sperimenteremo la Web Speech API: un'interfaccia browser molto potente che consente di registrare la voce umana e convertirla in testo. La useremo anche per fare il contrario: interpretare stringhe di testo per far rileggerle al bot con voce simil-umana, insomma operando una sintesi vocale.

 

La App

Per cominciare a sperimentare, è utile sapere che la API ci consente di compiere determinate azioni, come:

  • Prendere appunti utilizzando l'input vocale o da tastiera tradizionale.
  • Salvare gli appunti in locale (localStorage).
  • Mostrarci tutti gli appunti presi e farceli ascoltare tramite sintesi vocale(Speech Synthesis).

Per le operazioni più semplici nel DOM utilizzeremo solo ed sclusivamente jQuery e CSS.

L'HTML e i CSS sono abbastanza standard quindi li salteremo e andremo direttamente al JavaScript.

Dalla voce al testo

L'API Web Speech è in realtà divisa in due interfacce totalmente indipendenti. Abbiamo il riconoscimento vocale per comprendere la voce umana e trasformarla in testo (Voce -> Testo) e la sintesi vocale per interpretare e convertire le stringhe di testo in una voce generata dal computer (Testo -> Voce).

Iniziamo ad analizzare il primo punto.

L'API di riconoscimento vocale è sorprendentemente accurata per una funzione browser gratuita.

Riesce a riconoscere correttamente quasi tutte le parole e individua quali parole accorpare per poter formare frasi con senso compiuto. Consente inoltre di dettare caratteri speciali come punti, punti interrogativi, punti esclamativi e nuove linee.

La prima cosa che dobbiamo fare è controllare se l'utente abbia accesso all' API e mostrare un messaggio di errore nel caso non possa visualizzarla.

Sfortunatamente, l'API vocale è supportata solo in Chrome e Firefox (con un flag), quindi molte persone probabilmente visualizzeranno il messaggio d'errore.

try {    
var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;    
var recognition = new SpeechRecognition();  
}  
catch(e) {    
console.error(e);    
$('.no-browser-support').show();   
 $('.app').hide();  
 }

La variabile di riconoscimento ci darà accesso a tutti i metodi e le proprietà dell' API. Ci sono varie opzioni disponibili, ma noi imposteremo solo recognition.continuous su true. Questo permetterà agli utenti di parlare con pause più lunghe tra le parole e le frasi.

Prima di poter utilizzare il riconoscimento vocale, dobbiamo anche impostare un paio eventi (event handlers). La maggior parte di loro i cambiamentii di nello stato durante il riconoscimento vocale:

recognition.onstart = function( ) {     
instructions.text('Voice recognition activated. Try speaking into the microphone.');  }    
recognition.onspeechend = function( ) {    
instructions.text('You were quiet for a while so voice recognition turned itself off.');  
}    
recognition.onerror = function(event) {    
if(event.error == 'no-speech') {      
instructions.text('No speech was detected. Try again.');      
};  
}

 

Un'evento dell'API fondamentale da gestire è quello che permette di registrare la voce dell'utente in rapida succession: onresult event

La gestione dell'evento onresult ci permette di catturare la voce, salvarla in in una variabile globale e mostrarla in una textarea:

recognition.onresult = function(event) {      
// event is a SpeechRecognitionEvent object.    
// It holds all the lines we have captured so far.     
// We only need the current one.    
var current = event.resultIndex;      
// Get a transcript of what was said.    
var transcript = event.results[current][0].transcript;      
// Add the current transcript to the contents of our Note.    
noteContent += transcript;    
noteTextarea.val(noteContent);  
}

Il codice che avete appena letto è stato leggermente semplificato.

Importante: un bug sui dispositivi Android che fa sì che tutto si ripeta due volte. Non esiste ancora una soluzione ufficiale, ma il problema si può risolvere facilmente e senza molti effetti collaterali.

var mobileRepeatBug = (current == 1 && transcript == event.results[0][0].transcript);
    if(!mobileRepeatBug) 
    {    
    noteContent += transcript;    
    noteTextarea.val(noteContent);  
    }

Terminato con le impostazioni sdi base, possiamo iniziare ad utilizzare la funzione di riconoscimento vocale del browser.

Per avviarlo basta chiamare il metodo start()

$('#start-record-btn').on('click', function(e) {
  recognition.start();
})

Tale funzione richierarà agli utenti l'autorizzazione per attivare il microfono.

La maggior parte delle API che richiedono il permesso dell'utente non funziona su host non sicuri. Assicuratevi di utilizzare le applicazioni di sintesi vocale sul Web in ambiente HTTPS.

Il browser ascolterà per un breve lasso di tempo la voce dell'utente ed ogni frase o parola riconosciuta sarà trascritta. L'API smetterà di "ascoltare" automaticamente dopo un paio di secondi di silenzio o se sarà interrotta manualmente.

$('#pause-record-btn').on('click', function(e) {    
recognition.stop();  
});

 

E con questo la prima parte dello script è completata, passiamo alla seconda.

Dal testo alla voce

Operare con la Sintesi vocale è in realtà molto semplice.

La API è accessibile attraverso l'oggetto speechSynthesis insieme ad un paio di metodi per riprodurre, mettere in pausa, cambiare l'intonazione, cambiare la voce del lettore ecc ecc.

Per la nostra demo avremo bisogno del metodo speak(). e di istanziare la classe SpeechSynthesisUtterance

function readOutLoud(message) {    
var speech = new SpeechSynthesisUtterance();      
// Set the text and voice attributes.    
speech.text = message;    
speech.volume = 1;    
speech.rate = 1;    
speech.pitch = 1;      
window.speechSynthesis.speak(speech);  
}

Quando la funzione viene chiamata, una voce di robot leggerà la stringa di testo, trasformandola in voce.

Conclusione

In un'epoca in cui gli assistenti vocali sono più popolari che mai, un'API come questa vi fornisce una scorciatoia rapida per costruire bot che capiscono e parlano il linguaggio umano.

Aggiungere un controllo vocale alle vostre applicazioni poi, può essere una grande forma di miglioramento dell'accessibilità delle stesse.

Gli utenti con problemi di vista possono beneficiare di interfacce utente sia vocali che di sintesi vocale.

Le API per la sintesi e il riconoscimento vocale funzionano abbastanza bene e gestiscono con facilità diversi linguaggi e accenti. Purtroppo, come prima menzionato, il supporto dei browser é per ora limitato. Se avete bisogno di un programma più affidabile di riconoscimento vocale, potete dare un'occhiata a queste API di terze parti:

 
 

tags: javascript speech API API voice converter tutorial


Questo sito fa uso di cookie, anche di terze parti, per migliorare la tua esperienza di navigazione. Accettando questa informativa dai il consenso al loro utilizzo. È possibile modificare le impostazioni dei cookie o ottenere ulteriori informazioni qui: Politica dei cookies.