Zbuduj sterowany głosem UI

Sep 12, 2025

Jak

Widzieliśmy wiele nowych interfejsów API dodanych do Internetu w ciągu ostatnich kilku lat, które naprawdę umożliwiły treści internetowej, aby mieć ten sam rodzaj funkcjonalności, jak wiele aplikacji miała na jakiś czas. Stosunkowo nowy interfejs API jest API rozpoznawania mowy, które prawdopodobnie można odgadnąć, pozwala użyć tekstu jako wejście na stronę. Wymaga kliknięcia, aby rozpocząć usługę i ponownie się zatrzymać.

Wspaniała sprawa może być zezwalająca na dostępność wśród użytkowników, dając wejście głosowe jako alternatywę do klikania. Jeśli Twoja analityka pokazała, że masz dużo mobilnego przeglądania, pomyśl, ile łatwiej będzie mówić do telefonu niż za pomocą klawiatury.

Przewiduje się, że interfejsy oparte na ekranie mogą zacząć znikać w ciągu dziesięciu lat. Początkowo może to brzmieć jak science fiction, ale ponieważ użytkownicy stają się coraz bardziej komfortowo z mową jako wejście przez polubienia Alexa i Siri, a następnie rozumowanie, że stanie się to wszechobecna jako metoda wprowadzania. Tutorial tutaj otrzyma Cię do szybkiego wejścia do mowy, a następnie użyj tego do opuszczenia recenzji produktów na witryna e-commerce. .

Pobierz pliki. Dla tego samouczka.

8 Wskazówki dotyczące projektowania interfejsów głosowych

01. Rozpocznij projekt

Build a voice controlled UI: Start the project — Nie martw się o CSS, jak już jest napisany [obraz: projektant stron internetowych]

Z folderu Pliki Project, otwórz folder "Start" w swoim kodzie IDE i otwórz plik "Mowa.html", aby edytować. Wszystkie CSS dla projektu jest napisane, ponieważ nie jest to skupienie API mowy, więc dodaj link pokazany tutaj, aby uzyskać kod NOTO Serif i łączyć plik CSS.

 Link href = "https://fonts.googleapis.com/csss?family=noto+Serif" Rel = "Stylesheet" & GT;
łącznik rel = "arkusz stylowy" href = "css / style.csssss" & gt;

02. Dodaj zawartość

Pierwszym elementami tego będą, aby mieć opakowanie, w którym posiadają wszystkie nasze treści na ekranie. Pierwszym elementem tutaj będzie ukryta wiadomość, która mówi użytkownikowi, jeśli API mowy jest obsługiwane w przeglądarce. To będzie widoczne tylko, jeśli nie jest. Następnie nagłówek mówi użytkownikowi, że wykonane są elementy formularza, zostaną użyte do ich wiadomości.

 Div ID = "Wrapper" & GT;
& LT; Span Id = "nieobsługiwane" klasa = "obsługa ukryta" & gt; mowy API nie jest obsługiwane & LT; / Span & GT;
& LT; H2 & GT; Twoja wiadomość: & LT; / H2 & GT;

03. Wybierz wyniki

Podczas korzystania z interfejsu API ma dwa sposoby wyświetlania treści. W jednym, tekst wyświetla się, gdy użytkownik przestał mówić, a przycisk "słuchania" jest klikany. Drugi pokazuje słowa na ekranie, jak mówiono. Ten pierwszy przycisk radiowy pozwala na pokazany wynik końcowy mowy.

04. Radio dwa

Dodaje się tutaj drugi przycisk radiowy, a ten umożliwia użytkownikowi wybranie tekstu, który ma być wyświetlany, gdy mówią. Te przyciski radiowe zostaną odebrane przez JavaScript później i używane do sterowania wejściem mowy, ale na razie pozwala użytkownikowi mieć interfejs do sterowania tym.

 LT; Etykieta & GT;
& LT; Typ wejścia = Nazwa radia = Wartość typu rozpoznawania = Tymczasowe sprawdzone & GT; Jak mówisz & LT; / Label & GT;
& lt; / div & gt;

05. Wyświetl tekst

Build a voice controlled UI: Display the text — Mowa użytkownika zakończy się w obszarze tekstowym "transkrypcji" [obraz: projektant stron internetowych]

