Rakenna ääniohjattu UI

Olemme nähneet monia uusia sovellusliittymiä verkkoon viime vuosina, jotka ovat todella mahdollistaneet Web-sisällön, jotta samanlaiset toiminnot ovat jonkin aikaa. Suhteellisen uusi API on puheentunnistus API, joka luultavasti arvata, voit käyttää tekstiä sivulle sivulle. Se vaatii napsautuksen aloittaaksesi palvelun ja uudelleen lopettaaksesi.

Suuri tapa tämä saattaa olla mahdollistanut käyttäjien esteettömyyden antamalla äänituloa vaihtoehtona klikkaamalla. Jos analyysisi osoittaa, että sinulla on paljon mobiililaitteita, niin ajatella, kuinka paljon helpompaa pitäisi puhua puhelimeesi kuin näppäimistön käyttäminen.

On ollut ennusteita, että näytön rajapinnat voivat alkaa kadota kymmenen vuoden kuluessa. Aluksi tämä saattaa kuulostaa science fiktiolta, mutta koska käyttäjät saavat enemmän ja miellyttävämpiä puhetta panoksena Alexan ja Sirin tykkää läpi, niin se tarkoittaa syytä, että tämä tulee olemaan tulossa syöttömenetelmänä. Tutorial täällä saa sinut nopeuttamaan puhetuloon ja sitten käyttää sitä, jos haluat jättää tuotearvostelut ECommerce-sivusto .

Lataa tiedostot Tähän opetusohjelmaan.

• 8 Vinkkejä äänentoistojen suunnitteluun

01. Aloita projekti

Avaa Project Files -kansiosta koodin "START" -kansio ja avaa Muokkaa "Speech.html" -tiedosto. Kaikki projektin CSS on kirjoitettu, koska se ei ole puheen API: n painopiste, joten lisää täältä esitetty linkki, jos haluat saada Noto Serif -tyyppistä kirpeitä ja linkittää CSS-tiedoston.

 & lt; linkki href = "https://fonts.googleapis.com/css?family=noto+serif" rel = "stylesheet" & gt;
& lt; Link Rel = "Stylesheet" href = "CSS / style.css" & gt; 

02. Lisää sisältö

Tämän ensimmäisen elementin on oltava kääre, jossa pitää kaikki näytön sisältöämme. Ensimmäinen esitys tässä on piilotettu viesti, joka kertoo käyttäjälle, jos puheen API tuetaan selaimessa. Tämä näkyy vain, jos se ei ole. Sitten otsikko kertoo käyttäjälle, että lomake-elementtejä käytetään sanomaan.

 & lt; div id = "kääre" & gt;
& lt; span id = "Ei tuettu" Class = "Tuki piilotettu" & gt; Puheen API ei tueta & lt; / span & gt;
& lt; h2 & gt; Viestisi: & lt; / h2 & gt; 

03. Valitse tulokset

Kun käytät puheen API: tä, sisältöä on kaksi tapaa. Yhdessä tekstissä näkyy, kun käyttäjä on lopettanut puhumisen ja "kuuntelu" -painiketta napsautetaan pois päältä. Muut näyttävät sanoja näytöllä puhutaan. Tämä ensimmäinen radio-painike mahdollistaa lopullisen puheen tuloksen näyttämisen.

 & lt; div id = "Typeofinput" & gt;
& lt; span & gt; Tulokset: & lt; / span & gt;
& lt; etiketti & gt;
& lt; syöttötyyppi = radioimi = tunnistustyyppinen arvo = lopullinen & gt; Lopullinen puhe & lt; / etiketti & gt; 

04. Radio kaksi

Toinen valintanappi lisätään tässä ja tämä sallii käyttäjän valita tekstin, joka näytetään, kun he puhuvat. JavaScriptit noutaa nämä radiopainikkeet myöhemmin ja sitä käytetään ohjaamaan puhetuloa, mutta nyt tämä antaa käyttäjälle mahdollisuuden ohjata sitä.

 & lt; etiketti & gt;
& lt; syöttötyyppi = radio nimi = tunnistustyyppinen arvo = osavuosikappale & gt; Kun puhut & lt; / etiketti & gt;
& lt; / div & gt; 

05. Näytä teksti

Teksti, jonka käyttäjä puhuu sivulle, on näytettävä näytöllä. Täällä lisätään teksti-alue, jolla on "transkription" tunnus - tämä kohdistuu niin, että käyttäjän puhe päätyy tänne. Tekstin poistaminen on myös selkeä painike.

 & lt; textarea id = "Transkription" Readonly & GT;
& lt; / Textarea & GT;
& lt; br / & gt;
& lt; button id = "Clear-All" Class = "-painike" & gt; Tyhjennä teksti & lt; / button & gt; 

06. Viimeinen käyttöliittymä

Lopulliset käyttöliittymäelementit lisätään nyt näytölle. Puhepainike mahdollistaa puheta ja poistaa käytöstä, joten sitä on napsautettava ennen puhumista. Klikkaamalla uudelleen pysäyttää sen. Koska tämä on suhteellisen uusi vuorovaikutus, alla oleva loki kertoo käyttäjille, mitä tehdä.

