Share
I 1968, 2001: En Space Odyssey ble utgitt. Det kjente kjennetegnet HAL 9000, en supercomputer i stand til et stort antall ting: ansiktsgjenkjenning, spille sjakk og til og med leppeavlesning. Men den ene tingen som ble sittende fast i publikums sinn, og påvirket alle deler av science fiction siden, var HALs evne til å snakke.
I dag er en datamaskin som snakker et stykke tekst gitt til det vanlig. Men bare nylig har du vært i stand til å gjøre dette direkte i en nettleser. Det er det jeg skal vise deg i denne opplæringen.
Tale Synthesis API lar deg bruke JavaScript til å ta et stykke tekst og sende det til høyttalerne dine som tale. Som med alle nye APIer, er det ikke implementert i alle nettlesere, så sjekk caniuse.com for gjeldende støtte. Ved skriving støttes det i Chrome og Safari, både på skrivebord og mobil.
Du blir overrasket over hvor enkelt det er å få nettleseren til å begynne å snakke med deg. For å begynne kan du enten opprette en ny HTML-fil med en skriptkode inne, eller åpne nettleserens JavaScript-konsoll. Deretter skriver du inn følgende linje.
var utterance = ny SpeechSynthesisUtterance ();
Det vi gjør her er å skape en ny forekomst av en syntetisert uttale. Tenk på dette som en liten konvolutt som inneholder instruksjoner som forteller nettleseren hva den skal si og hvordan man sier det.
Først må vi tenke på noe ekstremt viktig for nettleseren å si.
utterance.text = 'Mitt navn \' s Guybrush Threepwood, og jeg vil være en pirat! ';
Da er vi klare til å gå. La oss gi beskjed til nettleserens talesyntese og fortelle den å snakke. Husk å skru opp volumet på datamaskinen din på forhånd.
speechSynthesis.speak (ytring);
Wow, en snakkende datamaskin. Så enkelt som det.
Nå, hvis det ikke var imponerende nok, gir Tale Synthesis API oss en hel rekke metoder og attributter som vi kan bruke på vår "utterance" til tweak for å endre hva det høres ut som. Det mest bemerkelsesverdige av disse er å endre "personen" som snakker. Operativsystemet leveres med en rekke innebygde stemmer å velge mellom, i tillegg til at nettleseren din kaster inn noen ekstra til et godt mål. La oss se hvilke stemmer vi har tilgjengelig for oss.
Accentsconagua
speechSynthesis.getVoices (). forEach (funksjon (stemme) console.log ('Hei! Mitt navn er', voice.name););Hvis du ikke ser noen utgang, må du kanskje kjøre denne funksjonen igjen. Chrome har en merkelig feil der du må be om antall stemmer to ganger for at den skal initialiseres riktig. For å overvinne dette gjør du følgende.
// Fortell Chrome for å våkne opp og få stemmer. speechSynthesis.getVoices (); setTimeout (funksjon () // Etter 1 sekund, få stemmer nå Chrome lytter. speechSynthesis.getVoices (). forEach (funksjon (stemme) console.log ('Hei! Mitt navn er', voice.name); );, 1000);Antall stemmer varierer fra operativsystem til operativsystem, men på OS X har jeg 74! Flere tegn enn en episode av The Simpsons. La oss prøve en ut.
Som du sikkert kan se, speechSynthesis.getVoices () returnerer en matrise. Vi kunne ganske enkelt sette stemmen ved å gjøre:
utterance.voice = speechSynthesis.getVoices () [11];
Dette vil fortelle nettleseren å bruke "stemme 11", som i mitt tilfelle er "Agnes". Dårlig Agnes, redusert til et tall. En finere måte å gjøre dette på, og å behandle Agnes som et ekte menneske, ville være å bruke ECMAScript 6-metoden findIndex, som støttes i nettlesere som også støtter Web Synthesis API, så vi er alle gode.
var agnesIndex = speechSynthesis.getVoices (). findIndex (funksjon (stemme) return voice.name === 'Agnes';);
Nå som vi har indeksen for stemmegruppen som Agnes stemme er inne, kan vi sette den stemmen til å bli brukt av vårt uttrykk.
utterance.voice = speechSynthesis.getVoices () [agnesIndex]; utterance.text = 'Det er meg Agnes! Jeg lever! Takk skal du ha.'; speechSynthesis.speak (ytring);
Ingen problemer, Agnes. Du skremte meg halvt til døden med den høyeste stemmen din, skjønt. La oss slå deg ned litt.
Heldigvis, alt vi trenger å gjøre for å stoppe stemmen er å si:
utterance.volume = 0,5;
Dette setter volumet av Agnes stemme til å være halvt hva det opprinnelig var, 0 er stille og 1 er det høyeste. Parametrene vi kan tweak slutter ikke der, men. Er stemmen du har valgt å snakke for sakte eller for fort? Du kan endre hastigheten der stemmen din leser tekststykket ditt ved hjelp av kursattributtet.
utterance.rate = 0.8;
Standardhastigheten der en tale snakker er 1. Så vi senker den ned med en femte. Den langsommere hastigheten du kan spesifisere er 0,1, mens den raskeste er 10. Stemmer har også sine egne takstgrenser, så selv om du setter en hastighet på 10, kan det ikke snakke 10 ganger så fort som standardfrekvensen.
En annen interessant parameter du kan endre er tonehøyde. Vil Agnes høres ut som Barry White? Pitch er hvor den er på.
utterance.pitch = 0.2;
Her er den laveste tonehøyde du kan stille 0, mens du får stemmen din til å lyde som om de bare har inhalert en heliumfylt chipmunk, sett pitchen til 2, den høyeste det kan gå.
Ok, la oss ha det gøy nå. Tale Synthesis API har noen forskjellige hendelser som vi kan leke med. Disse hendelsene, start, slutt, pause, og gjenoppta blant annet, la oss ringe en funksjon når nevnte arrangement skjer. Ved å høre på sluttbegivenheten kan vi ringe en funksjon som starter en annen talespråk, og gir dermed en illusjon av en samtale.
La oss sette opp to forskjellige stemmer, og gi hver en setning til å si. Husk at all din kode skal være i setTimeout funksjon for å sikre at alle mulige stemmer har lastet inn.
var stemmer = window.speechSynthesis.getVoices (), agnesUtterance = ny SpeechSynthesisUtterance (), albertUtterance = ny SpeechSynthesisUtterance (); agnesUtterance.voice = stemmer [11]; albertUtterance.voice = stemmer [12]; agnesUtterance.text = 'Hei Albert, jeg er Agnes'; albertUtterance.text = 'Hei Agnes, hyggelig å møte deg!';
Før vi begynner å snakke Agnes, i onend funksjonsanrop vi satt opp Alberts svar som dette. Dette betyr at når Agnes slutter å snakke, begynner Albert.
agnesUtterance.onend = function () speechSynthesis.speak (albertUtterance);
Ser bra ut. Klar til å høre en grundig samtale? Start Agnes på vanlig måte.
speechSynthesis.speak (agnesUtterance);
Fantastisk. Nettleseren din snakker nå til seg selv. Skynet har blitt selvbevisst.
