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

Convertire il testo in voce e viceversa con Javascript: tutorial+codice
by Janeth Kent Date: 22-06-2018 javascript speech API API voice converter tutorial

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:

 
by Janeth Kent Date: 22-06-2018 javascript speech API API voice converter tutorial visite : 13906  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Articoli correlati

Come creare un aplicazione Vue.js in 5 minuti

Vue.js sta acquisendo sempre più popolarità, diventando un importante concorrente di framework come Angular o React.js. Come framework per i principianti, conquista i cuori dei giovani sviluppatori front-end e delle…

JQuery morirà nel 2019?

Per un po' di tempo, la centralità di JQuery è stata oggetto di dibattito tra gli sviluppatori web. Come programmatori web interessati a Javascript, eravamo curiosi di sapere che opinioni…

30 Manuali di riferimento per JavaScript: jQuery, Node.js, React

Questa lista ha lo scopo di introdurre i nuovi sviluppatori a JavaScript (jQuery, Node.js e React) e agevolare il compito degli sviluppatori più esperti. jQuery jQuery API (Official) Leggi → jQuery Cheatsheet (Devhints) Leggi → jQuery Cheat Sheet (JavaScript Toolbox) Leggi…

Le migliori librerie JavaScript del 2018

Dal momento che Javascript si è rivelato il linguaggio di programmazione più popolare e ampiamente utilizzato nel 2018, l'ecosistema che si sviluppa intorno ad esso sta cominciando a diventare importante. JavaScript…

I 5 Migliori Frameworks JavaScript per Applicazioni Desktop

Non molto tempo fa era impossibile costruire un'applicazione desktop con JavaScript. Fortunatamente, questi tempi sono passati, e ora gli sviluppatori JS possono utilizzare le loro conoscenze e competenze di sviluppo…

Google e il machine learning applicato al testo

Come ha piú volte sottolineato Eric Schmidt, presidente esecutivo di Google, il machine learning o apprendimento automatico, è una delle aree sulle quali si stanno maggiormente concentrando gli investimenti del colosso di…

Introduzione a React: la prima libreria JavaScript costruita per sviluppatori frontend

React è una libreria JavaScript, creata da Facebook e Instagram, che permette di creare delle interfacce utente complesse grazie alla suddivisione in diversi componenti. React supporta la definizione di modelli HTML per ciascun componente attraverso un…

Riconoscimento facciale: rilevare la prossimità di un volto in javascript

No, non è una prerogativa di Facebook...La Face Detection è una tecnologia informatica che determina la posizione e le dimensioni di volti umani rappresentati in immagini digitali. Sicuramente avrete già  visto…

jQuery: consigli e trucchi utili per migliorare le performance di un sito web

Quando si sviluppa in jQuery ci si rende conto che esistono diverse maniere di implementare la stessa cosa. La tendenza è di migliorare e semplificare sempre più scrivendo meno righe di…

Javascript: 12 e-book gratis per utenti avanzati

Se giá possedete una conoscenza solida della programmazione ed in particolar modo del linguaggio JavaScript e state cercando delle guide o dei libri che vi aiutino a migliorare ulteriormente le…

Fondamentali di javascript: non sempre i metodi di base si usano nel modo corretto

Il JavaScript è basicamente un linguaggio semplice che grazie agli sviluppatori continua ad evolvere evolvere mediante l'implementazione di modelli flessibili ed intelligenti. Tali modelli alimentano le odierne applicazioni web. Ma a volte,…

11 librerie JavaScript Open Source per progetti front-end

Senza dubbio, JavaScript è uno dei linguaggi di programmazione più utilizzati al giorno d'oggi. Grazie ad esso, abbiamo accesso a varie funzionalità che vengono offerte sui siti web che visitiamo…

Clicky