Share
În 1968, 2001: A fost lansată o Odisee spațială. Este cunoscut ca HAL 9000, un supercomputer capabil de un mare număr de lucruri: recunoașterea feței, șahul și chiar citirea buzelor. Dar singurul lucru care a rămas în mintea audiențelor și a influențat fiecare piesă de ficțiune științifică a fost capacitatea lui HAL de a vorbi.
Aceste zile, un computer vorbind o piesă de text care i-a fost dată este obișnuită. Cu toate acestea, abia recent ați reușit să faceți acest lucru direct într-un browser web. Asta vă voi arăta în acest tutorial.
API-ul de sinteză a vorbirii vă permite să utilizați JavaScript pentru a prelua o piesă de text și a le scoate la difuzoare ca discurs. Ca și în cazul tuturor API-urilor noi, nu este implementat în toate browserele, așa că verificați caniuse.com pentru suportul actual. La momentul redactării, este susținută în Chrome și Safari, atât pe desktop, cât și pe mobil.
Vei fi surprins de cât de simplu este să-ți duci browserul să înceapă să vorbească cu tine. Pentru a începe, creați un nou fișier HTML cu un etichetă de script înăuntru sau deschideți consola JavaScript a browserului. Apoi scrieți în interior următoarea linie.
var utterance = noua SpeechSynthesisUtterance ();
Ceea ce facem aici este crearea unui nou exemplu de exprimare sintetizată. Gândiți-vă la acest lucru ca pe un mic plic care conține instrucțiuni care îi spun browserului ce ar trebui să spună și cum să-l spună.
În primul rând, trebuie să ne gândim la ceva extrem de important pentru browserul nostru să spunem.
utterance.text = 'Numele meu este Guybrush Threepwood, și vreau să fiu un pirat!';
Atunci suntem gata să plecăm. Să dăm mesajul nostru sintetizatorului de voce al browserului și să-i spunem să vorbească. Amintiți-vă în prealabil să activați volumul din computer.
speechSynthesis.speak (exprimare);
Wow, un computer vorbitor. La fel de ușor ca asta.
Acum, în cazul în care nu a fost suficient de impresionant, API-ul sintetizatorului ne oferă o mulțime de metode și atribute pe care le putem folosi la „rostire“ nostru de a modifica în scopul de a schimba ceea ce pare. Cel mai notabil dintre acestea este acela de a schimba vorbirea "persoanei". Sistemul dvs. de operare vine cu o varietate de voci încorporate pentru a alege, plus browser-ul dvs. aruncă în câteva altele suplimentare pentru o măsură bună. Să vedem ce voci avem la dispoziție.
Accentsconagua
speechSynthesis.getVoices () pentru fiecare (funcția (voce) console.log ('Bună! Numele meu este', voice.name););Dacă nu vedeți nicio ieșire, este posibil să fie nevoie să executați din nou această funcție. Chrome are un bug ciudat în care trebuie să solicite de două ori numărul de voci pentru a se iniția corect. Pentru a depăși acest lucru, faceți următoarele.
// Spuneți Chrome să se trezească și să obțină vocile. speechSynthesis.getVoices (); setTimeout (functie () // Dupa o secunda, obtineti vocile pe care Chrome le asculta in acelasi timp. );, 1000);
Numărul de voci variază de la sistemul de operare la sistemul de operare, dar pe OS X am 74! Mai multe personaje decât un episod al lui The Simpsons. Hai să încercăm unul.
După cum probabil veți vedea, speechSynthesis.getVoices () returnează un tablou. Am putea stabili pur și simplu vocea făcând:
utterance.voice = speechSynthesis.getVoices () [11];
Acest lucru ar spune browser-ului să folosească "voce 11", care în cazul meu este "Agnes". Poor Agnes, redus la un număr. O modalitate mai bună de a face acest lucru și de a trata Agnes ca o ființă umană reală ar fi utilizarea metodei ECMAScript 6 findIndex, care este susținută de browsere care acceptă și API-ul Web Synthesis, deci suntem cu toții buni.
var agnesIndex = speechSynthesis.getVoices (). findIndex (funcția (voce) return name === 'Agnes';);
Acum, că avem indicele grilei vocii pe care o are vocea lui Agnes, putem stabili vocea aceea să fie folosită prin cuvântul nostru.
utterance.voice = speechSynthesis.getVoices () [agnesIndex]; utterance.text = 'Eu sunt Agnes! Traiesc! Mulțumesc.'; speechSynthesis.speak (exprimare);
Nici o problemă, Agnes. M-ai speriat jumătate de moarte cu vocea ta puternică, deși. Să ne întoarcem puțin.
Din fericire, tot ceea ce trebuie să facem pentru a opri vocea este să spunem:
utterance.volume = 0.5;
Aceasta determină volumul vocii lui Agnes să fie jumătate din ceea ce inițial era, 0 fiind tăcut și 1 fiind cel mai tare. Parametrii pe care îi putem modifica nu se termină, totuși. Este vocea pe care ați ales-o prea lentă sau prea repede? Puteți schimba rata în care vocea vă citește piesa de text folosind atributul rate.
utterance.rate = 0.8;
Rata implicită în care vorbește o voce este 1. Deci, aici o încetinim cu o cincime. Cea mai mică rată pe care o puteți specifica este 0,1, în timp ce cea mai rapidă este 10. Vocile au, de asemenea, propriile limite de rată, deci chiar dacă setați o rată la 10, este posibil să nu vorbească de 10 ori mai repede decât rata implicită.
Un alt parametru interesant pe care îl puteți modifica este pitchul. Vrei Agnes să sune ca Barry White? Pitch este locul în care se află.
utterance.pitch = 0.2;
Aici, cel mai mic pas pe care îl puteți seta este 0, în timp ce pentru a vă face vocea să sune ca și cum tocmai a inhalat un chiuleu încărcat cu heliu, setați pasul la 2,.
Bine, hai să ne distrăm acum. Interfața de sinteză a vorbirii are câteva evenimente diferite la care ne putem juca. Aceste evenimente, start, Sfârșit, pauză, și relua printre altele, să ne permită să apelăm o funcție când se întâmplă acest eveniment. Prin ascultarea evenimentului final, putem numi o funcție care declanșează o altă voce vorbind, oferind astfel iluzia unei conversații.
Să formăm două voci diferite și să le oferim fiecăruia o propoziție. Amintiți-vă, tot codul dvs. ar trebui să fie în setTimeout pentru a vă asigura că toate vocile posibile au fost încărcate.
var voices = fereastra.speechSynthesis.getVoices (), agnesUtterance = noua SpeechSynthesisUtterance (), albertUtterance = new SpeechSynthesisUtterance (); agnesUtterance.voice = voci [11]; albertUtterance.voice = voci [12]; agnesUtterance.text = 'Bună ziua lui Albert, eu sunt Agnes'; albertUtterance.text = 'Bună Agnes, bine să te cunosc!';
Înainte de a începe Agnes vorbind, în pe sfarsit apelați la funcția de răspuns a lui Albert. Asta înseamnă că atunci când Agnes oprește să vorbească, Albert va începe.
agnesUtterance.onend = funcție () speechSynthesis.speak (albertUtterance);
Arata bine. Sunteți gata să auziți o conversație în profunzime? Porni Agnes în mod obișnuit.
speechSynthesis.speak (agnesUtterance);
Uimitor. Browserul tău discută acum cu el însuși. Skynet a devenit conștient de sine.