Tekst, który użytkownik przemawia do strony, musi być wyświetlona na ekranie. Tutaj dodaje się obszar tekstowy, który ma identyfikator "transkrypcji" - będzie to ukierunkowane tak, że mowa użytkownika się kończy tutaj. Jest również wyraźny przycisk, aby usunąć tekst.

 & LT; Textarea ID = "Transkrypcja" READONY & GT;
& lt; / textarea & gt;
& lt; br / & gt;
& LT; przycisk ID = "Clear-All" Class = "Przycisk" & GT; Wyczyść tekst

06. Ostatni interfejs

Build a voice controlled UI: The last interface — Kliknięcie przycisku mowy uruchamia się i zatrzymuje wykrywanie mowy [Image: Web Designer]

Ostateczne elementy interfejsu są teraz dodawane do ekranu. Przycisk mowy włącza i wyłącza mowę, dzięki czemu należy kliknąć przed mówieniem. Kliknięcie ponownie go zatrzymuje. Ponieważ jest to stosunkowo nowa interakcja, dziennik pod spodem powiedzie użytkownikom, co robić.

& lt; div class = "przyciski-opakowanie" & gt;
    & lt; Div ID = "Spośród mysków" Class = "Start" & GT; & LT;
  & lt; / div & gt;
  & lt; Div ID = "Log", kliknij, aby rozpocząć mówienie, a LT; / Div & GT;
& lt; / div & gt;

07. Dodaj javascript.

Teraz dodaj znaczniki skryptów przed tagiem zamykającym. Tutaj przejdzie cały JavaScript. Pierwsze dwie linie chwytają elementy strony z pasującym identyfikatorem i przechowuj je w zmiennej. Transkrypcja jest wynikiem tekstu mowy. Dziennik zaktualizuje użytkownika, jak go używać.

 Script & GT;
var transkrypcja = dokument.getElementbyd ("transkrypcja");
var log = dokument.getElementbyd ("log");
& LT; / Script & GT;

08. Zmienne wyniki

Korzystając z następnych kilku zmiennych, więcej elementów interfejsu jest w nich buforowanych. Przycisk mowy stanie się przełącznikiem, pozwalając użytkownikom włączyć i wyłączyć., Monitorowane przez zmienną boolowską, prawdziwą / fałszywą. Przycisk Clear-All usunie niezadowalające wyniki mowy.

 Var Start = Document.getElementByid ("spośródbutton");
var clear = dokument.getElementbyd ("clear-all");
var mówiący = false;

09. Czy jest obsługiwany?

Pierwszą rzeczą, jaką będzie to, że nasz kod jest dowiedzieć się, czy ta funkcja mowy jest obsługiwana przez przeglądarkę użytkownika. Jeśli ten wynik wrócił jako NULL, a jeśli oświadczenie zostanie rzucenie ukrytej wiadomości, jednocześnie przycisku rozpoczęcia od interfejsu, aby zatrzymać wejście mowy.

 Okno
