Share
1968, 2001: En rymdodyssey släpptes. Det famously presenterade HAL 9000, en superdator med ett stort antal saker: ansiktsigenkänning, spel schack och till och med läppläsning. Men den enda saken som fastnade i publikens sinnen och påverkat varje del av science fiction sedan var HALs förmåga att prata.
Idag är en dator som talar en text som ges till den vanliga. Men nyligen har du kunnat göra det direkt i en webbläsare. Det är vad jag ska visa dig i denna handledning.
Speech Synthesis API låter dig använda JavaScript för att ta en bit text och mata ut den till dina högtalare som tal. Precis som för alla nya API: er, är det inte implementerat i alla webbläsare, så kolla caniuse.com för aktuellt support. Vid skrivning stöds det i Chrome och Safari, både på skrivbord och mobil.
Du kommer bli förvånad över hur enkelt det är att få din webbläsare att börja prata med dig. För att börja, skapa antingen en ny HTML-fil med en skriptikett inuti, eller öppna din webbläsares JavaScript-konsol. Skriv sedan in följande rad.
var utterance = ny SpeechSynthesisUtterance ();
Vad vi gör här skapar en ny instans av en syntetiserad yttrande. Tänk på detta som ett litet kuvert som innehåller instruktioner som berättar för webbläsaren vad det ska säga och hur man säger det.
Först måste vi tänka på något mycket viktigt för webbläsaren att säga.
utterance.text = 'Mitt namn \' s Guybrush Threepwood, och jag vill vara en pirat! ';
Då är vi redo att gå. Låt oss ge vårt meddelande till webbläsarens talsyntesizer och berätta att den ska prata. Kom ihåg att skruva upp volymen på din dator i förväg.
speechSynthesis.speak (utterance);
Wow, en talande dator. Så enkelt som det.
Om det inte var tillräckligt imponerande, ger Speech Synthesis API oss en hel massa metoder och attribut som vi kan använda på vår "yttrande" för att tweak för att ändra vad det låter som. Det mest anmärkningsvärda av dessa är att ändra den "person" som talar. Ditt operativsystem levereras med en mängd olika inbyggda röster att välja mellan, plus din webbläsare kastar in några extra till ett bra mått. Låt oss se vilka röster vi har tillgängliga för oss.
Accentsconagua
speechSynthesis.getVoices () .forEach (funktion (röst) console.log ('Hej! Mitt namn är', voice.name););Om du inte ser någon utmatning kan du behöva köra den här funktionen igen. Chrome har en konstig bugg där du måste begära antalet röster två gånger för att den ska initialiseras korrekt. För att övervinna detta gör du följande.
// Berätta för Chrome att vakna och få rösterna. speechSynthesis.getVoices (); setTimeout (funktion () // Efter 1 sekund, få rösterna nu lyssnar Chrome. speechSynthesis.getVoices () .forEach (funktion (röst) console.log ('Hej! Mitt namn är', voice.name); );, 1000);Antalet röster varierar från operativsystem till operativsystem, men på OS X har jag 74! Fler tecken än en episod av The Simpsons. Låt oss försöka ut.
Som du kan se, speechSynthesis.getVoices () returnerar en array. Vi kunde helt enkelt ställa röst genom att göra:
utterance.voice = speechSynthesis.getVoices () [11];
Detta skulle säga att webbläsaren skulle använda "voice 11", som i mitt fall är "Agnes". Dålig Agnes, reducerad till ett antal. Ett trevligare sätt att göra detta och att behandla Agnes som ett verkligt människa, skulle vara att använda ECMAScript 6-metoden findIndex, som stöds i webbläsare som också stöder Web Synthesis API, så vi är alla bra.
var agnesIndex = speechSynthesis.getVoices (). findIndex (funktion (röst) return voice.name === 'Agnes';);
Nu när vi har indexet för rösträtten som Agnes röst är i, kan vi ställa in den rösten som ska användas av vårt yttrande.
utterance.voice = speechSynthesis.getVoices () [agnesIndex]; utterance.text = 'Det är jag Agnes! Jag lever! Tack.'; speechSynthesis.speak (utterance);
Inga problem, Agnes. Du skrämde mig halv till död med din högljudda röst. Låt oss vända dig lite.
Lyckligtvis är allt vi behöver göra för att tysta rösten är att säga:
utterance.volume = 0,5;
Detta sätter volymen av Agnes röst för att vara hälften vad den ursprungligen var, 0 är tyst och 1 är den högsta. Parametrarna vi kan tweak slutar dock inte där. Är rösten du valt att tala för långsamt eller för snabbt? Du kan ändra hastigheten där röst läser ut din textstycke med hjälp av betygsattributet.
utterance.rate = 0,8;
Standardhastigheten i vilken en röst talar är 1. Så här saktar vi ner den med en femte. Den långsammaste hastigheten du kan ange är 0,1, medan den snabbaste är 10. Voices har också sina egna takstgränser, så även om du ställer in en takt till 10, kanske den inte talar 10 gånger så fort som standardhastigheten.
En annan intressant parameter du kan ändra är tonhöjd. Vill Agnes låta som Barry White? Platsen är där den är på.
utterance.pitch = 0.2;
Här är den lägsta tonhöjden du kan ställa in 0, medan du får ditt röstljud som om de bara har inhalerat en heliumfylld flis, ställer du höjden till 2, den högsta den kan gå.
Okej, låt oss ha roligt nu. Speech Synthesis API har några olika händelser som vi kan leka med. Dessa händelser, Start, slutet, paus, och återuppta bland annat låta oss ringa en funktion när händelsen händer. Genom att lyssna på slutet händelsen kan vi ringa en funktion som startar en annan röst talar, vilket ger en illusion av en konversation.
Låt oss ställa in två olika röster, och ge varje en mening att säga. Kom ihåg att all din kod borde vara i setTimeout funktion för att se till att alla möjliga röster har laddats.
var röster = window.speechSynthesis.getVoices (), agnesUtterance = new SpeechSynthesisUtterance (), albertUtterance = ny SpeechSynthesisUtterance (); agnesUtterance.voice = voices [11]; albertUtterance.voice = röster [12]; agnesUtterance.text = 'Hej Albert, jag är Agnes'; albertUtterance.text = 'Hej Agnes, trevligt att träffa dig!';
Innan vi börjar Agnes talar, i i sträck funktionssamtal vi satte upp Alberts svar som sådant. Det betyder att när Agnes slutar tala börjar Albert.
agnesUtterance.onend = function () speechSynthesis.speak (albertUtterance);
Ser bra ut. Klar att höra en djup konversation? Starta Agnes på vanligt sätt.
speechSynthesis.speak (agnesUtterance);
Amazing. Din webbläsare pratar nu med sig själv. Skynet har blivit självmedvetet.