& lt; div luokka = "painike kääre" & gt;
    & lt; div id = "SpeechButton" Class = "START" & GT; & lt; / div & gt;
  & lt; / div & gt;
  & lt; div id = "log" & gt; Klikkaa aloittaa puhuminen & lt; / div & gt;
& lt; / div & gt; 

07. Lisää JavaScript

Lisää nyt komentosarjan tunnisteet ennen sulkemisrungon tunnistetta. Tämä on missä kaikki JavaScript menee. Ensimmäiset kaksi riviä tarttuvat sivun elementteihin vastaavan tunnus ja säilytä ne muuttujaksi. Transkriptio on puheen tekstin tulos. Loki päivittää käyttäjän, miten sitä käytetään.

 & lt; skripti & gt;
var transkription = document.gettelementbyid ('Transkription');
var log = document.gettelementbyid ('log');
& lt; / script & gt; 

08. Muuttuvat tulokset

Seuraavien muuttujien käyttö useampia liitäntäelementtejä välimuistiin niihin. Puhepainike tulee vaihtoon, jolloin käyttäjät kytkeytyvät puheeseen ja pois päältä., Seurataan Boolen, tosi / väärä muuttuja. Clear-All-painike poistaa epätyydyttävät puhetulokset.

 var start = document.gettelementbyid ('Speechuton');
var Clear = document.gettelementbyid ('Clear-All');
var cheing = false; 

09. Onko se tuettu?

Ensimmäinen asia, jonka koodi tekee, on selvittää, onko tämän puhe-ominaisuutta käyttäjän selain tukee. Jos tämä tulos tulee takaisin niin, että jos lausunto heittää piilotetun viestin, samanaikaisesti ottamalla käyttöön Käynnistä-painike pois päältä puhetulon pysäyttämiseksi.

 window.specheRectorition = window.spechecognition ||
