Hangvezérelt UI létrehozása

Sok új API-t adtunk hozzá az internethez az elmúlt néhány évben, amelyek ténylegesen lehetővé tették a webes tartalmat, hogy ugyanolyan funkcionalitással rendelkezzen, amennyiben sok alkalmazás volt egy ideig. A viszonylag új API a beszédfelismerés API, amely valószínűleg kitalálhatja, lehetővé teszi, hogy a szöveget bemenetként használja az oldalra. Kattints egy kattintásra, hogy elindítsa a szolgáltatást, és ismét megálljon.

Erre nagyszerű eset lehet, hogy lehetővé tegye a felhasználók közötti hozzáférhetőséget, így a hangbemenetet alternatíva, hogy kattints. Ha az Analytics azt mutatja, hogy sok mobil böngészésed van, akkor azt gondolja, hogy mennyi könnyebb lenne beszélni a telefonjába, mint a billentyűzet használata.

Vannak előrejelzések, hogy a képernyő alapú interfészek tíz éven belül eltűnhetnek. Először is így hangzik, mint a sci-fi, de mivel a felhasználók egyre jobban kényelmesebbek a beszédben, mint az Alexa és a Siri szeretete révén, akkor azt az oka, hogy ez pervazív lesz, mint bemeneti módszer. A bemutató itt felgyorsítja a beszédbeviteli sebességet, majd használja a termék felülvizsgálatait egy e-kereskedelmi webhely .

Töltse le a fájlokat Ehhez a bemutatóra.

• 8 tipp a hangfelületek kialakításához

01. Indítsa el a projektet

A Projektfájlok mappájából nyissa meg a "Start" mappát a kód IDE-ben, és nyissa meg a "beszéd.html" fájlt. A projekt összes CSS-jét úgy írták, hogy ez nem a beszéd API fókusza, ezért adja hozzá az itt bemutatott linket, hogy megkapja a Noto Serif betűtípust, és összekapcsolja a CSS-fájlt.

 & lt; link href = "https://fonts.googleapis.com/css?family=noto+serif" rel = "stíluslap" & gt;
& link rel = "stylesheet" href = "CSS / STYLE.CSS" & GT; 

02. Adja hozzá a tartalmat

Ennek első elemei az, hogy egy csomagológép legyen, amelyben az összes képernyőn tartott tartalmunkat megtartja. Az itt található első elem rejtett üzenet lesz, amely megmondja a felhasználót, ha a Beszéd API támogatott a böngészőben. Ez csak akkor látható, ha nem. Ezután a címsor azt mondja a felhasználónak, hogy az általuk követendő űrlapelemek az üzenetükhöz fogják használni.

 & lt; div id = "wrapper" & gt;
& lt; span id = "nem támogatott" osztály = "Támogatás rejtett" & gt; beszéd API nem támogatott & lt; / span & gt;
& lt; h2 & gt; az üzenet: & lt; / h2 & gt; 

03. Válassza ki az eredményeket

A beszéd API használatakor két módja van a tartalom megjelenítésének. Az egyikben a szöveg jelenik meg, ha a felhasználó leállt, és a "Hallgatás" gombra kattintott. A másik a képernyőn megjelenő szavakat mutatja. Ez az első rádió gomb lehetővé teszi a végső beszéd eredmény megjelenítését.

 & lt; div id = "typeofinput" & gt;
& lt; span & gt; eredmények: & lt; / span & gt;
& lt; címke & gt;
& lt; input type = rádiónév = felismerési típus = végleges & gt; Végső beszéd & Lt; / Label & GT; 

04. Rádió két

A második rádiógombot itt adjuk hozzá, és ez lehetővé teszi a felhasználó számára, hogy kiválasztja a megjelenítendő szöveget, ahogy beszélnek. Ezeket a rádiógombokat később felveszi a JavaScript, és a beszédbevitel vezérlésére szolgál, de most ez lehetővé teszi a felhasználó számára, hogy irányítsa a felületet.

 & LT; Label & gt;
& lt; input type = rádiónév = felismerési típus = interim ellenőrzött & gt; Ahogy beszélsz & lt; / Label & gt;
& lt; / div & gt; 

05. A szöveg megjelenítése

A szöveg, amelyet a felhasználó az oldalra beszél, megjeleníteni kell a képernyőn. Itt van a szövegterület, amely a "transzkripció" azonosítója van - ez célja, hogy a felhasználó beszéde itt legyen. Van egy törlés gomb a szöveg eltávolításához.

 & LT; TEXTAREA ID = "Transcription" Readonly & GT;
& LT; / TEXTAREA & GT;
& lt; br / & gt;
& Lt; Gomb ID = "CLEAR-ALL" CLASS = "gomb" és gt; Törölje a szöveget & lt; / gomb és gt; 

06. Az utolsó felület

A végső interfészelemeket most hozzáadják a képernyőhöz. A beszédgomb engedélyezi és letiltja a beszédet, így a beszéd előtt meg kell kattintani. Újra kattintva megállítja. Mivel ez egy viszonylag új interakció, a napló alatta megmondja a felhasználóknak, hogy mit kell tennie.