okno.Webkitspechecognition ||.
zero;
if (window.speechecognition === null) {
Document.getElementByidyId ("nieobsługiwany"). Lista klasy .Remove ("Hidden");
start.classlist.add ("ukryty");
} else {

10. Rozpocznij rozpoznawanie

Rozpoznawanie mowy jest uruchomione jako "inaczej" do dostępnego rozpoznawania mowy. Wejście ciągłe jest uruchomione, ponieważ jest to domyślnie na przyciskach radiowych. Funkcja "Onresult" obsługuje wyniki wejścia mowy. Zostanie to dodane do pola tekstowego transkrypcji.

 Var Recognizer = nowe okno.
Rozpoznawanie mowy();
rozpoznawczym.Continuse = true;
rozpoznawać.onresult = Funkcja (zdarzenie) {
transkrypcja.Textcontent = '';
Dla (Var I = Event.resultindex; I & LT; Event.
wyniki.length; i ++) {

11. Końcowy lub tymczasowy?

IF instrukcja sprawdza teraz, czy użytkownik chce wyświetlić tekst, gdy mówią (tymczasowe) lub dopiero po zakończeniu mówienia (final). Zauważysz, że jeśli jest tymczasowe, każde słowo zostanie dodane do tekstu za pomocą "+ =", podczas gdy finał zrzuca tam cały tekst.

 If (Event.Results [I]. Isfinal) {
transkrypcja.TextContent = Event.Results [I]  .Trancript;
} else {
Transcription.TextContent + = Event.Results [I]  .transcript;
}
}
};

12. Obsługa błędów

Podobnie jak w przypadku większości apis JavaScript, istnieje przewodnik błędów, który pozwoli Ci zdecydować, co zrobić z wszelkimi problemami, które mogą się pojawić. Są one rzucane do "Log", aby przekazać opinię użytkownikowi, ponieważ jest to niezbędne, że są świadome tego, co może się dzielić z interfejsem.

 Rozpoznawanie.onerror = Funkcja (zdarzenie) {
log.innerhtml = 'Błąd rozpoznawania: "+
Event.Message + '& LT; BR / & GT; + log.innerhtml;
};

13. Zacznij mówić!

Słuchacz zdarzeń jest tutaj uruchamiany, gdy użytkownik kliknie przycisk, aby rozpocząć mówienie. Jeśli użytkownik nie mówi, przycisku zmienia kolor, aby wyświetlić mówienie, rozpoczął się, zmienna do mówienia jest ustawiona na true, a przycisk "Tymczasowy" jest sprawdzany, aby sprawdzić, czy jest to wybór użytkownika na wejście.

 Start.addeventlistener ("kliknij", funkcja () {
Jeśli (! mówienie) {
mówienie = prawdziwe;
Start.Classlist.toggle ('Stop');
rozpoznawczy.interimresults = Dokument.
QuerySelector ("wejście [nazwa ="
Type "] [Value =" tymczasowo "]"). Sprawdzone;

14. Weź wejście

Oświadczenie "Wypróbuj" rozpoczyna teraz rozpoznawanie mowy i mówi użytkownikowi, że powinni zacząć mówić i że kiedy się skończyli, "Kliknij ponownie, aby zatrzymać". Catch odbiera błąd i rzuci to do "Log" DIN, aby użytkownik mógł zrozumieć, co może się mylić.

 Spróbuj {
rozpoznawczy.start ();
log.innerhtml = "Zacznij mówić teraz
& lt; br / & gt; Kliknij, aby zatrzymać ";
} Catch (Ex) {
log.innerhtml = 'Błąd rozpoznawania:
& lt; br / & gt; + ex.message;
}

15. Kliknij, aby zatrzymać

Teraz, gdy użytkownik kliknie, aby przestać mówić, rozpoznawanie mowy jest zatrzymane. Przycisk zmienia się z powrotem do zieleni z czerwieni podczas rozmowy. Interfejs użytkownika jest aktualizowany tak, że użytkownik zostanie poinformowany, że usługa się zatrzymała. Zmienna mówiąca jest ustawiona na false, gotowa pozwolić, aby użytkownik znów się mówił.

} else {
rozpoznawczy.stop ();
Start.Classlist.toggle ('Stop');
log.innerhtml = 'Rozpoznawanie zatrzymane
& lt; br / & gt; Kliknij, aby mówić ";
mówienie = false;
}
});

16. Wyczyść tekst

Build a voice controlled UI: Clear the text — Wyczyść przycisk usuwa niesłusznie interpretowaną mowę [Obraz: projektant stron internetowych]

Ostateczny kod tej sekcji jest tylko wyraźnym przyciskiem, aby usunąć tekst wejściowy mowy na wypadek, gdyby jest błędnie zinterpretowany. Zapisz plik i przetestuj to w przeglądarce. Będziesz mógł kliknąć przycisk, aby mówić do komputera i zobaczyć wyniki.

 Clear.addeventlistener ("kliknij", funkcja () {transkrypcja.TextContent = '';
});
}

17. Dodaj cel

Teraz, gdy masz przykładowy przykład, musi być pewien celu do interfejsu, więc zróbmy, aby użytkownicy mogły wprowadzić recenzje. Zapisz stronę, a następnie wybierz Zapisz jako, z nową nazwą "opinie.html". Dodaj następujące elementy HTML tuż po

 H1 & GT; Recenzje produktów i LT; / H1 & GT;
& LT; DIV ID = "Recenzje" & GT; & LT;

18. Łączne zgłoszenie

Build a voice controlled UI: Total submission — Przycisk przesyłania przesyła wprowadzoną mowę [obraz: projektant stron internetowych]

Poprzedni kod będzie przechowywać opinie. Użytkownik będzie musiał przesłać swoje dane wejściowe, więc dodać przycisk przesyłania zaraz po przycisku "Wyczyść tekst", który będzie wokół linii 28 w kodzie. Następnie możesz przejść do JavaScript dla następnego kroku.

 & LT; przycisk ID = "Prześlij" Class = "Przycisk" & GT; Prześlij Review & LT; / Button & GT;

19. Nowe elementy interfejsu

Na górze JavaScript Dodaj nowe zmienne, aby utrzymać odniesienia do nowych elementów interfejsu, które zostały dodane. Dostarczą Ci sposobu przesyłania i wyświetlania wyników na ekranie w sekcji "Recenzje".

 Var Wyślij = Document.getElementByid ("Prześlij");
var Revice = Document.GetElementByid ("Recenzje");

20. Prześlij wpis

Teraz kod tutaj obsługuje, gdy użytkownik kliknie przycisk Prześlij, umieść to tuż przed kodem przycisku "Clear", który powinien znajdować się w linii 88 w kodzie. Najpierw powstaje znacznik akapitu, a wejście mowy jest następnie dodawane do tego. Następnie zostanie dodany do sekcji "Review".

 Prześlij.addeventlistener ("kliknij", funkcja () {
Niech p = dokument.Createelement ('p');
var textnode = dokument.creatextnode
(transkrypcja.Value);
p.appendChild (textnode);
Review.appendChild (P);
Niech dziś = nowa data ();
Niech s = dokument.Createelement ("mały");

21. Ostateczne zgłoszenie

Build a voice controlled UI: Final submission — Jeśli chcesz przechowywać przesłaną mowę, musisz użyć bazy danych [image: Web Designer]

Data dodaje się tak, że przegląd jest tuż za dokumentem. Wreszcie dodano regułę poziomą, aby pokazać, gdzie kończy się każdy przegląd, tekst jest usuwany gotowy do nowego wejścia. Zapisz stronę i przetestuj to. Zobaczysz, że teraz możesz przesłać swój przemówienie na stronę jako recenzje. W przypadku wytrwałości musisz użyć bazy danych do przechowywania tych wyników.

 TextNode = Document.CreatextNode (obecnie);
S.AppendChild (Textnode);
Review.appendChild (s);
Niech HR = Document.Createelement ("HR");
Review.appendChild (HR);
transkrypcja.Textcontent = '';
});

Ten artykuł został pierwotnie opublikowany w wydaniu 286 twórczego magazynu projektowania stron internetowych Projektant stron internetowych . Kup problem 286 tutaj lub Subskrybuj tutaj projektant stron internetowych .

Powiązane artykuły:

14 najlepszych apisów JavaScript
Zbuduj chatbot z zasilaniem AI
5 pojawiających się trendów UX w 2019 roku

Zbuduj sterowany głosem UI

01. Rozpocznij projekt

02. Dodaj zawartość

03. Wybierz wyniki

04. Radio dwa

05. Wyświetl tekst

06. Ostatni interfejs

07. Dodaj javascript.

08. Zmienne wyniki

09. Czy jest obsługiwany?

10. Rozpocznij rozpoznawanie

11. Końcowy lub tymczasowy?

12. Obsługa błędów

13. Zacznij mówić!

14. Weź wejście

15. Kliknij, aby zatrzymać

16. Wyczyść tekst

17. Dodaj cel

18. Łączne zgłoszenie

19. Nowe elementy interfejsu

20. Prześlij wpis

21. Ostateczne zgłoszenie

Jak - Najpopularniejsze artykuły

Jak czyścić pędzle: ostateczny przewodnik

Zbuduj prototypy z Adobe XD

Buduj teren w Houdini 17

Utwórz własną szczotkę kaligraficzną w programie Illustrator

Jak zbudować aplikację AR

Utwórz efekt wody wlewając w realflow

Jak wziąć swoje logo wektorowe z 2D do 3D

Jak nazwać agencja projektowa

Kategorie