Web Speech API – nawigacja na stronie z audiodeskrypcją


19 października 2020 / Michał Kortas


Zaprzyjaźniałem się ostatnio z możliwościami Web Speech API przy okazji tworzenia nawigacji po aplikacji webowej. Konieczna była funkcjonalność odczytująca opisy aktywnych elementów. Posłużyłem się w tym celu interfejsem SpeechSynthesis, który jest już obecnie dość dobrze wspierany przez wiodące przeglądarki. Przyjąłem, że powinienem brać pod uwagę te elementy, które posiadają niepsute atrybuty aria-label, aria-labelledby lub aria-describedby. Dodatkowo chciałem, aby obsługiwane były również formularze i ich etykiety.

Demo Web Speech API

Przygotowałem prostą stronę z nawigacją i niewielkim formularzem.

Strona z nawigacją i formularzem

Strona z nawigacją i formularzem

Kod Web Speech API

Na początek pobrałem wszystkie interesujące mnie elementy.

Następnie przygotowałem prostą funkcję, która ma odebrać tekst do przeczytania i spróbować go przeczytać na głos. Do celów testowych przyjąłem język angielski ( en-US). Można użyć języka polskiego ( pl-PL) jeśli odczytywany tekst jest w naszej rodzimej mowie.

Pozostałych ustawień dla klasy SpeechSynthesisUtterance nie używam w tym przykładzie, ale łatwo nimi manipulować za pomocą kilku właściwości.

Należą do nich:

  • lang – ustawianie języka
  • pitch – wysokość / ton dźwięku
  • rate – szybkość wymowy
  • text – tekst
  • voice – rodzaj głosu
  • volume – głośność

Funkcja getElementDescription próbuje pobrać tekst z elementu aria-label lub innych, opisanych wyżej.

Efekt końcowy

Demo Web Speech API: https://webroad.pl/demo/audio-described-navigation

Kod na GitHub: https://github.com/michalkortas/audio-described-navigation


Tagi:


Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *