Ved hjelp av Web-Speech API for Flerspråklige Oversettelser

0
27

Siden de tidlige dager av science fiction, vi har fantasert om maskiner som snakker til oss. I dag er det vanlig. Selv så, teknologi for å lage websider snakke er fortsatt ganske ny.

Vi kan gjøre våre sider på nettet snakke med SpeechSynthesis en del av nettale. Dette er fortsatt ansett som en eksperimentell teknologi, men det har stor støtte i den nyeste versjon av Chrome, Safari og Firefox.

Den morsomme delen for meg er å bruke denne teknologien med fremmedspråk. For at, Mac OSX har god støtte for dette i alle nettlesere. På Windows, må du bruke Chrome. Vi kommer til å gå gjennom en tre-trinns prosess for å opprette en side som snakker det samme tekst på flere språk. Noen av de grunnleggende koden er hentet fra dokumentasjonen som finnes her, men det endelige produktet legger noen morsomme funksjoner som kan sees på min Polyglot CodePen her.

Skjermbilde av det ferdige Polyglot-appen med en meny av språk.

Trinn 1: Start Enkelt

La oss opprette en grunnleggende side med en <textarea> for den teksten vi vil siden for å snakke og inkluderer en knapp til å klikke for å utløse tale.

<div id=”wrapper”>
<h1>Enkel Tekst-Til-Tale</h1>
<p id=”advarsel”>Beklager, nettleseren din støtter ikke nettale.</p>
<textarea id=”txtFld”>jeg elsker lyden av min datagenerert stemme.</textarea>
<label for=”txtFld”>Skriv inn teksten ovenfor. Klikk deretter på Tale-knappen.</du etikett>
<div>
<- knappen type=”button” id=”speakBtn”>Snakker</button>
<br>
<p>Merk: For best resultat, på en Mac, kan du bruke den nyeste versjonen av Chrome, Safari eller FireFox. På Windows, bruker du Chrome.</p>
</div>
</div>

Avsnittet med ID-varsling vil bare bli vist hvis JavaScript oppdager ingen støtte for nettale. Vær også oppmerksom på ID-verdier for textarea og knappen som vi vil bruke dem i vår JavaScript.

Føl deg fri til å stil HTML-noen måte du ønsker. Du er også velkommen til å jobbe frem demoen jeg har laget:

Se Penn
Tekst-Til-Tale-Del 1 av Steven Estrella (@sgestrella)
på CodePen.

Å legge til en stil som regel for funksjonshemmede tilstand av-knappen er en god idé å unngå forvirring for de få menneskene som fortsatt bruk inkompatible nettlesere, som nå-sjarmerende Internet Explorer. Også, la oss bruke en stil som regel å skjule advarsel som standard, slik at vi kan styre når det faktisk er nødvendig.

knappen:disabled (deaktivert) {
markøren: ikke-tillatt;
dekkevne: 0.3;
}

#advarsel {
farge: rød;
display: none;
font-size: 1.4 rem;
}

Nå på JavaScript! Først legger vi til to variabler for å tjene som referanser til “Snakke” – knappen som utløser tale og til <textarea> – element. En hendelse som lytter på bunnen av koden forteller dokumentet til å vente til DOM elementer legg inn før du kaller init () – funksjonen. Jeg brukte et praktisk verktøy funksjon jeg kaller “qs” som er definert i bunnen av koden. Det er en snarvei alternativ til dokumentet.querySelector og det velger hva velgeren verdi jeg pass til det, og returnerer et objekt-referanse. Deretter vil vi legge til en hendelse som lytter til speakBtn objekt å gjøre knappen ringe snakke () – funksjonen.

Snakk () – funksjonen oppretter en ny instans av SpeechSynthesisUtterance objekt som er en del av nettale. Det legger tekst fra <textarea>(bruker-ID txtFld) til tekst eiendom. Da uttalelsen er sendt til speechSynthesis metode i vinduet objektet og vi hører talt tekst. Den spesielle stemmen du hører vil variere, avhengig av nettleser og operativsystem. På min Mac, for eksempel, min standard språk er satt til Amerikansk engelsk og standard stemme for engelsk er Alex. I Trinn 2, vil vi legge til kode for å lage en meny for å hjelpe brukeren velge stemmer for alle tilgjengelige språk.

