Како додати текст-у-говор на било коју веб страницу

Тхе Текст у говор се односи на говорна нарација текста приказан на уређају. Тренутно, уређаји попут лаптопа, таблета и мобилних телефона већ имате ову функцију. Свака апликација која ради на овим уређајима, као што је веб прегледач, може искористите га, и проширити његову функционалност. Функција нарације може бити погодна помоћ за апликацију приказује обилан текст, као што је то нуди могућност слушања посетиоцима сајта.

Веб Спеецх АПИ

Тхе ЈаваСцрипт АПИ за говорни говор је капија до приступите функцији Тект-то-Спеецх помоћу веб прегледача. Дакле, ако желите да уведете текст-у-говор функционалност на текстуално тешку веб страницу, и омогућите својим читаоцима да слушају садржај, можете користити овај згодан АПИ, или, да будемо прецизнији, његов СпеецхСинтхесис интерфејс.

Иницијални код и провера подршке

Да бисте започели, направимо веб страницу са ја узорак текста који ће бити испричан, и три дугмета.

 
    
 
 
Зец са много пријатеља
  
Зец је био веома популаран ... 
 
Али он је одбио, тврдећи да ... 
  
Наравоученије… 
 
 

Тастери ће бити контроле нарације. Сада морамо бити сигурни да ли је УА подржава СпеецхСинтхесис интерфејс. Да бисмо то урадили, брзо проверавамо са ЈаваСцрипт-ом ако прозор објекат има 'спеецхСинтхесис' својство, или не.

 онлоад = фунцтион () иф ('спеецхСинтхесис' у прозору) / * синтеза говора подржана * / елсе / * синтеза говора није подржана * / 

Ако спеецхСинтхесис је на располагању, прво ми креирајте референцу за спеецхСинтхесис које ми додељујемо синтх променљива. Ми такође иницирати заставу са фалсе вриједност (видећемо њену сврху касније у посту), и ми креирајте референце и кликните руковатеље догађаја за три тастера (Плаи, Паусе, Стоп).

Када корисник кликне на један од тастера, његова функција (онЦлицкПлаи (), онЦлицкПаусе (), онЦлицкСтоп ()) ће бити позвани.

 иф ('спеецхСинтхесис' у прозору) вар синтх = спеецхСинтхесис; вар флаг = фалсе; / * референце на дугмад * / вар плаиЕле = доцумент.куериСелецтор ('# плаи'); вар паусеЕле = доцумент.куериСелецтор ('# паусе'); вар стопЕле = доцумент.куериСелецтор ('# стоп'); / * кликнути на руковатеље догађаја за дугмад * / плаиЕле.аддЕвентЛистенер ('клик', онЦлицкПлаи); паусеЕле.аддЕвентЛистенер ('клик', онЦлицкПаусе); стопЕле.аддЕвентЛистенер ('клик', онЦлицкСтоп); фунцтион онЦлицкПлаи ()  функција онЦлицкПаусе ()  функција онЦлицкСтоп ()  

Креирајте прилагођене функције

Сада хајде изградите функције клика од три појединачна дугмета која ће бити позвана од стране руковаоца догађаја.

1. Репродукуј / Настави

Када се притисне дугме за репродукцију, прво ми проверите флаг. Ако је фалсе, поставили смо га истина, тако да ако било када кликнете на дугме касније, код унутар први ако услов се неће извршити (не све док застава није фалсе поново).

Онда ми направите нову инстанцу СпеецхСинтхесисУттеранце интерфејс који садржи информације о говору, као што је текст који се чита, гласноћа говора, глас који се говори, брзина, висина и језик говора. Додајемо текст чланка као параметар конструктора, и доделите га изговор променљива.

 фунцтион онЦлицкПлаи () иф (! флаг) флаг = труе; уттеранце = нев СпеецхСинтхесисУттеранце (доцумент.куериСелецтор ('артицле'). тектЦонтент); уттеранце.воице = синтх.гетВоицес () [0]; уттеранце.оненд = фунцтион () флаг = фалсе; ; синтх.спеак (изговор);  иф (синтх.паусед) / * унпусе / ресуме нарратион * / синтх.ресуме ();  

Ми користимо СпеецхСинтхесис.гетВоицес () метход то одредите глас за говор са гласова доступних на корисничком уређају. Пошто овај метод враћа низ свих доступних гласовних опција у уређају, ми додељивање првог доступног гласа уређаја помоћу уттеранце.воице = синтх.гетВоицес () [0]; изјава.

Тхе оненд својство представља руковалац догађаја који је извршен када је говор завршен. Унутар њега, ми променимо вредност флаг променљива назад на лаж тако да код који започиње говор може се извршити када је дугме поново кликнуо.

Онда зовемо СпеецхСинтхесис.спеак () методу да би започните нарацију. Такође морамо да проверимо ако је нарација заустављена, за које користимо само за читање СпеецхСинтхесис.паусед својство. Ако се нарација заустави, морамо наставите нарацију на клик дугмета, које можемо постићи користећи СпеецхСинтхесис.ресуме () метода.

2. Пауза

Сада креирајмо онЦлицкПаусе () функција у којој прво провјеравамо ако је нарација у току и није заустављена. Можемо тестирати ове услове користећи се СпеецхСинтхесис.спеакинг анд тхе СпеецхСинтхесис.паусед својства. Ако су оба услова тачна, наша онЦлицкПаусе () функције паузира говор позивом СпеецхСинтхесис.паусе () метода.

 фунцтион онЦлицкПаусе () иф (синтх.спеакинг &&! синтх.паусед) / * паусе нарација * / синтх.паусе ();  

3. Стоп

Тхе онЦлицкСтоп () функција је слично онЦлицкПаусе (). Ако је говор у току, ми престани позивом СпеецхСинтхесис.цанцел () методом уклања све изјаве.

 фунцтион онЦлицкСтоп () иф (синтх.спеакинг) / * стоп нарација * / / * за сафари * / флаг = фалсе; синтх.цанцел ();  

Обратите пажњу на отказивање говора оненд догађај се аутоматски отвара, и ми смо већ додали код за ресетовање заставе унутар њега. Међутим, у прегледнику Сафари постоји грешка који спречава да се овај догађај испаљује, зато смо ресетовали заставу у онЦлицкСтоп () функције. Не морате то да урадите ако не желите да подржите Сафари.

Подршка за претраживач

Све најновије верзије модерних претраживача имају пуну или делимичну подршку за АПИ за синтезу говора. Вебкит претраживачи не репродукују говор са више картица, паузирање је неисправно (ради, али је грешком), а говор се не ресетује када корисник поново учита страницу у Вебкит претраживачима.

Воркинг демо

Погледајте приказану верзију уживо испод, или погледајте комплетан код на Гитхубу.

Погледајте оловку¸А¢А ?? А ?? А'А £ Тект то Спеецх - ЈаваСцрипт би ХОНГКИАТ (@хкдц) на ЦодеПен.