Jak dodać funkcję zamiany tekstu na mowę na dowolnej stronie internetowej

The Tekst na mowę funkcja odnosi się do mówiona narracja tekstu wyświetlane na urządzeniu. Obecnie urządzenia takie jak laptopy, tablety i telefony komórkowe już mam tę funkcję. Każda aplikacja działająca na tych urządzeniach, np. Przeglądarka internetowa, może wykorzystaj to, i rozszerzyć jego funkcjonalność. Funkcja narracji może być odpowiednią pomocą dla aplikacji wyświetla obfity tekst, jak to oferuje opcję słuchania odwiedzającym stronę.

Web Speech API

The Interfejs JavaScript JavaScript Web Speech jest bramą do dostęp do funkcji zamiany tekstu na mowę w przeglądarce internetowej. Jeśli więc chcesz wprowadzić funkcję zamiany tekstu na mowę na tekstową stronę internetową i pozwolić swoim czytelnikom na słuchanie treści, możesz skorzystać z tego poręcznego interfejsu API lub, mówiąc konkretniej, jego Synteza mowy berło.

Wstępny kod i kontrola wsparcia

Aby rozpocząć, utwórzmy stronę internetową za pomocą przykładowy tekst do narracji, i trzy przyciski.

     
  Zając z wieloma przyjaciółmi
  Zając był bardzo popularny w… 
 Ale odmówił, stwierdzając, że… 
  Morał historii…

Przyciski będą kontrole narracji. Teraz musimy się upewnić, czy UA obsługuje Synteza mowy berło. Aby to zrobić, szybko sprawdzamy za pomocą JavaScript, czy okno obiekt ma 'synteza mowy' własność, albo nie.

 onload = function () if ('speechSynthesis' w oknie) / * obsługiwana synteza mowy * / else / * synteza mowy nie jest obsługiwana * /

Jeśli synteza mowy jest dostępny, najpierw my utwórz odniesienie dla synteza mowy które przypisujemy do syntezator zmienna. My także zainicjować flagę z fałszywy wartość (zobaczymy jej cel później w poście), a my utwórz referencje i kliknij obsługę zdarzeń dla trzech przycisków (Play, Pause, Stop).

Gdy użytkownik kliknie jeden z przycisków, jego odpowiednia funkcja (onClickPlay (), onClickPause (), onClickStop ()) będzie wezwany.

 if ('speechSynthesis' w oknie) var synth = speechSynthesis; var flag = false; / * odniesienia do przycisków * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# pause'); var stopEle = document.querySelector ('# stop'); / * kliknij obsługę zdarzeń dla przycisków * / playEle.addEventListener („kliknij”, onClickPlay); pauseEle.addEventListener („kliknij”, onClickPause); stopEle.addEventListener („kliknij”, onClickStop); funkcja onClickPlay ()  funkcja onClickPause ()  funkcja onClickStop ()

Utwórz funkcje niestandardowe

A teraz zbuduj funkcje kliknięcia trzech indywidualnych przycisków, które będą wywoływane przez moduły obsługi zdarzeń.

1. Graj / Wznów

Po kliknięciu przycisku Odtwórz najpierw my Sprawdź flaga. Jeśli to jest fałszywy, ustawiliśmy to prawdziwe, więc jeśli kiedykolwiek przycisk zostanie kliknięty później, kod wewnątrz pierwszy Jeśli warunek nie zostanie wykonany (nie dopóki flaga nie jest fałszywy jeszcze raz).

Wtedy my utwórz nowe wystąpienie SpeechSynthesisAtterance interfejs, który przechowuje informacje o mowie, takie jak tekst do odczytania, głośność mowy, głos, prędkość, wysokość i język mowy. Dodajemy tekst artykułu jako parametr konstruktora, i przypisz go do wypowiedź zmienna.

 function onClickPlay () if (! flag) flag = true; utterance = new SpeechSynthesisUtterance (document.querySelector („artykuł”). textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = function () flag = false; ; synth.speak (wypowiedź);  if (synth.paused) / * anuluj / wznów narrację * / synth.resume ();

Używamy SpeechSynthesis.getVoices () metoda do wyznacz głos dla przemówienia z głosów dostępnych w urządzeniu użytkownika. Ponieważ ta metoda zwraca tablicę wszystkich dostępnych opcji głosowych w urządzeniu, my przypisz pierwszy dostępny głos urządzenia za pomocą utterance.voice = synth.getVoices () [0]; komunikat.

The na koniec właściwość reprezentuje procedurę obsługi zdarzeń, która jest wykonywane, gdy mowa jest zakończona. Wewnątrz zmieniamy wartość flaga zmienna powrót do fałszu tak, że kod rozpoczynający mowę można wykonać kiedy przycisk jest ponownie kliknięty.

Następnie nazywamy SpeechSynthesis.speak () metoda w celu zacznij narrację. Musimy również sprawdzić jeśli narracja zostanie wstrzymana, dla których używamy tylko do odczytu Synteza mowy. Zatrzymana własność. Jeśli narracja zostanie wstrzymana, musimy wznowić narrację na kliknięcie przycisku, które możemy uzyskać za pomocą SpeechSynthesis.resume () metoda.

2. Pauza

Stwórzmy teraz onClickPause () funkcja, w której najpierw sprawdzamy jeśli narracja trwa i nie jest wstrzymana. Możemy przetestować te warunki, korzystając z SpeechSynthesis.speaking i Synteza mowy. Zatrzymana nieruchomości. Jeśli oba warunki są prawdziwe, nasz onClickPause () funkcjonować wstrzymuje mowę dzwoniąc do SpeechSynthesis.pause () metoda.

 funkcja onClickPause () if (synth.speaking &&! synth.paused) / * wstrzymaj narrację * / synth.pause ();

3. Stop

The onClickStop () funkcja jest zbudowany podobnie jak onClickPause (). Jeśli mowa trwa, my przestań dzwoniąc do SpeechSynthesis.cancel () metoda, która usuwa wszystkie wypowiedzi.

 funkcja onClickStop () if (synth.speaking) / * zatrzymaj narrację * / / * dla safari * / flag = false; synth.cancel ();

Zauważ, że przy anulowaniu mowy, na koniec zdarzenie jest uruchamiane automatycznie, i już dodaliśmy do niego kod resetowania flagi. jednak, jest błąd w przeglądarce Safari który zapobiega odpaleniu tego zdarzenia, dlatego zresetowaliśmy flagę w onClickStop () funkcjonować. Nie musisz tego robić, jeśli nie chcesz obsługiwać Safari.

Obsługa przeglądarki

Wszystkie najnowsze wersje nowoczesnych przeglądarek mieć pełne lub częściowe wsparcie dla API syntezy mowy. Przeglądarki Webkit nie odtwarzają mowy z wielu kart, pauza jest błędna (działa, ale błędna), a mowa nie jest resetowana, gdy użytkownik przeładowuje stronę w przeglądarkach Webkit.

Działające demo

Obejrzyj poniższą prezentację na żywo lub sprawdź pełny kod na Github.

Zobacz pióro Ã ° ° Ã… Â¸ZA¢Â Â Â Â Text to Speech - JavaScript od HONGKIAT (@hkdc) na CodePen.