Kilka dni temu zauważyłem coś, czego nigdy wcześniej nie zauważyłem w jednym z moich artykułów na Medium, przycisk „ słuchaj ” u góry posta. Kiedy go kliknąłem, mój artykuł został przeczytany na głos przez przeglądarkę. Pomyślałem, że to fajna funkcja i zastanawiałem się, jak sam mógłbym zbudować coś takiego.

Badania

Trochę badań doprowadziło mnie do Web Speech API . Ten interfejs API ma dwa różne komponenty. Rozpoznawanie i synteza mowy . Dziś interesuje nas tylko to drugie.

Dodatkowo natknąłem się na obsługę przeglądarek dla tego API. Bez problemu możemy korzystać z Speech API we wszystkich nowoczesnych przeglądarkach.

Cechy

Interfejs API SpeechSynthesis pozwala nam poinstruować przeglądarkę, aby przekonwertowała przekazany tekst na mowę. Jesteśmy w stanie zatrzymać/wznowić tę mowę do woli i kontrolować głosy, tempo mówienia i wysokość tonu.

Dostępne głosy zależą od używanej przeglądarki i systemu operacyjnego.

Próbny

Przejdźmy przez kod JavaScript i zobaczmy, jak działa demo.

Sprawdzanie obsługi przeglądarki

Na początku tego skryptu sprawdzamy, czy przeglądarka obsługuje SpeechSynthesis API. Jeśli przeglądarka nie obsługuje tego API, cały nasz skrypt nie będzie działał, więc wychodzimy z tej funkcjonalności.

Ustawianie opcji głosowych przeglądarki

Tutaj przechodzimy przez głosy udostępnione przez przeglądarkę i tworzymy opcję dla każdego z nich w naszym select. Jeśli w przeglądarce nie ma dostępnych głosów, generowany jest alert, a metoda nic nie robi.

Uzyskiwanie wybranej opcji głosowej

Pobierz pierwszą wybraną opcję z selecti użyj jej nazwy, aby znaleźć opcję z tablicy głosów.

Odtwarzanie i wstrzymywanie zamiany tekstu na mowę

Gdy użytkownik kliknie przycisk odtwarzania, sprawdzamy, czy obiekt SpeechSynthesis przeglądarki jest aktualnie w stanie wstrzymania. Jeśli tak, po prostu wznawiamy rozmowę.

Jeśli nie jest w stanie wstrzymania, tworzymy nową instancję SpeechSynthesisUtterance. Przekazujemy tekst i wybrany głos i wywołujemy speakmetodę.

Gdy użytkownik kliknie przycisk pauzy, po prostu wywołujemy pause()metodę w SpeechSynthesis API.

Opcje dodatkowe

Mamy pod naszą kontrolą wiele innych opcji w ramach tego interfejsu API.

• Wysokość — pobierz i ustaw ton głosu, aby był głębszy lub wyższy.
• Szybkość — Pobierz i ustaw szybkość, z jaką będzie odczytywany tekst.
• Głośność — Pobierz i ustaw głośność, z jaką będzie wypowiadany tekst.
• Lang — Pobierz i ustaw język tekstu, który będzie wypowiadany.

• Obsługa przeglądarki interfejsu API syntezy mowy
• MDN — Web Speech API

Web Speech API jest bardzo interesującym dodatkiem do zestawu narzędzi dla programistów internetowych. Mam nadzieję, że to demo i wyjaśnienie były dla Ciebie przydatne. Daj mi znać w komentarzach, do czego byś używał tego API!

Jeśli podobają Ci się moje treści i chcesz wesprzeć moje wysiłki, rozważ zostanie subskrybentem Medium poprzez mój link afiliacyjny . Nic Cię to nie będzie kosztować, ale Medium przekaże mi część dochodów za polecanie Cię.

A jeśli chcesz, możesz połączyć się ze mną na LinkedIn lub Twitterze !

Twórz aplikacje z komponentami wielokrotnego użytku, takimi jak Lego

Narzędzie open-source Bit pomaga ponad 250 000 programistom tworzyć aplikacje z komponentami.

Zmień dowolny interfejs użytkownika, funkcję lub stronę w składnik wielokrotnego użytku — i udostępnij go w swoich aplikacjach. Łatwiej jest współpracować i szybciej budować.

→ Dowiedz się więcej

Podziel aplikacje na komponenty, aby ułatwić tworzenie aplikacji i cieszyć się najlepszymi doświadczeniami dla pożądanych przepływów pracy:

→ Mikrofronty

→ System projektowania

→ Współdzielenie kodu i ponowne wykorzystanie

→ Monorepo

Ucz się więcej