„JavaScript“ pamoka: pridėkite kalbos atpažinimą prie savo žiniatinklio programos

Nors naršyklės žengia link kalbos atpažinimo ir futuristinių galimybių palaikymo, internetinių programų kūrėjai paprastai naudojasi tik klaviatūra ir pele. Bet ką daryti, jei galėtume išplėsti klaviatūros ir pelės sąveiką su kitais sąveikos būdais, pavyzdžiui, balso komandomis ar rankų padėtimis?

Šioje pranešimų serijoje sukursime pagrindinį žemėlapių tyrinėtoją su daugiarūšio sąveika. Pirmiausia yra balso komandos. Tačiau pirmiausia turėsime išdėstyti savo programos struktūrą, kad galėtume įtraukti bet kokias komandas.

Mūsų programa, įkelta sukurti-reaguoti-programą, bus viso ekrano žemėlapis, sukurtas naudojant „React“ komponentus, skirtus „Leaflet.js“. Nubėgus sukurti-reaguoti-programą, verpalų pridėti lapelįir verpalai pridėti reakcijos lapelį, mes atversime savo Program komponentą ir apibrėžkite mūsų Žemėlapis komponentas:

importuoti „React“, {Component} iš „reaguoti“;
importuoti {Map, TileLayer} iš „reaguoti lankstinuko“
importuoti „./App.css“;
klasės programa išplečia komponentą {
  valstija = {
  centras: [41.878099, -87.648116],
  priartinimas: 12,
  };
  updateViewport = (peržiūros sritis) => {
  this.setState ({
  centras: viewport.center,
  priartinimas: viewport.zoom,
    });
  };
  pateikti () {
  const {
  centras,
  priartinti,
  } = tai.valstybė;
  grįžti (
  style = {{aukštis: '100%', plotis: '100%'}}
  centras = {centras}
  priartinimas = {priartinimas}
  onViewportChange = {this.updateViewport}>
  url = "// {s} .tile.openstreetmap.org / {z} / {x} / {y} .png"
  attribution = "©„ OpenStreetMap “bendraautoriai“
          />
    )
  }
}
eksportuoti numatytąją programą;

Program komponentas yra būsenos komponentas, kuris stebi centro ir mastelio ypatybes, perduodamas jas į Žemėlapis komponentas. Kai vartotojas sąveikauja su žemėlapiais naudodamasis vidine pelės ir klaviatūros sąveika, mums pranešama, kad būsena bus atnaujinta nauju centru ir mastelio lygiu.

Apibrėžus viso ekrano komponentą, mūsų programa atrodo taip:

Iš dėžutės gauname tipiškus sąveikos režimus, įskaitant pelę, klaviatūrą ir palietę juos palaikančius įrenginius. Apibrėžę pagrindinę sąveiką ir vartotojo sąsają, pridėkime balso komandas, kad priartintume ir atitolintume.

Yra daug bibliotekų, kuriose galima atpažinti kalbą naršyklėje. Yra net pagrindinė „Chrome“ palaikoma „SpeechDetection“ API. Mes naudosime populiarią ir paprastą „JavaScript“ teksto aptikimo biblioteką „annyang“. Naudodami annyang, jūs nurodote komandas ir jų tvarkytuvus „JavaScript“ objekte, taip:

const komandos = {
  'in': () => console.log ('komandoje gautas'),
  „out“: () => console.log („out komanda gauta“),
};

Tada viskas, ką jums reikia padaryti, tai perduoti tą objektą į annyang objektas ir skambutis pradžia () ant to objekto. Visas pavyzdys atrodo taip:

importuoti annyang iš „annyang“;
const komandos = {
  'in': () => console.log ('komandoje gautas'),
  „out“: () => console.log („out komanda gauta“),
};
annyang.addCommands (komandos);
annyang.start ();

Tai yra labai paprasta, bet iš konteksto nėra daug prasmės, todėl įtraukime tai į savo „React“ komponentą. per componentDidMount kablys, mes pridėsime savo komandas ir pradėsime klausytis, bet užuot prisijungę prie konsolės, mes paskambinsime dviem būdais, kurie atnaujina mastelio lygį mūsų valstybėje:

  priartinti = () => {
  this.setState ({
  priartinimas: tai. būsena. mastelis + 1
    });
  };
  zoomOut = (... argumentai) => {
  this.setState ({
  priartinimas: tai. valstija. priartinimas - 1
    });
  };
  componentDidMount () {
  annyang.addCommands ({
  „in“: this.zoomIn,
  „out“: this.zoomOut,
    });
  annyang.start ();
  }

Kai mūsų puslapis atnaujinamas, naršyklė prašo mūsų leidimo naudoti mikrofoną. Jei pasakysite „taip“, dabar galėsite naudoti balso komandas „įjungti“ ir „nutolinti“, kad priartintumėte ir atitolintumėte vaizdą. Norite daugiau? Taipang biblioteka taip pat palaiko vietos rezervavimo ženklus ir reguliarius posakius. Norėdami palaikyti mastelio keitimą tiesiai iki tam tikro lygio, galime apibrėžti tokią komandą:

  annyang.addCommands ({
  / * esamos komandos * /
  'mastelio lygis: lygis': {regexp: / ^ mastelio lygis (\ d +) /, atgalinis skambutis: this.zoomTo},
    });

: lygis tai yra rakto dalis yra standartinis vieno žodžio vietos rezervavimo būdas. (Jei norėtume kelių pasaulio vietos rezervavimo ženklų, galėtume naudoti * lygis Vietoj to.) Pagal numatytuosius nustatymus, vietos rezervuotojo užfiksuotas žodis perduodamas kaip eilutės argumentas „Handler“ funkcijai. Bet jei mes apibūdinsime tvarkytuvą kaip objektą regex ir perskambink raktus, mes galime dar labiau apriboti, kas gali būti vietos rezervavimo ženklas. Šiuo atveju mes apribojame vietos rezervavimo ženklą tik skaitmenimis. Ta rezervuota vieta vis tiek bus perduota kaip eilutė, todėl nustatydami mastelio keitimo lygį turėsime priversti ją naudoti skaičių:

  zoomTo = (zoomLevel) => {
  this.setState ({
  priartinimas: + priartinimas
    });
  }

Štai ir viskas! Dabar galime priartinti arba sumažinti vieną lygį vienu metu, arba galime pereiti tiesiai į lygį, sakydami jo skaičių. Jei žaidžiate su tuo namuose, pastebėsite, kad praeina kelios sekundės, kol annyang užregistruoja komandą, o kartais komandos neregistruojamos. Kalbos atpažinimas nėra tobulas. Jei kalbos atpažinimo funkciją kuriate gamybos sistemoje, norėsite realiuoju laiku pateikti klaidų grįžtamojo ryšio mechanizmus arba nustatyti, kada biblioteka aktyviai klausosi.

Jei norite pažaisti su kodu, jį galite rasti „GitHub“. Nedvejodami kreipkitės į „Twitter“ ir pasidalykite savo multimodalinėmis sąsajomis: @freethejazz.