& lt; div osztály = "Button-wrapper" & gt;
    & lt; div id = "speechbutton" osztály = "Start" & gt; & lt; / div & gt;
  & lt; / div & gt;
  & lt; div id = "log" & gt; kattints ide, hogy elindítsa a beszédet & lt; / div & gt;
& lt; / div & gt; 

07. JavaScript hozzáadása

Most adja hozzá a szkript címkéket a záró testcímke előtt. Ez az, ahol az összes JavaScript megy. Az első két vonal megragadja az oldalelemeket a megfelelő azonosítóval, és tárolja őket egy változóban. A transzkripció a beszéd szövegének eredménye. A napló frissíti a felhasználót, hogyan kell használni.

 & lt; script & gt;
var transcription = document.getelementbyid ("transzkripció");
var log = document.getElementbyid ('log');
& lt; / script & gt; 

08. Változó eredmények

A következő néhány változó segítségével több interfész elemet tárolnak hozzájuk. A Beszéd gomb váltás lesz, hagyja, hogy a felhasználók be- és kikapcsolják a beszédet. A Clear-All gomb törli a nem kielégítő beszéd eredményeit.

 VAR START = DOKUMENTUM.GETElementbyid ("Speechbutton");
var clear = document.getElementbyid ("Clear-All");
var beszélő = hamis; 

09. Támogatott?

Az első dolog, amit a kódunk meg fog tenni, megtudja, hogy ezt a beszéd funkciót a felhasználó böngészője támogatja-e. Ha ez az eredmény nullként jön vissza, akkor az IF utasítás eldobja a rejtett üzenetet, miközben egyidejűleg a Start gombot távolítja el az interfészről a beszédbevitel leállításához.

 ablak.Speechrecognition = window.Speechrecognition ||
