Ako vytvoriť jednoduchú aplikáciu na rozpoznávanie reči

„V tomto 10-ročnom časovom rámci verím, že na interakciu nebudeme používať iba klávesnicu a myš, ale za ten čas dosiahneme dokonalé rozpoznávanie reči a výstup reči natoľko dobre, že sa stanú štandardnou súčasťou rozhranie." - Bill Gates, 1. októbra 1997

Technológia prešla dlhou cestou a s každým novým pokrokom sa k nej ľudská rasa viac pripája a túži po týchto nových skvelých funkciách naprieč všetkými zariadeniami.

S príchodom Siri, Alexa a Google Assistant začali používatelia technológií túžiť po rozpoznávaní reči pri každodennom používaní internetu. V tomto príspevku sa budem venovať tomu, ako integrovať natívne rozpoznávanie reči a syntézu reči do prehľadávača pomocou JavaScriptu WebSpeech API.

Podľa webových dokumentov Mozilla:

Rozhranie Web Speech API vám umožňuje začleniť hlasové údaje do webových aplikácií. Rozhranie Web Speech API má dve časti: SpeechSynthesis (prevod textu na reč) a SpeechRecognition (asynchrónne rozpoznávanie reči).

Požiadavky, ktoré budeme potrebovať pri zostavovaní našej aplikácie

V tejto jednoduchej aplikácii na rozpoznávanie reči budeme pracovať iba s tromi súbormi, ktoré budú všetky umiestnené v rovnakom adresári:

  • index.html obsahujúci kód HTML pre aplikáciu.
  • style.css obsahujúce štýly CSS.
  • index.js obsahujúci kód JavaScript.

Musíme tiež mať zavedených niekoľko vecí. Sú to tieto:

  • Základné znalosti JavaScriptu.
  • Webový server na spustenie aplikácie. Webový server pre Chromena tento účel postačuje.

Nastavuje sa naša aplikácia na rozpoznávanie reči

Začnime nastavením HTML a CSS pre aplikáciu. Nižšie je uvedený kód HTML:

      Speech Recognition  //soundbible.com/1598-Electronic-Chime.html -->

Tu je sprievodný štýl CSS:

