Hogyan készítsünk egy egyszerű beszédfelismerő alkalmazást

„Ebben a 10 éves időkeretben úgy gondolom, hogy nem csak a billentyűzetet és az egeret fogjuk használni az interakcióhoz, hanem ezalatt elég jól tökéletesítjük a beszédfelismerést és a beszédkimenetet, hogy azok a felület." - Bill Gates, 1997. október 1

A technológia hosszú utat tett meg, és minden új előrelépés során az emberi faj egyre jobban ragaszkodik hozzá, és minden eszközön ezekre az újszerű tulajdonságokra vágyik.

A Siri, az Alexa és a Google Assistant megjelenésével a technológia felhasználói beszédfelismerésre vágyakoztak mindennapi internethasználatuk során. Ebben a bejegyzésben kitérek arra, hogyan lehet integrálni a natív beszédfelismerést és a beszédszintézist a böngészőben a JavaScript WebSpeech API segítségével.

A Mozilla webdokumentumai szerint:

A Web Speech API lehetővé teszi hangadatok beépítését a webalkalmazásokba. A Web Speech API két részből áll: SpeechSynthesis (szövegfelolvasás) és SpeechRecognition (aszinkron beszédfelismerés).

Követelmények, amelyekre szükségünk lesz az alkalmazásunk felépítéséhez

Ehhez az egyszerű beszédfelismerő alkalmazáshoz csak három fájllal fogunk dolgozni, amelyek mind ugyanabban a könyvtárban találhatók:

  • index.html tartalmazza az alkalmazás HTML-jét.
  • style.css amely tartalmazza a CSS stílusokat.
  • index.js a JavaScript kódot tartalmazza.

Emellett rendelkeznünk kell néhány dologgal. Ezek a következők:

  • A JavaScript alapismeretei.
  • Webkiszolgáló az alkalmazás futtatásához. A webkiszolgáló a Chrome-hozelegendő lesz erre a célra.

Beszédfelismerő alkalmazásunk beállítása

Kezdjük azzal, hogy beállítjuk a HTML és a CSS-t az alkalmazáshoz. Az alábbiakban látható a HTML jelölés:

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

Itt van a kísérő CSS stílus:

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; } }

A fenti kód másolásának ehhez hasonló eredményt kell eredményeznie:

Beszédfelismerő alkalmazásunk bekapcsolása a WebSpeech API-val

Az írás idején a WebSpeech API csak Firefoxban és Chrome-ban érhető el. Beszédszintézis felülete a böngésző windowobjektumán él , speechSynthesismíg a beszédfelismerő felülete a böngésző windowobjektumán él, mint SpeechRecognitiona Firefox és webkitSpeechRecognitiona Chrome.

A felismerési felületet SpeechRecognitiona böngészőtől függetlenül állítjuk be:

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

Ezután a beszédfelismerő felületet példányosítjuk:

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');

A fenti kódot, eltekintve példányosítanánk beszédfelismerés, mi is kiválasztotta a icon, text-box,és soundelemeket az oldalon. Hoztunk létre egy bekezdési elemet, amely az általunk mondott szavakat fogja tartalmazni, és hozzáfűztük a text-box.

Amikor az oldalon található mikrofon ikonra kattintunk, el akarjuk játszani a hangunkat és elindítani a beszédfelismerési szolgáltatást. Ennek elérése érdekében egy kattintásesemény-figyelőt adunk az ikonhoz:

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

Az eseményhallgatóban a hang lejátszása után mentünk előre, létrehoztunk és meghívtunk egy dictatefüggvényt. A dictatefüggvény elindítja a beszédfelismerési szolgáltatást a startmetódus meghívásával a beszédfelismerési példányon.

Ahhoz, hogy eredményt adhassunk vissza a felhasználó által resultelmondottakhoz , hozzá kell adnunk egy eseményt a beszédfelismerési példányunkhoz. Ezután a dictatefunkció így néz ki:

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

Az eredmény eventegy SpeechRecognitionEventolyan resultsobjektumot tartalmaz, amely tartalmaz egy objektumot. Ez viszont azt a transcripttulajdonságot tartalmazza, amely a felismert beszédet szövegben tartja. A felismert szöveget egy elnevezett változóba mentjük, speechToTextés paragraphaz oldal elemébe tesszük.

Ha ezen a ponton futtatjuk az alkalmazást, kattintson a gombra, iconés mondjon valamit, akkor fel kell ugrania az oldalon.

Szövegfelolvasás

A szöveg beszédhez való hozzáadásához az alkalmazásunkhoz felhasználjuk speechSynthesisa WebSpeech API felületét. Kezdjük a példányosítással:

const synth = window.speechSynthesis;

Ezután létrehozunk egy funkciót, speakamelyet akkor hívunk meg, amikor azt akarjuk, hogy az alkalmazás mondjon valamit:

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

A speakfüggvény actionparaméterként felveszi az úgynevezett függvényt. A függvény egy karakterláncot ad vissza, amelynek átadják SpeechSynthesisUtterance. SpeechSynthesisUtteranceaz a WebSpeech API-felület, amely tartalmazza a beszédfelismerő szolgáltatás által elolvasandó tartalmat. Ezután a speechSynthesis speakmetódust hívják meg példányára, és továbbadják a tartalmat olvasásra.

Ennek kipróbálásához tudnunk kell, hogy a felhasználó mikor fejezte be a beszédet, és azt mondja: keyword.Szerencsére van egy módszer annak ellenőrzésére, hogy:

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); }); };

A fenti kódban meghívtuk isFinalaz eseményeredményünk metódusát, amely visszatér, truevagy falseattól függően, hogy a felhasználó befejezte-e a beszédet.

Ha a felhasználó befejezte a beszédet, ellenőrizzük, hogy az elhangzottak átirata tartalmaz-e olyan kulcsszavakat, mint what is the timestb. Ha ez megtörténik, meghívjuk a speakfüggvényünket, és átadjuk a három funkció egyikének getTime, getDatevagy getTheWeatheramelyek mindegyike egy karakterláncot ad vissza a böngésző számára olvasásra.

A index.jsfájlunknak így kell kinéznie:

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); }); };

Kattintson az ikonra, és próbálkozzon a következő kifejezések egyikével:

  • Mennyi az idő?
  • Mi a mai dátum?
  • Mi az időjárás Lagosban?

Meg kell kapnunk a választ az alkalmazástól.

Következtetés

Ebben a cikkben egy egyszerű beszédfelismerő alkalmazást tudtunk létrehozni. Van még néhány jó dolog, amit megtehetnénk, például válasszon egy másik hangot, amelyet elolvashat a felhasználók számára, de ezt meghagyom neked.

If you have questions or feedback, please leave them as a comment below. I can’t wait to see what you build with this. You can hit me up on Twitter @developia_.