Share
In 1968, 2001: A Space Odyssey werd uitgebracht. Het was beroemd met HAL 9000, een supercomputer die in staat is tot een groot aantal dingen: gezichtsherkenning, schaken en zelfs liplezen. Maar het enige dat in het hoofd van het publiek bleef steken en sindsdien elk stukje science fiction beïnvloedde, was het vermogen van HAL om te praten.
Tegenwoordig is een computer die een stuk tekst spreekt, heel gewoon. U hebt dit echter pas onlangs in een webbrowser kunnen doen. Dat is wat ik je in deze tutorial laat zien.
Met de Speech Synthesis API kun je JavaScript gebruiken om een stuk tekst te nemen en als spraak naar je speakers te sturen. Zoals met alle nieuwe API's, is het niet in alle browsers geïmplementeerd, dus check caniuse.com voor de huidige ondersteuning. Op het moment van schrijven wordt het ondersteund in Chrome en Safari, zowel op desktop als mobiel.
Je zult er versteld van staan hoe eenvoudig het is om je browser tegen je te laten praten. Om te beginnen, maakt u een nieuw HTML-bestand met een scripttag erin, of opent u de JavaScript-console van uw browser. Schrijf vervolgens de volgende regel in.
var utterance = new SpeechSynthesisUtterance ();
Wat we hier doen is het creëren van een nieuw exemplaar van een gesynthetiseerde uiting. Zie dit als een kleine envelop die instructies bevat die de browser vertellen wat hij moet zeggen en hoe hij dit moet zeggen.
Allereerst moeten we denken aan iets heel belangrijks voor onze browser.
utterance.text = 'Mijn naam Guybrush Threepwood, en ik wil een piraat zijn!';
Dan zijn we klaar om te gaan. Laten we onze boodschap aan de spraaksynthesizer van de browser geven en zeggen dat hij moet spreken. Vergeet niet om vooraf het volume op uw computer te verhogen.
speechSynthesis.speak (uitingen);
Wauw, een pratende computer. Zo eenvoudig als dat.
Nu, als dat niet indrukwekkend genoeg was, geeft de Speech Synthesis API ons een hele reeks methoden en attributen die we kunnen gebruiken om onze "uiting" te tweaken om te veranderen hoe het klinkt. Het meest opvallende hiervan is om de "persoon" te spreken. Je besturingssysteem wordt geleverd met een verscheidenheid aan ingebouwde stemmen om uit te kiezen, plus je browser gooit er nog een paar extra in. Laten we zien welke stemmen we tot onze beschikking hebben.
Accentsconagua
speechSynthesis.getVoices (). forElke (functie (stem) console.log ('Hallo! Mijn naam is', voice.name););Als u geen uitvoer ziet, moet u deze functie mogelijk opnieuw uitvoeren. Chrome heeft een vreemde bug waarbij je het aantal stemmen twee keer moet vragen om correct te initialiseren. Om dit te verhelpen, doet u het volgende.
// Laat Chrome opstaan en de stemmen horen. speechSynthesis.getVoices (); setTimeout (functie () // Ontvang na 1 seconde de stemmen nu Chrome luistert. speechSynthesis.getVoices (). forElke (functie (stem) console.log ('Hallo! Mijn naam is', voice.name); );, 1000);Het aantal stemmen varieert van besturingssysteem tot besturingssysteem, maar op OS X heb ik 74! Meer personages dan een aflevering van The Simpsons. Laten we er een uitproberen.
Zoals je waarschijnlijk kunt zien, speechSynthesis.getVoices () geeft een array terug. We kunnen gewoon de stem instellen door te doen:
utterance.voice = speechSynthesis.getVoices () [11];
Dit zou de browser vertellen om "voice 11" te gebruiken, in mijn geval "Agnes". Arme Agnes, gereduceerd tot een getal. Een leukere manier om dit te doen, en Agnes als een echt mens te behandelen, zou zijn om de ECMAScript 6-methode te gebruiken findIndex, die wordt ondersteund in browsers die ook de Web Synthesis API ondersteunen, dus we zijn allemaal goed.
var agnesIndex = speechSynthesis.getVoices (). findIndex (functie (stem) return voice.name === 'Agnes';);
Nu we de index van de stemmenreeks hebben waar de stem van Agnes in zit, kunnen we die stem instellen voor gebruik door onze uiting.
utterance.voice = speechSynthesis.getVoices () [agnesIndex]; utterance.text = 'It \' s me Agnes! Ik ben in leven! Dank je.'; speechSynthesis.speak (uitingen);
Geen probleem, Agnes. Je hebt me echter doodsbang gemaakt met die luide stem van je. Laten we u een beetje teleurstellen.
Gelukkig is alles wat we moeten doen om de stem te kalmeren te zeggen:
utterance.volume = 0,5;
Hiermee wordt het volume van de stem van Agnes ingesteld op de helft van wat het oorspronkelijk was, 0 was stil en 1 was het luidst. De parameters die we kunnen aanpassen, eindigen hier echter niet. Is de stem die je hebt gekozen te traag of te snel? U kunt de snelheid wijzigen waarin de stem uw stuk tekst leest met behulp van het kenmerk tarief.
uitspreken.snelheid = 0,8;
De standaardsnelheid waarmee een stem spreekt is 1. Dus hier vertragen we een vijfde. De langzaamste snelheid die u kunt opgeven is 0,1, terwijl de snelste is 10. Voices hebben ook hun eigen snelheidslimieten, dus zelfs als u een snelheid instelt op 10, spreekt deze mogelijk niet 10 keer zo snel als de standaardsnelheid.
Een andere interessante parameter die u kunt wijzigen, is toonhoogte. Wil je dat Agnes klinkt als Barry White? Toonhoogte is waar hij is.
utterance.pitch = 0.2;
Hier is de laagste toonhoogte die je kunt instellen 0, terwijl je, om je stem te laten klinken alsof ze net een helium-gevulde aardeekhoorn hebben ingeademd, de toonhoogte op 2 instelt, de hoogste die kan worden afgespeeld.
Oké, laten we wat plezier maken. De Speech Synthesis API heeft een paar verschillende evenementen waarmee we kunnen spelen. Deze gebeurtenissen, begin, einde, pauze, en hervatten laten we onder andere een functie bellen als die gebeurtenis plaatsvindt. Door naar de eindgebeurtenis te luisteren, kunnen we een functie bellen die een andere stem laat spreken, waardoor de illusie van een gesprek ontstaat.
Laten we twee verschillende stemmen instellen en een ieder een zin geven om te zeggen. Vergeet niet dat al uw code in de setTimeout functie om ervoor te zorgen dat alle mogelijke stemmen zijn geladen.
var voices = window.speechSynthesis.getVoices (), agnesUtterance = new SpeechSynthesisUtterance (), albertUtterance = new SpeechSynthesisUtterance (); agnesUtterance.voice = stemmen [11]; albertUtterance.voice = stemmen [12]; agnesUtterance.text = 'Hallo Albert, ik ben Agnes'; albertUtterance.text = 'Hallo Agnes, leuk je te ontmoeten!';
Voordat we Agnes beginnen te spreken, in de eindeloos functieaanroep zetten we het antwoord van Albert zo in. Dit betekent dat wanneer Agnes stopt met spreken, Albert zal beginnen.
agnesUtterance.onend = function () speechSynthesis.speak (albertUtterance);
Ziet er goed uit. Klaar om een diepgaand gesprek te horen? Start Agnes op de gebruikelijke manier af.
speechSynthesis.speak (agnesUtterance);
Verbazingwekkend. Je browser praat nu tegen zichzelf. Skynet is zelfbewust geworden.
