Share
Nel 1968, 2001: è stata rilasciata A Space Odyssey. È famoso per l'HAL 9000, un supercomputer capace di un gran numero di cose: il riconoscimento facciale, il gioco degli scacchi e persino la lettura labiale. Ma l'unica cosa che è rimasta impressa nella mente del pubblico e che ha influenzato ogni pezzo di fantascienza da allora è stata la capacità di parlare di HAL.
In questi giorni, un computer che parla di un testo dato ad esso è un luogo comune. Tuttavia, solo di recente sei stato in grado di farlo direttamente in un browser web. Questo è quello che ti mostrerò in questo tutorial.
L'API Speech Synthesis ti consente di usare JavaScript per prendere una porzione di testo e trasmetterla agli altoparlanti come voce. Come con tutte le nuove API, non è implementato in tutti i browser, quindi controlla su caniuse.com il supporto attuale. Al momento della stesura, è supportato in Chrome e Safari, sia su desktop che su dispositivi mobili.
Sarai sorpreso di quanto sia semplice far iniziare il tuo browser a parlare con te. Per iniziare, crea un nuovo file HTML con all'interno un tag script o apri la console JavaScript del browser. Poi dentro scrivi la seguente riga.
var utterance = new SpeechSynthesisUtterance ();
Quello che stiamo facendo qui è la creazione di una nuova istanza di una frase sintetizzata. Consideralo come una piccola busta che contiene istruzioni che dicono al browser cosa dovrebbe dire e come dirlo.
Per prima cosa, dobbiamo pensare a qualcosa di estremamente importante per il nostro browser.
utterance.text = 'Il mio nome \' s Guybrush Threepwood, e voglio essere un pirata! ';
Allora siamo pronti per andare. Diamo il nostro messaggio al sintetizzatore vocale del browser e ditelo per parlare. Ricordarsi di alzare il volume sul computer in anticipo.
speechSynthesis.speak (espressione);
Wow, un computer parlante. Facile come quello.
Ora, se ciò non fosse abbastanza impressionante, l'API Speech Synthesis ci offre un sacco di metodi e attributi che possiamo usare sulla nostra "enunciazione" per modificare ciò che sembra. Il più notevole di questi è cambiare la parola "persona". Il tuo sistema operativo è dotato di una varietà di voci integrate tra cui scegliere, più il tuo browser getta in alcuni extra per una buona misura. Vediamo quali voci abbiamo a nostra disposizione.
Accentsconagua
speechSynthesis.getVoices (). forEach (function (voice) console.log ('Ciao! Il mio nome è', voice.name););Se non si vede alcun output, potrebbe essere necessario eseguire nuovamente questa funzione. Chrome ha uno strano bug in cui devi richiedere il numero di voci due volte per inizializzare correttamente. Per superare questo, fai quanto segue.
// Dì a Chrome di svegliarsi e ottenere le voci. speechSynthesis.getVoices (); setTimeout (function () // Dopo 1 secondo, ottieni le voci ora Chrome è in ascolto. speechSynthesis.getVoices (). forEach (function (voice) console.log ('Ciao! Il mio nome è', voice.name); );, 1000);Il numero di voci varia dal sistema operativo al sistema operativo, ma su OS X ne ho 74! Più personaggi di un episodio di The Simpsons. Proviamone uno.
Come probabilmente puoi vedere, speechSynthesis.getVoices () restituisce un array. Potremmo semplicemente impostare la voce facendo:
utterance.voice = speechSynthesis.getVoices () [11];
Questo direbbe al browser di usare "voice 11", che nel mio caso è "Agnes". Povera Agnes, ridotta a un numero. Un modo migliore per farlo, e per trattare Agnes come un vero essere umano, sarebbe utilizzare il metodo ECMAScript 6 FindIndex, che è supportato nei browser che supportano anche l'API Web Synthesis, quindi stiamo tutti bene.
var agnesIndex = speechSynthesis.getVoices (). findIndex (function (voice) return voice.name === 'Agnes';);
Ora che abbiamo l'indice della matrice di voci in cui si trova la voce di Agnes, possiamo impostare quella voce che sarà usata dalla nostra espressione.
utterance.voice = speechSynthesis.getVoices () [agnesIndex]; utterance.text = 'Sono io, Agnes! Sono vivo! Grazie.'; speechSynthesis.speak (espressione);
Nessun problema, Agnes. Mi hai spaventato a morte con quella tua voce forte, però. Abbassiamo un po '.
Fortunatamente, tutto ciò che dobbiamo fare per calmare la voce è dire:
espressione.volume = 0,5;
Questo imposta il volume della voce di Agnes a metà di quello che era in origine, 0 è silenzioso e 1 è il più forte. I parametri che possiamo modificare non finiscono qui, comunque. La voce che hai scelto parla troppo lentamente o troppo velocemente? Puoi cambiare la velocità con cui la voce legge il tuo pezzo di testo usando l'attributo rate.
utterance.rate = 0.8;
Il tasso di default in cui una voce parla è 1. Quindi qui stiamo rallentando di un quinto. La velocità più bassa che puoi specificare è 0,1, mentre la più veloce è 10. Le voci hanno anche i loro limiti di velocità, quindi anche se imposti una velocità su 10, potrebbe non parlare 10 volte più velocemente della velocità predefinita.
Un altro parametro interessante che puoi modificare è l'altezza. Vuoi che Agnes suoni come Barry White? Pitch è dove è.
utterance.pitch = 0,2;
Qui il pitch più basso che puoi impostare è 0, mentre per far sembrare la tua voce come se avesse appena inalato un chipmunk pieno di elio, imposta il pitch su 2, il più alto possibile.
Ok, divertiamoci ora. L'API di sintesi vocale ha alcuni eventi diversi con cui possiamo giocare. Questi eventi, inizio, fine, pausa, e curriculum vitae tra gli altri, permettici di chiamare una funzione quando si verifica tale evento. Ascoltando l'evento finale, possiamo chiamare una funzione che avvia un'altra voce parlando, fornendo così l'illusione di una conversazione.
Impostiamo due voci diverse e diamo a ciascuna una frase da dire. Ricorda, tutto il tuo codice dovrebbe essere nel setTimeout funzione per assicurarsi che tutte le voci possibili siano state caricate.
var voices = window.speechSynthesis.getVoices (), agnesUtterance = new SpeechSynthesisUtterance (), albertUtterance = new SpeechSynthesisUtterance (); agnesUtterance.voice = voices [11]; albertUtterance.voice = voices [12]; agnesUtterance.text = 'Ciao Albert, sono Agnes'; albertUtterance.text = 'Ciao Agnes, piacere di conoscerti!';
Prima di iniziare Agnes parlando, nel alla fine chiamata di funzione impostiamo la risposta di Albert in questo modo. Ciò significa che quando Agnes smetterà di parlare, Albert inizierà.
agnesUtterance.onend = function () speechSynthesis.speak (albertUtterance);
Sembra buono. Sei pronto per ascoltare una conversazione approfondita? Avvia Agnes nel solito modo.
speechSynthesis.speak (agnesUtterance);
Stupefacente. Il tuo browser ora parla a se stesso. Skynet è diventato consapevole di sé.