window.webkitspohecrognition ||
tyhjä;
jos (ikkuna.speecrecognition === nolla) {
document.gettelementbyID ("tuettu"). Luokkalista.Remove ("piilotettu");
start.classlist.add ("piilotettu");
} muu {

10. Aloita tunnistus

Puheen tunnustaminen aloitetaan nimellä "muu", kun puheentunnistus on saatavilla. Jatkuva tulo käynnistetään, mikä on valintanäppäimillä oletusarvo. "Onresult" -toiminto käsittelee puhetulon tuloksia. Tämä lisätään transkription tekstikenttään.

 Var Tunnistus = uusi ikkuna.
Puheentunnistus();
Tunnistus.Konnut = TRUE;
tunnistus.onresult = toiminto (tapahtuma) {
transkription.textcontent = '';
(var i = tapahtuma.resulttex; i & lt; tapahtuma.
tulokset.length; i ++) {

11. Lopullinen tai väliaikainen?

Jos lausunto nyt tarkistaa, onko käyttäjä haluaa näyttää tekstin, kun he puhuvat (väliaikainen) tai vasta sen jälkeen, kun he ovat päättyneet (lopullinen). Huomaat, että jos se on väliaikainen, jokainen sana lisätään tekstiin "+ =", kun lopullinen vain kaataa koko tekstiä siellä.

 Jos (tapahtuma.results [i] .isfinaal) {
transkription.textcontent = tapahtuma.Results [i] 
 .Trancript;
} muu {
transkription.textcontent + = tapahtuma.Results [I] 
 .Trancript;
}
}
}; 

12. Käsittelyvirheet

Kuten useimmissa JavaScript API: llä on virheiden käsittelijä, jonka avulla voit päättää, mitä tehdä mitä tahansa ongelmia, jotka saattavat syntyä. Nämä heitetään "lokiin", jotta saat palautetta käyttäjälle, koska on välttämätöntä, että he ovat tietoisia siitä, mitä käyttöliittymän kanssa.

 tunnistus.onerror = toiminto (tapahtuma) {
log.innerhtml = 'Tunnistusvirhe:' +
Event.message + '& lt; br / & gt; + log.innerhtml;
}; 

13. Aloita puhuminen!

Tapahtuman kuuntelija käynnistetään, kun käyttäjä napsauttaa painiketta aloittaaksesi puhumisen. Jos käyttäjä ei puhu, painike muuttaa värin, joka näyttää puhumisen, puheta koskeva muuttuja on asetettu tosi ja "Väliaikainen" -radio-painike tarkistetaan, onko tämä käyttäjän valinta syöttöön.

 START.ADDEVENTLISTER ('CLICK', Toiminto () {
Jos (! Puhuminen) {
Puhuminen = tosi;
start.classlist.toggle ('stop');
Tunnistus.TERIMRESults = Asiakirja.
QuerySelector ('Input [NAME = "TUNNUSTUS
On-tyyppi "] [Value =" väliaikainen "]. tarkistettu; 

14. Ota panos

Kokeile ja Catch-lausunto alkaa nyt puheentunnistus ja kertoo käyttäjälle, että heidän pitäisi alkaa puhua ja että kun ne tehdään, "napsauta uudelleen lopettaa". Saalis noutaa virheen ja heittää sen "log" diviksi niin, että käyttäjä voi ymmärtää, mikä saattaa olla väärässä.

 Kokeile {
Tunnistus.Start ();
log.innerhtml = 'Aloita puhuminen nyt
& lt; br / & gt; Klikkaa lopettaa ';
} Catch (ex) {
log.innerhtml = 'Tunnistusvirhe:
& lt; br / & gt; + ex.message;
} 

15. Pysäytä napsauttamalla

Nyt kun käyttäjä napsauttaa lopettaa puhumisen, puheentunnistus pysähtyy. Painike muuttuu takaisin vihreäksi punaisesta puhuessaan. Käyttöliittymä päivitetään siten, että käyttäjälle ilmoitetaan, että palvelu on pysähtynyt. Puheen muuttuja on asetettu vääräksi, valmiina antamaan käyttäjälle uudelleen.

} muu {
Tunnistus.Stop ();
start.classlist.toggle ('stop');
log.innerhtml = 'Tunnistus pysähtyi
& lt; br / & gt; Klikkaa puhua ";
Puhuminen = väärä;
}
}); 

16. Tyhjennä teksti

Tämän osan lopullinen koodi on vain selkeä painike, joka poistaa puheen syöttötaulun, jos sitä tulkitaan väärin. Tallenna tiedosto ja testaa tämä selaimessasi. Voit napsauttaa painiketta puhua tietokoneeseen ja nähdä tulokset.

 CLEAR.ADDEVENTLISTER ('CLICK', Toiminto () {Transption.textContent = '';
});
} 

17. Lisää tarkoitus

Nyt kun sinulla on toimiva esimerkki, tarvitsee olla jonkin verran tarkoitusta rajapinnalle, joten tee tämä niin, että käyttäjät voivat syöttää arvosteluja. Tallenna sivu ja valitse sitten Tallenna nimellä "Reviews.html" uusi nimi. Lisää seuraavat HTML-elementit juuri sen jälkeen, kun & lt; div id = "kääre" & gt; linja.

 & lt; h1 & gt; tuotearviot & lt; / h1 & gt;
& lt; div id = "arvostelut" & gt; & lt; / div & gt; 

18. Yhteensä toimittaminen

Edellinen koodi pitää arvosteluja. Käyttäjän on lähetettävä puheen syöttö, joten lisää Lähetä-painike heti "Clear Text" -painikkeen jälkeen, joka on koodin rivillä 28. Sitten voit siirtyä alas JavaScriptiin seuraavaan vaiheeseen.

 & lt; button id = "Lähetä" class = "button" & gt; Lähetä arvostelu & lt; / button & gt; 

19. Uudet käyttöliittymäelementit

JavaScriptin yläosassa Lisää uudet muuttujat pitämään viittaukset juuri lisättyihin uusiin käyttöliittymätekijöihin. Nämä tarjoavat sinulle keinon lähettää ja näyttää tulokset näytöllä sivun "Arvostelu" -osiossa.

 var submit = document.gettelementbyid ('Lähetä');
Vararviointi = asiakirja.GetelementbyID ("Arvostelut"); 

20. Lähetä merkintä

Nyt koodi täällä käsitellään, kun käyttäjä napsauttaa Lähetä-painiketta, aseta tämä oikea ennen "Tyhjennä" -painikkeen koodia, jonka pitäisi olla koodin rivi 88. Ensinnäkin luodaan kappale, ja puhetulo lisätään tämän jälkeen tähän. Tämä lisätään sitten "tarkistus" -osioon.

 Lähetä.AddeventListener ('Click', Toiminto () {
Anna p = dokumentti.createelement ('p');
var TextNode = document.createTextNode
(Transkription.Value);
P.Appendchild (TextNode);
Review.Appendchild (P);
Anna tänään = uusi päivämäärä ();
Anna S = document.createelements ("pieni"); 

21. Lopullinen jättäminen

Päivämäärä lisätään siten, että tarkistus on aikaisemmin asiakirjaan. Lopuksi lisätään horisontaalinen sääntö, jossa jokainen tarkistus päättyy, teksti on valmiina uusi sisääntulo. Tallenna sivu ja testaa tämä. Näet, että voit nyt lähettää puheesi sivulle arvosteluina. Pysyvyyttä varten sinun on käytettävä tietokantaa näiden tulosten tallentamiseksi.

 TextNode = document.createTextNode (tänään);
S.Appendchild (TextNode);
Review.Appendchild (t);
Anna hr = dokumentti.createelement ('h');
Review.Appendchild (HR);
transkription.textcontent = '';
}); 

Tämä artikkeli julkaistiin alun perin Bange 286 Creative Web Design -lehden Nettisivujen suunnittelija . Osta numero 286 täällä tai Tilaa Web-suunnittelija tähän .

Aiheeseen liittyvät artikkelit:

• 14 parhaista JavaScript Apis
• Rakenna AI-powered chatbot
• 5 UMERKUU UX TRENDENDI 2019