la speakBtn, txtFld;

function init() {
speakBtn = qs(“#speakBtn”);
txtFld = qs(“#txtFld”);
speakBtn.addEventListener(“klikk”, snakk, false);
if (!vinduet.speechSynthesis) {
speakBtn.deaktivert = true;
qs(“#advarsel”).stil.vis = “block”;
}
}

funksjonen snakke() {
la u = new SpeechSynthesisUtterance();
u.tekst = txtFld.verdi;
speechSynthesis.snakke(u);
}

// Gjenbrukbare verktøyet funksjoner
funksjonen qs(selectorText) {
// Lagrer mye av å skrive for de som unngå jQuery
tilbake dokumentet.querySelector(selectorText);
}

dokumentet.addEventListener(‘DOMContentLoaded’, function (e) {
try {init();} catch (feil) {
– konsollen.logg(“Data ikke legg”, error);
}
});

Trinn 2: En Meny med Internasjonale Stemmer

Hvis vi ønsker å bruke noe annet enn standard språk og tale, er vi nødt til å legge til litt mer kode. Så det er det vi skal takle neste.

Vi kommer til å legge til en utvalgt element for å holde meny stemme alternativer:

<h1>Flerspråklige Tekst-Til-Tale</h1>
<div class=”uiunit”>
<label for=”speakerMenu”>Stemme: </label>
<velg id=”speakerMenu”></select> snakker <span id=”language”(språk>engelsk.</span>
<!– etc. –>
</div>

Før vi lage kode for å fylle meny-alternativer, vi bør ta vare på koden som vil hjelpe oss med å koble språk koder til sine respektive navn. Hvert språk er identifisert av en to-bokstavers kode, for eksempel “no” for engelsk, eller “es” for Español (spansk). Vi vil ta en enkel liste av disse kodene, og deres tilhørende språk og lage en array av objekter på skjemaet: {“kode”: “pt”, “name”: “portugisisk”}. Så får vi trenger en verktøy-funksjon for å hjelpe oss med å søke i en array av objekter for verdien av en gitt egenskap. Vi vil bruke den i et par minutter for å raskt finne språket navn som samsvarer med språkkoden for den valgte stemme. Kopier koden nedenfor slik at de to funksjonene er like over og like under // Generic-Verktøyet Funksjoner kommentar.

funksjonen getLanguageTags() {
la langs = [“ar-Arabic”,”cs-Czech”,”da-Danish”,”de-German”,”el-Greek”,”en-English”,”eo-Esperanto”,”es-Spanish”,”et-Estonian”,”fi-Finnish”,”fr-French”,”he-Hebrew”,”hi-Hindi”,”hu-Hungarian”,”id-Indonesian”,”it-Italian”,”ja-Japanese”,”ko-Korean”,”la-Latin”,”lt-Lithuanian”,”lv-Latvian”,”nb-norsk Bokmål”,”nl-nederlandske”,”nn-norsk Nynorsk”,”no-Norwegian”,”pl-Polish”,”pt-Portuguese”,”ro-Romanian”,”ru-Russian”,”sk-Slovak”,”sl-Slovenian”,”sq-Albanian”,”sr-Serbian”,”sv-Swedish”,”th-Thai”,”tr-Turkish”,”zh-Chinese”];
la langobjects = [];
for (la i=0;i<langs.lengde;i++) {
la langparts = langs[jeg].split(“-“);
langobjects.trykk({“kode”:langparts[0],”name”:langparts[1]});
}
tilbake langobjects;
}

// Generic-Verktøyet Funksjoner
funksjonen searchObjects(array, prop, sikt, casesensitive = false) {
// Søker en array av objekter for en gitt periode i en gitt eiendom
// Returnerer en matrise av bare de objekter som tester positivt
la regex = new RegExp(sikt, casesensitive ? “” : “jeg”);
la newArrayOfObjects = array.filteret(obj => regex.test(obj[prop]));
tilbake newArrayOfObjects;
}

Nå kan vi bygge ut det valg for å velge elementet ved hjelp av JavaScript. Vi trenger å deklarere variabler på toppen av vår JavaScript for å holde referanser til #speakerMenu velg elementet, #språk span element, utvalg av syntetiske stemmer (allVoices), en rekke koder for å identifisere språk (langtags), og et sted å holde oversikt av den valgte stemme (voiceIndex). Legg dem bare etter to variable erklæringer vi opprettet i Trinn 1.

la speakBtn, txtFld, speakerMenu, språk, allVoices, langtags;
la voiceIndex = 0;

Den oppdaterte init () – funksjonen angir noen flere referanser til #speakerMenu og #språk span og steder alle språk koder i en array av objekter som kalles langtags. Funksjonen for gjenkjenning delen av koden endringer også her. Hvis Web-Speech API-er som støttes, setUpVoices () – funksjonen kalles. Også, for Chrome, vi må lytte for endringer lagt inn stemmer og gjenta oppsett når det er nødvendig. Chrome meningsmålinger de tilgjengelige stemmer hver gang du veksle mellom en av sine eksterne stemmer (de som er oppført med Google prefiks mens du er i Chrome), og at alle andre stemmer som er lagret lokalt på brukerens operativsystem.

function init() {
speakBtn = qs(“#speakBtn”);
txtFld = qs(“#txtFld”);
speakerMenu = qs(“#speakerMenu”);
språk = qs(“#language”);
langtags = getLanguageTags();
speakBtn.addEventListener(“klikk”, snakk, false);
speakerMenu.addEventListener(“endre”, selectSpeaker, false);
if (window.speechSynthesis) {
hvis (speechSynthesis.onvoiceschanged !== undefined) {
// Chrome får stemmer asynkront, slik at dette er nødvendig
speechSynthesis.onvoiceschanged = setUpVoices;
}
setUpVoices(); // For alle de andre nettlesere
} else{
speakBtn.deaktivert = true;
speakerMenu.deaktivert = true;
qs(“#advarsel”).stil.vis = “block”;
}
}

Den setUpVoices () – funksjonen får du et utvalg av det som er kalt SpeechSynthesisVoice objekter ved å ringe getVoices () – metoden for speechSynthesis objekt. Dette er gjort i vår kode bruker getAllVoices () – funksjonen. Dessverre, jeg har funnet ut at speechSynthesis.getVoices () – metoden gir noen ganger duplikater i listen, så jeg viet ni linjer med kode for å eliminere dem. Til slutt, ved enden av getAllVoices(), jeg har lagt til et unikt id-nummer til hver av de SpeechSynthesisVoice objekter. Som vil hjelpe oss i Trinn 3 når vi trenger for å filtrere listen av stemmer for å kun vise stemmer for et gitt språk. Når du er ferdig, allVoices utvalg vil inneholde objekter som ser ut som de nedenfor. Hvert objekt har id, voiceURI, navn og lang attributter. Den localService attributtet angir om koden for stemmen er lagret på brukerens datamaskin eller eksternt på Googles servere. Legg merke til den lang-attributtet. Verdien består av en to-bokstavers språkkode (f.eks. “es” for spansk) etterfulgt av en bindestrek og en region kode (for eksempel “MX” for Mexico). Dette identifiserer språk og regional aksent for hver stemme.

{id:48, voiceURI:”Pauline”, navn:”Pauline”, lang: “es-MX”, localService:true},
{id:52, voiceURI:”Samantha”, navn:”Samantha”, lang: “en-US”, localService:true},
{id:72, voiceURI:”Google Deutsch”, navn:”Google Deutsch”, lang: “no”, localService:false}

Siste linje av setUpVoices() kaller en funksjon for å opprette listen over valg som vil vises i #speakerMenu velg elementet. Verdien av id-attributt for hver stemme er plassert i verdi-attributtet for alternativet. Navnet og lang attributter er synlig tekst elementer som vises i hvert alternativ sammen med “(premium)” for de stemmene som er merket på den måten på noen operativsystemer og nettlesere.

funksjonen setUpVoices() {
allVoices = getAllVoices();
createSpeakerMenu(allVoices);
}

funksjonen getAllVoices() {
la voicesall = speechSynthesis.getVoices();
la vuris = [];
la stemmene = [];

voicesall.forEach(function(obj,index) {
la uri = obj.voiceURI;
if (!vuris.inkluderer(uri)) {
vuris.trykk(uri);
stemmer.trykk(obj);
}
});

stemmer.forEach(function(obj,index) {obj.id = indeks;});
tilbake stemmer;
}

funksjonen createSpeakerMenu(stemmer) {
la code = ;

stemmer.forEach(function(vobj,i) {
kode += `<option value=${vobj.id}>`;
kode += `${vobj.navn} (${vobj.lang})`;
kode += vobj.voiceURI.inneholder”.premium”) ? ‘(premium)’ : ;
kode += `</option>`;
});

speakerMenu.innerHTML = kode;
speakerMenu.selectedIndex = voiceIndex;
}

Kanskje du husker at i init () – funksjonen, som vi hadde satt opp en hendelse som lytter til anrop selectSpeaker() når speakerMenu endringer. Den selectSpeaker () – funksjonen lagrer selectedIndex av #speakerMenu velg elementet. Neste, det blir verdien av det valgte elementet som vil være et heltall som svarer til indeksen som stemme i allVoices () – matrise. Så, nå har vi hentet SpeechSynthesisVoice vi ønsker. Vi må da ta de to første bokstavene i lang-attributtet (for eksempel “no,” “es” og “ru”, “på de,” “fr”) og bruker denne koden for å søke langtags rekke språk objekter for å finne det aktuelle språket navn. Den searchObjects () – funksjonen returnerer en matrise som sannsynligvis kommer til å ha bare én oppføring. Uansett, den første oppføringen (langcodeobj[0]) er alt vi trenger. Til slutt, vi tilordne navnet til den innerHTML egenskap av språket span og det viser seg på skjermen som forventet.

// Kode for når brukeren velger en høyttaler
funksjonen selectSpeaker() {
voiceIndex = speakerMenu.selectedIndex;
la sval = Antall(speakerMenu.verdi);
la stemmen = allVoices[sval];
la langcode = stemme.lang.substring(0,2);
la langcodeobj = searchObjects(langtags, “kode”, langcode);
språket.innerHTML = langcodeobj[0].navn;
}

Det eneste igjen for Trinn 2 for å være komplett, er å sørge for talen () – funksjonen virker når vi klikker på “Snakke” – knappen. Endre snakke () – funksjonen til å legge til egenskaper til å tale for å kontrollere hvilke stemme og språk er brukt og hvor fort å snakke teksten. I min testing, med en pris området 0,5 til 2 fungerer pålitelig også. Jeg fant ut at en pris under 0.5 har ingen effekt. Jeg tror 0.8 fungerer som en fin standard for mange språk, men som vi vil se i Trinn 3, det er en enkel måte å la brukeren bestemme.

funksjonen snakke() {
la sval = Antall(speakerMenu.verdi);
la u = new SpeechSynthesisUtterance();
u.stemmen = allVoices[sval];
u.lang = u.stemmen.lang;
u.tekst = txtFld.verdi;
u.pris = 0.8;
speechSynthesis.snakke(u);
}

Det er det for Trinn 2! Her er resultatet av hva vi har gjort så langt:

Se Penn
Tekst-Til-Tale-Del 2 av Steven Estrella (@sgestrella)
på CodePen.

Spille rundt med den litt. Noen ganger er det gøy å skrive et engelsk uttrykk, og tilordne deretter et fransk eller tysk høyttaler for å si det. Derimot, hvis du ønsker å høre din verste første året spanske student, skriv inn et spanske uttrykket og tilordne det til å bli snakket av en engelsk stemme.

Trinn 3: Komplett Polyglot

Vi er i den siste strekningen! Noen av de tingene vi gjør i dette trinnet vil være biter av polske til UI, men det er noen funksjonelle ting vi trenger å gjøre så godt til-knappen for alt opp. spesielt kommer vi til å:

  • Lage en meny av tilgjengelige språk
  • Tillate brukere å angi hastigheten på talen
  • Definere en standard frase i tekstboksene som oversetter på valg av språk

Her er hva vi ser på:

Vi legge til en dropdown meny, talehastighet innstillingen, og en standard frase.

I HTML, vi kommer til å legge til en ny <select> – element for språk-menyen, og en rekke innspill (som vil bli brukt senere for å angi frekvensen av tale). Merknad vi har slettet #språk span ettersom det ikke lenger er relevant når språk-menyen fungerer.

<div class=”uiunit”>
<label for=”languageMenu”>Language: </label>
<velg id=”languageMenu”>
<alternativet som er valgt verdi=”all”>Viser</option>
</>
</div>

<div class=”uiunit”>
<label for=”speakerMenu”>Stemme: </label><velg id=”speakerMenu”></select>
</div>

<div class=”uiunit”>
<label for=”rateFld”>Speed: </label>
<input type=”antall” id=”rateFld” min=”0.5″ max=”2″ trinn=”0.1″ value=”0.8″ />
</div>

I JavaScript, må vi endre variabelen erklæringer. Vi vil holde styr på alle dialekter i allLanguages utvalg og bare de viktigste språkene i primaryLanguages utvalg. Den langhash og langcodehash rekker vil tjene som hash-tabeller slik at vi raskt kan få et språk navn når alt vi vet er det to-bokstavers språkkode og vice versa. Bør vi trenger bare å sette i språk-menyen når så en Boolsk flagg for initialSetup kommer i hendig.

la speakBtn, txtFld, speakerMenu, allVoices, langtags;
la voiceIndex = 0;
la allLanguages, primaryLanguages, langhash, langcodehash;
la rateFld, languageMenu, blurbs;
la initialSetup = true;
la defaultBlurb = “jeg liker den tradisjonelle musikken i mitt hjemland.”;

I den nye init () – funksjonen, la oss ta linje language = qs(“#language”), og legg til den nye koden som vises her for å opprette blurbs, referanse rateFld antall innspill og languageMenu velger, og opprette hash-tabeller for å se up language navn og koder.

function init() {
// …holde eksisterende innhold, men slett language = qs(“#language”);
createBlurbs();
rateFld = qs(“#rateFld”);
languageMenu = qs(“#languageMenu”);
languageMenu.addEventListener(“endre”, selectLanguage, false);
langhash = getLookupTable(langtags, “navn”);
langcodehash = getLookupTable(langtags, “kode”);

if (window.speechSynthesis) {
// …holde eksisterende innhold
} else{
// …holde eksisterende innhold
languageMenu.deaktivert = true;
}
}

Den setUpVoices () – funksjonen trenger litt arbeid for å imøtekomme nye språk-menyen, og til å utløse filterVoices () – funksjonen, som vi vil bruke nå for å fylle #speakerMenu element. Også, vi kommer til å legge nye funksjoner: getAllLanguages() og getPrimaryLanguages(). Det første man setter sammen et utvalg av unike verdier for lang-attributtet funnet i allVoices array av objekter. Legg merke til den tilbake uttalelse bruker spredning operatør kombinert med et nytt Sett objekt for å sikre at den returnerte matrisen har ingen duplikater. Den getPrimaryLanguages () – funksjonen returnerer en matrise av de to-brevet land. Som gjør en mindre liste over de viktigste språkene, uten referanse til regionale dialekter.

funksjonen setUpVoices() {
allVoices = getAllVoices();
allLanguages = getAllLanguages(allVoices);
primaryLanguages = getPrimaryLanguages(allLanguages);
filterVoices();
hvis (initialSetup && allVoices.lengde) {
initialSetup = false;
createLanguageMenu();
}
}

funksjonen getAllLanguages(stemmer) {
la langs = [];
stemmer.forEach(vobj => {
langs.trykk(vobj.lang.trim());
});
tilbake […nytt Sett(langs)];
}

funksjonen getPrimaryLanguages(langlist) {
la langs = [];
langlist.forEach(vobj => {
langs.trykk(vobj.substring(0,2));
});
tilbake […nytt Sett(langs)];
}

Den setUpVoices () – funksjonen anrop to ekstra funksjoner. Den filterVoices () – funksjonen får to-bokstavers språkkode fra den aktuelle verdien av #languageMenu velger du meny og bruker det til å filtrere allVoices utvalg og returnere bare de tilgjengelige stemme alternativer for det valgte språket. Det så går at matrisen til createSpeakerMenu () – funksjonen (uendret fra Trinn 2) som fyller #speakerMenu med valg. Deretter filterVoices() henter blurb er knyttet til den valgte språk og plasserer det i den textarea, der det kan redigeres eller erstattet.

Og, i tilfelle Chrome bygger denne menyen, vil den lagrede voiceIndex brukes til å gjenopprette det aktive utvalet. Neste createLanguageMenu () – funksjonen bruker våre hash-tabeller for å skape den nødvendige menyen alternativer for languageMenu velg elementet. Den selectLanguage () – funksjonen er aktivert når brukeren velger et språk. Det så utløser filterVoices() og angir #speakerMenu for å vise den første tilgjengelige alternativet.

funksjonen filterVoices() {
la langcode = languageMenu.verdi;
stemmer = allVoices.filteret(function (stemme) {
tilbake langcode === “alle” ? til stede : stemme.lang.indexOf(langcode + “-“) >= 0;
});
createSpeakerMenu(stemmer);
la t = blurbs[languageMenu.valg[languageMenu.selectedIndex].tekst];
txtFld.value = t ? t : defaultBlurb;
speakerMenu.selectedIndex = voiceIndex;
}

funksjonen createLanguageMenu() {
la kode = `<alternativet som er valgt verdi=”all”>Viser</option>`;
la langnames = [];
primaryLanguages.forEach(function(lobj,i) {
langnames.trykk(langcodehash[lobj.substring(0,2)].navnet);
});
langnames.sorter();
langnames.forEach(function(lname,i) {
la lcode = langhash[lname].kode;
kode += `<option value=${lcode}>${lname}</option>`;
});
languageMenu.innerHTML = kode;
}

funksjonen selectLanguage() {
filterVoices();
speakerMenu.selectedIndex = 0;
}

I verktøyet funksjoner delen av koden mot bunnen, legg til følgende kode. Denne generisk lille verktøyet vil hjelpe deg neste gang du trenger for å lage en lookup-tabell for en rekke objekter. I vårt tilfelle vil vi bruke dette til å tillate oss å enkelt matche et språk kode med tilhørende språk navn og vice versa.

funksjonen getLookupTable(objectsArray, propname) {
tilbake objectsArray.redusere((akkumulator, currentValue) => (akkumulator[currentValue[propname]] = currentValue, akkumulator),{});
}

Jeg har lagt til et utvalg av tekst setninger, som hver er en oversettelse av det engelske uttrykket, “jeg liker den tradisjonelle musikken i mitt hjemland.” Språket det vises i vil tilsvare det som er valgt i språk-menn.

Her kan vi se skjønnheten i UTF-8 på full skjerm. Over getLanguagesTags () – funksjonen, la oss legge til koden som genererer alle de oversatt blurbs. Jeg bare lese spansk, engelsk, litt portugisisk, og svært lite tysk, så jeg må ta på tro på at Google Translate er å gi nøyaktige oversettelser for resten. Hvis noen av disse er morsmålet ditt, føler seg fri til å forlate korreksjoner i kommentarfeltet.

funksjonen createBlurbs() {
blurbs = {
“Arabisk” : “أنا أستمتع بالموسيقى التقليدية لبلدي الأم.”,
“Kinesisk” : “我喜歡我祖國的傳統音樂。”,
“Tsjekkisk” : “Mám rád tradiční hudbu mé rodné země.”,
“Dansk” : “Jeg nyder den traditionelle musik jeg mit hjemland.”,
“Dutch” : “Ik geniet van de traditionele muziek van mijn geboorteland.”,
“Engelsk” : “jeg liker den tradisjonelle musikken i mitt hjemland.”,
“Finsk” : “Nautin kotimaassani perinteistä musiikkia.”,
“Fransk” : “J’apprécie la musique traditionnelle de man betaler d’origine.”,
“Tysk” : “Ich genieße dø traditionelle Musik meiner Heimat.”,
“Gresk” : “Απολαμβάνω την παραδοσιακή μουσική της πατρίδας μου.”,
“Hebraisk” : “אני נהנה מהמוסיקה המסורתית של מולדתי.”,
“Hindi” : “मैं अपने मूल देश के पारंपरिक संगीत का आनंद लेता हूं।”,
“Ungarsk” : “Élvezem az én hazám hagyományos zenéjét.”,
“Indonesisk” : “Jeg menikmati musik tradisional negara asal saya.”,
“Italiensk” : “Mi piace la musica tradizionale del mio paese natale.”,
“Japansk” : “私は母国の伝統音楽を楽しんでいます。”,
“Koreansk” : “나는 내 조국의 전통 음악을 즐긴다.”,
“Norsk Bokmål” : “Jeg liker den tradisjonelle musikken jeg mitt hjemland.”,
“Polsk” : “Lubię tradycyjną muzykę mojego kraju.”,
“Portugisisk” : “Eu gosto da música tradisjonelle gjøre my país natal.”,
“Rumensk” : “Îmi sted muzica tradițională din țara mea natală.”,
“Russiske” : “Мне нравится традиционная музыка моей родной страны.”,
“Slovakisk” : “Mám rád tradičnú hudbu svojej rodnej krajiny.”,
“Spansk” : “Disfruto de la música de tradisjonelle mi país natal.”,
“Svenske” : “Jag njuter av traditionell musik jeg mitt hemland.”,
“Thai” : “ฉันเพลิดเพลินกับดนตรีดั้งเดิมของประเทศบ้านเกิดของฉัน”,
“Tyrkisk” : “Ülkemdeki geleneksel müzikten zevk alıyorum.”
};
}

Det er en siste ting: den numeriske inngang for å styre avspilling hastigheten av talen. Endre snakke () – funksjonen for å få tale pris fra antall input og vi er flink til å gå!

Her er det endelige produktet:

funksjonen snakke() {
…// ingen endringer bortsett fra rateFld.verdi referanse
u.pris = Antall(rateFld.verdi);
speechSynthesis.snakke(u);
}

Se Penn
Polyglot: Tekst-Til-Tale på Flere Språk, og med Steven Estrella (@sgestrella)
på CodePen.

En Ekte Verden Søknad

Min interesse i denne teknologien i gang for mange år siden i 1990, da jeg opprettet en 26-leksjon læreplanen som en del av min avhandling. Det ble levert med min første programmeringsspråk, HyperCard, på en Macintosh Plus, som hadde en primitiv tekst-til-tale-funksjon. Jeg brukte denne funksjonen til å gi noen tilbakemeldinger til brukeren mens de utviklet seg gjennom materialet. Mer nylig, i 2018, jeg har opprettet en gratis progressive web app som heter Buenos Verbos som hjelper spansk språk studenter søk og filter en database over 766 verb. Den valgte verb er så fullt conjugated og brukeren kan klikke former høre dem talt. Så kanskje websider kanskje har lyst til å snakke, og med litt fantasi kan du finne grunner til å oppmuntre dem. Spørsmålet er: hva vil du gjøre ditt nettsted si neste?

SHARE
Previous articleInline-SVG-Cache…
Next articleInline SVG… Bufret