window.webkitspeechrecognition ||
nulla;
ha (ablak.Speechrecognition === null) {
document.getelementbyid ("nem támogatott"). Classlist.Remove ("rejtett");
start.classlist.add ("rejtett");
} Else {

10. Indítsa el az elismerést

A beszédfelismerés megkezdődik, mint az "egyéb" a beszédfelismerés eléréséhez. A folyamatos bemenet elindul, mivel ez az alapértelmezett a rádiógombokban. Az "Onresult" funkció kezeli a beszédbevitel eredményeit. Ezt hozzáadják a transzkripció szövegmezőbe.

 VAR felismerő = új ablak.
Beszédfelismerés();
felismerő.Continuous = igaz;
felismerő.Onresult = funkció (esemény) {
transzkripció.textcontent = '';
mert (var i = event.resultindex; i & lt; esemény.
eredmények.hossz; i ++) {

11. végleges vagy ideiglenes?

Az IF utasítás most ellenőrzi, hogy a felhasználó megjelenjen-e a szöveg megjelenítéséhez, ahogyan beszélnek (átmeneti), vagy csak akkor, ha befejezték a beszédet (végleges). Meg fogja venni, hogy ha időközi, minden szó hozzáadódik a szöveghez a "+ =" szöveggel, míg a végső csak az egész szöveget eldobja.

 ha (esemény.Results [i] .isfinal) {
transcription.textcontent = esemény.Results [i] 
 .transcript;
} más {
transzkripció.textcontent + = esemény.Results [i] 
 .transcript;
}
}
}; 

12. Hibák kezelése

Mint a legtöbb JavaScript API hiba van kezelőt, amely lehetővé teszi, hogy eldöntse, mit tegyen minden olyan kérdést, hogy az esetleg. Ezeket a "Log" div-ba dobják vissza, hogy visszajelzést adjon a felhasználónak, mivel elengedhetetlen, hogy tisztában legyen azzal, hogy mi folyik az interfésszel.

 felismerő.onerror = funkció (esemény) {
log.innerhtml = 'Felismerési hiba:' +
esemény.message + '& lt; br / & gt; + log.innerhtml;
}; 

13. Kezdje el a beszédet!

Az esemény hallgatója itt kezdődik, amikor a felhasználó rákattint a gombra, hogy elkezdje a beszédet. Ha a felhasználó nem beszél, akkor a gomb megváltoztatja a színt, hogy megjelenjen a beszélgetés megkezdődött, a beszélgetés változója igaz, és az "Átmeneti" rádiógombot ellenőrizni kell, hogy ez a felhasználó választása a bemenethez.

 START.ADDEVENTLISTENER ('CLICK', FUNCTION () {
Ha (Beszélgetés) {
beszéd = igaz;
start.classlist.toggle ('stop');
felismerő.interimresults = dokumentum.
Queryselector ('bemenet [név = "felismeri
On-Type "] [érték =" interim "]). Ellenőrzött; 

14. Vegye ki a bemenetet

A "próbálkozás és fogás" állítás most elindítja a beszédfelismerést, és elmondja a felhasználónak, hogy el kell kezdeniük a beszélgetést, és amikor elvégeznék, "kattintson ismét a Stop gombra. A fogás felveszi a hibát, és dobja, hogy a "log" div, hogy a felhasználó megértse, mi lehet rossz.

 Próbáld meg {
felismerő.start ();
log.innerhtml = 'Most kezdjen beszélni
& lt; br / & gt; kattintson a leállításra;
} fogás (ex) {
log.innerhtml = 'Felismerési hiba:
& lt; br / & gt; + ex.message;
} 

15. Kattintson a Stop gombra

Most, amikor a felhasználó rákattint a beszélgetés leállítására, a beszédfelismerés leáll. A gomb pirosra vált, pirosra változik. A felhasználói felület frissül, így a felhasználó tájékoztatást kapott arról, hogy a szolgáltatás leállt. A beszélő változó hamis, készen áll arra, hogy a felhasználó újra beszéljen.

} Else {
felismerő.stop ();
start.classlist.toggle ('stop');
log.innerhtml = 'Felismerés leállt
& lt; bro / & gt; kattintson ide, hogy beszéljen ";
beszéd = hamis;
}
}); 

16. Törölje a szöveget

A szakasz utolsó kódja csak egy törlés gomb, amely eltávolíthatja a beszédbeviteli szöveget abban az esetben, ha tévesen értelmezik. Mentse el a fájlt, és tesztelje ezt a böngészőjében. Ön képes lesz arra, hogy a gombra kattinthasson a számítógépbe, és nézze meg az eredményeket.

 Clear.Addeventlistener ('Click', Funkció () {transcription.textcontent = '';
});
} 

17. Cél hozzáadása

Most, hogy van egy munkapélda, szükség van valamilyen célra az interfészhez, így tegyük ezt, hogy a felhasználók adjanak értékelést. Mentse az oldalt, majd válassza a Mentés másként, a "értékelések.html" új nevével. Adja hozzá a következő HTML elemeket csak a & lt; div id = "wrapper" és gt; vonal.

 & lt; h1 & gt; Termékértékelések & lt; / h1 & gt;
& lt; div id = "Vélemények" & gt; & lt; / div & gt; 

18. teljes benyújtás

Az előző kód tartja a véleményeket. A felhasználónak be kell nyújtania beszédbevitelüket, ezért adja hozzá a Küldés gombot közvetlenül a "Törlés" gomb után, amely a kód 28. sorában lesz. Ezután a következő lépéshez mozoghat a JavaScriptet.

 & lt; Gomb ID = "Küldés" osztály = "gomb" és gt; Küldés felülvizsgálata & lt; / button & gt; 

19. Új interfészelemek

A JavaScript tetején adja hozzá az új változókat, hogy tartsa a hivatkozásokat az éppen hozzáadott új interfészelemekre. Ezek biztosítják Önnek a módját, hogy elküldjük és megjelenítsd az eredményeket a képernyőn az oldal "Vélemények" szakaszában.

 var submit = document.getelementbyid ("Küldés");
VAR Review = Document.getElementbyid ("Vélemények"); 

20. Küldje el a bejegyzést

Most a kód itt fog kezelni, ha a felhasználó rákattint a Küldés gombra, helyezze ezt a jobbra a "Clear" gombkód előtt, amely a kóddal 88 vonalon kell lennie. Először is létrejön egy bekezdéscímke, és a beszédbevitel később hozzáadódik. Ezután hozzáadódik a "felülvizsgálat" szakaszba.

 Submit.addeventlistener ('Click', Funkció () {
Legyen P = Document.Createels ('P');
var texnode = document.CreateTextNode
(transzkripciós.value);
p.appendchild (textnode);
felülvizsgálata.appendchild (P);
hagyja ma = új dátum ();
Legyen s = document.createels ('small'); 

21. Végső benyújtás

A dátumot hozzá kell adni, hogy a felülvizsgálat időbe telik a dokumentumba. Végül egy horizontális szabály kerül hozzáadásra, ha minden egyes felülvizsgálat befejeződik, akkor a szöveg új bemenetre törlődik. Mentse el az oldalt, és tesztelje ezt. Látni fogja, hogy most elküldheti beszédét az oldalra, mint a vélemények. A tartósság érdekében egy adatbázist kell használnod az eredmények tárolására.

 textnode = document.createTextNode (ma);
s.appendchild (textnode);
felülvizsgálata.appendchild (ek);
Legyen hr = dokumentum.Createels ("hr");
értékelés.appendchild (HR);
transzkripció.textcontent = '';
}); 

Ezt a cikket eredetileg a Creative Web Design magazin 286. kiadásában tették közzé Web designer . Vásároljon 286 kérdést vagy Iratkozzon fel itt a webdesignerre .

Kapcsolódó cikkek:

• A legjobb JavaScript API-k közül 14
• Építsen egy AI-POWERED Chatbotot
• 5 Emerging UX trendek 2019-ben