body { background: #1e2440; color: #f2efe2; font-size: 16px; font-family: 'Kaushan Script', cursive; font-family: 'Shadows Into Light', cursive; } .container { position: relative; border: 1px solid #f2efe2; width: 40vw; max-width: 60vw; margin: 0 auto; border-radius: 0.1rem; background: #f2efe2; padding: 0.2rem 1rem; color: #1e2440; overflow: scroll; margin-top: 10vh; } .text-box { max-height: 70vh; overflow: scroll; } .text-box:focus { outline: none; } .text-box p { border-bottom: 1px dotted black; margin: 0px !important; } .fa { color: white; background: #1e2440; border-radius: 50%; cursor: pointer; margin-top: 1rem; float: right; width: 2rem; height: 2rem; display: flex !important; align-items: center; justify-content: center; } @media (max-width: 768px) { .container { width: 85vw; max-width: 85vw; } .text-box { max-height: 55vh; } }

Výsledkom kopírovania vyššie uvedeného kódu by malo byť niečo podobné tomuto:

Vylepšenie našej aplikácie na rozpoznávanie reči pomocou rozhrania WebSpeech API

V čase písania tohto článku je rozhranie WebSpeech API k dispozícii iba v prehliadačoch Firefox a Chrome. Jeho rozhranie syntézy reči žije na windowobjekte prehľadávača, speechSynthesiszatiaľ čo jeho rozhranie na rozpoznávanie reči žije na windowobjekte prehľadávača ako SpeechRecognitionvo Firefoxe, aj webkitSpeechRecognitionv prehliadači Chrome.

Rozhranie rozpoznávania nastavíme na SpeechRecognitionbez ohľadu na to, v akom prehliadači sa nachádzame:

window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;

Ďalej vytvoríme inštanciu rozhrania rozpoznávania reči:

const recognition = new SpeechRecognition(); const icon = document.querySelector('i.fa.fa-microphone') let paragraph = document.createElement('p'); let container = document.querySelector('.text-box'); container.appendChild(paragraph); const sound = document.querySelector('.sound');

V kóde vyššie, okrem spúšťania rozpoznávanie reči, sme tiež vybrali icon, text-box,a soundprvkov na stránke. Tiež sme vytvorili element odseku, ktorý bude obsahovať slová, ktoré hovoríme, a pripojili sme ho k text-box.

Vždy, keď kliknete na ikonu mikrofónu na stránke, chceme prehrať zvuk a spustiť službu rozpoznávania reči. Aby sme to dosiahli, pridáme k ikone poslucháča udalostí kliknutí:

icon.addEventListener('click', () => { sound.play(); dictate(); }); const dictate = () => { recognition.start(); }

V poslucháčovi udalostí sme po prehraní zvuku pokračovali a vytvorili a zavolali dictatefunkciu. dictateFunkcia spustí službu rozpoznávania reči volaním startmetódy na inštanciu rozpoznávanie reči.

Ak chcete vrátiť výsledok bez ohľadu na to, čo používateľ povie, musíme resultdo našej inštancie rozpoznávania reči pridať udalosť. dictateFunkcia potom bude vyzerať takto:

const dictate = () => { recognition.start(); recognition.onresult = (event) => { const speechToText = event.results[0][0].transcript; paragraph.textContent = speechToText; } }

Výsledné eventvráti a, SpeechRecognitionEventktoré obsahuje resultsobjekt. Toto zase obsahuje transcriptvlastnosť obsahujúcu rozpoznaný prejav v texte. Rozpoznaný text uložíme do volanej premennej speechToTexta vložíme ho do paragraphprvku na stránke.

Ak spustíme aplikáciu v tomto okamihu, klikneme na ikonu icona niečo povieme, mala by sa na stránke vysunúť.

Zabalené to s textom na reč

Na pridanie textu do reči do našej aplikácie použijeme speechSynthesisrozhranie API WebSpeech. Začneme jeho inštanciou:

const synth = window.speechSynthesis;

Ďalej vytvoríme funkciu, speakktorú zavoláme, kedykoľvek chceme, aby aplikácia niečo povedala:

const speak = (action) => { utterThis = new SpeechSynthesisUtterance(action()); synth.speak(utterThis); };

Táto speakfunkcia prijíma funkciu nazvanú actionako parameter. Funkcia vráti reťazec, ktorý je odovzdaný SpeechSynthesisUtterance. SpeechSynthesisUtteranceje rozhranie API WebSpeech, ktoré obsahuje obsah, ktorý by mala služba na rozpoznávanie reči čítať. Potom speaksa na jeho inštanciu zavolá metóda speechSynthesis, ktorá odovzdá obsah na čítanie.

Aby sme to vyskúšali, musíme vedieť, kedy používateľ hovorí a povie keyword.Našťastie existuje metóda, ktorá overí, či:

const dictate = () => { ... if (event.results[0].isFinal) { if (speechToText.includes('what is the time')) { speak(getTime); }; if (speechToText.includes('what is today\'s date ')) { speak(getDate); }; if (speechToText.includes('what is the weather in')) { getTheWeather(speechToText); }; } ... } const getTime = () => { const time = new Date(Date.now()); return `the time is ${time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })}` }; const getDate = () => { const time = new Date(Date.now()) return `today is ${time.toLocaleDateString()}`; }; const getTheWeather = (speech) => { fetch(`//api.openweathermap.org/data/2.5/weather?q=${speech.split(' ')[5]}&appid=58b6f7c78582bffab3936dac99c31b25&units=metric`) .then(function(response){ return response.json(); }) .then(function(weather){ if (weather.cod === '404') { utterThis = new SpeechSynthesisUtterance(`I cannot find the weather for ${speech.split(' ')[5]}`); synth.speak(utterThis); return; } utterThis = new SpeechSynthesisUtterance(`the weather condition in ${weather.name} is mostly full of ${weather.weather[0].description} at a temperature of ${weather.main.temp} degrees Celcius`); synth.speak(utterThis); }); };

V kóde vyššie sme volali isFinalmetódu výsledku našej udalosti, ktorá sa vracia truealebo falsepodľa toho, či používateľ dohovoril.

Ak je používateľ dohovorený, skontrolujeme, či prepis toho, čo bolo povedané, obsahuje kľúčové slová ako what is the timeatď. Ak sa tak stane, nazývame speakfunkcie a odovzdať jednu z troch funkcií getTime, getDatealebo getTheWeatherktoré všetky return reťazec pre prehliadač na čítanie.

Náš index.jssúbor by mal teraz vyzerať takto:

window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition; const synth = window.speechSynthesis; const recognition = new SpeechRecognition(); const icon = document.querySelector('i.fa.fa-microphone') let paragraph = document.createElement('p'); let container = document.querySelector('.text-box'); container.appendChild(paragraph); const sound = document.querySelector('.sound'); icon.addEventListener('click', () => { sound.play(); dictate(); }); const dictate = () => { recognition.start(); recognition.onresult = (event) => { const speechToText = event.results[0][0].transcript; paragraph.textContent = speechToText; if (event.results[0].isFinal) { if (speechToText.includes('what is the time')) { speak(getTime); }; if (speechToText.includes('what is today\'s date')) { speak(getDate); }; if (speechToText.includes('what is the weather in')) { getTheWeather(speechToText); }; } } } const speak = (action) => { utterThis = new SpeechSynthesisUtterance(action()); synth.speak(utterThis); }; const getTime = () => { const time = new Date(Date.now()); return `the time is ${time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })}` }; const getDate = () => { const time = new Date(Date.now()) return `today is ${time.toLocaleDateString()}`; }; const getTheWeather = (speech) => { fetch(`//api.openweathermap.org/data/2.5/weather?q=${speech.split(' ')[5]}&appid=58b6f7c78582bffab3936dac99c31b25&units=metric`) .then(function(response){ return response.json(); }) .then(function(weather){ if (weather.cod === '404') { utterThis = new SpeechSynthesisUtterance(`I cannot find the weather for ${speech.split(' ')[5]}`); synth.speak(utterThis); return; } utterThis = new SpeechSynthesisUtterance(`the weather condition in ${weather.name} is mostly full of ${weather.weather[0].description} at a temperature of ${weather.main.temp} degrees Celcius`); synth.speak(utterThis); }); };

Klikneme na ikonu a vyskúšame jednu z nasledujúcich fráz:

  • Koľko je hodín?
  • Aký je dnes dátum?
  • Aké je počasie v Lagose?

Mali by sme dostať odpoveď z aplikácie.

Záver

V tomto článku sme boli schopní vytvoriť jednoduchú aplikáciu na rozpoznávanie reči. Existuje ešte niekoľko skvelých vecí, ktoré by sme mohli urobiť, napríklad zvoliť iný hlas na čítanie používateľom, ale to už nechám na vás.

Ak máte otázky alebo spätnú väzbu, nechajte ich ako komentár nižšie. Už sa neviem dočkať, čo s tým postavíte. Môžete ma udrieť na Twitteri @developia_.