Ako vytvoriť jednoduchú aplikáciu na rozpoznávanie reči
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 window
objekte prehľadávača, speechSynthesis
zatiaľ čo jeho rozhranie na rozpoznávanie reči žije na window
objekte prehľadávača ako SpeechRecognition
vo Firefoxe, aj webkitSpeechRecognition
v prehliadači Chrome.
Rozhranie rozpoznávania nastavíme na SpeechRecognition
bez 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 sound
prvkov 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 dictate
funkciu. dictate
Funkcia spustí službu rozpoznávania reči volaním start
metó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 result
do našej inštancie rozpoznávania reči pridať udalosť. dictate
Funkcia potom bude vyzerať takto:
const dictate = () => { recognition.start(); recognition.onresult = (event) => { const speechToText = event.results[0][0].transcript; paragraph.textContent = speechToText; } }
Výsledné event
vráti a, SpeechRecognitionEvent
ktoré obsahuje results
objekt. Toto zase obsahuje transcript
vlastnosť obsahujúcu rozpoznaný prejav v texte. Rozpoznaný text uložíme do volanej premennej speechToText
a vložíme ho do paragraph
prvku na stránke.
Ak spustíme aplikáciu v tomto okamihu, klikneme na ikonu icon
a 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 speechSynthesis
rozhranie API WebSpeech. Začneme jeho inštanciou:
const synth = window.speechSynthesis;
Ďalej vytvoríme funkciu, speak
ktorú zavoláme, kedykoľvek chceme, aby aplikácia niečo povedala:
const speak = (action) => { utterThis = new SpeechSynthesisUtterance(action()); synth.speak(utterThis); };
Táto speak
funkcia prijíma funkciu nazvanú action
ako parameter. Funkcia vráti reťazec, ktorý je odovzdaný SpeechSynthesisUtterance
. SpeechSynthesisUtterance
je rozhranie API WebSpeech, ktoré obsahuje obsah, ktorý by mala služba na rozpoznávanie reči čítať. Potom speak
sa 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 isFinal
metódu výsledku našej udalosti, ktorá sa vracia true
alebo false
podľ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 time
atď. Ak sa tak stane, nazývame speak
funkcie a odovzdať jednu z troch funkcií getTime
, getDate
alebo getTheWeather
ktoré všetky return reťazec pre prehliadač na čítanie.
Náš index.js
sú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_.