Как да добавите функция Text-to-Speech на всяка уеб страница

Най- текст-към-говор се отнася до говорен разказ на текст на устройство. В момента устройства като лаптопи, таблети и мобилни телефони вече имате тази функция. Всяко приложение, което работи на тези устройства, като например уеб браузър, може използвайте го, и разшири функционалността му. Функцията за разказване може да бъде подходяща помощ за приложение, което показва изобилен текст, тъй като предлага възможност за слушане към посетителите на уебсайта.

API на уеб реч

Най- API на JavaScript за уеб реч е входът към достъп до функцията Текст за говор от уеб браузър. Така че, ако искате да въведете функцията за преобразуване на текст в реч на тежка уеб страница и да позволите на читателите си да слушат съдържанието, можете да използвате този удобен API или, по-конкретно, неговия SpeechSynthesis интерфейс.

Първоначален код и проверка за поддръжка

За да започнете, нека създадем уеб страница с аз пробен текст, който ще бъде разказан, и три бутона.

 
    
 
 
Зайчето с много приятели
  
Заекът беше много популярен с… 
 
Но той отказа, заявявайки, че… 
  
Морал на историята… 
 
 

Бутоните ще бъдат контрол на разказа. Сега трябва да сме сигурни дали UA поддържа SpeechSynthesis интерфейс. За да направите това, ние бързо проверяваме с JavaScript, ако прозорец обектът има "SpeechSynthesis" Имот, или не.

 onload = function () if ('speechSynthesis' в прозореца) / * синтезиран реч * / else / * синтез на реч не се поддържа * / 

ако speechSynthesis е на разположение, първо ние създайте препратка за speechSynthesis които присвояваме на синт променлива. Ние също инициирате знаме с фалшив стойност (ще видим нейната цел по-късно в публикацията) и ние създаване на препратки и манипулатори на събития за трите бутона (Play, Pause, Stop).

Когато потребителят натисне един от бутоните, съответната му функция (onClickPlay (), onClickPause (), onClickStop ()) ще бъде извикан.

 if ('speechSynthesis' в прозореца) var synth = speechSynthesis; var flag = false; / * препратки към бутоните * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# pause'); var stopEle = document.querySelector ('# stop'); / * щракнете върху манипулаторите на събития за бутоните * / playEle.addEventListener ('click', onClickPlay); pauseEle.addEventListener ('click', onClickPause); stopEle.addEventListener ('click', onClickStop); функция onClickPlay ()  функция onClickPause ()  функция onClickStop ()  

Създайте потребителски функции

Сега нека изграждане на функциите за кликване от трите отделни бутона, които ще бъдат извикани от манипулаторите на събития.

1. Пускане / възобновяване

Когато щракнете върху бутона Възпроизвеждане, първо ние проверете флаг. Ако е фалшив, ние го нагласихме вярно, така че ако някой път бутонът бъде натиснат по-късно, кодът вътре в първи ако условие няма да се изпълни (не докато знамето е фалшив отново).

Тогава ние създайте нова инстанция на SpeechSynthesisUtterance интерфейс, който съдържа информация за речта, като например текста, който трябва да бъде прочетен, силата на речта, гласът, в който се говори, скорост, стъпка и език на речта. Добавяме текста на статията като параметър на конструктора, и да го зададете на изказване променлив.

 функция onClickPlay () if (! flag) flag = true; utterance = new SpeechSynthesisUtterance (document.querySelector ("статия"). textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = function () flag = false; ; synth.speak (реч);  if (synth.paused) / * пускане / възобновяване на разказа * / synth.resume ();  

Ние използваме SpeechSynthesis.getVoices () метод посочете глас за речта от гласовете, достъпни в устройството на потребителя. Тъй като този метод връща масив от всички налични гласови опции в устройство, ние задайте първия наличен глас на устройството с помощта на utterance.voice = synth.getVoices () [0]; изявление.

Най- накрая свойство представлява манипулатор на събитие, който е изпълняват, когато речта приключи. Вътре в него променяме стойността на флаг променлив обратно към фалшиво така че кодът, който започва речта може да се изпълни когато бутонът е отново натисна бутона.

Тогава ние наричаме SpeechSynthesis.speak () метод, за да започнете разказа. Ние също трябва да проверим ако разказът е спрян, за които използваме само за четене SpeechSynthesis.paused Имот. Ако разказът е спрян, трябва да го направим възобновете разказа върху бутона, който можем да постигнем с помощта на SpeechSynthesis.resume () метод.

2. Пауза

Сега да създадем onClickPause () функция, в която първо проверяваме ако разказът продължава и не е пауза. Можем да тестваме тези условия, като използваме SpeechSynthesis.speaking и SpeechSynthesis.paused Имоти. Ако и двете условия са верни, нашите onClickPause () функция поставя на пауза речта като се обадите на SpeechSynthesis.pause () метод.

 функция onClickPause () if (synth.speaking &&! synth.paused) / * пауза разказ * / synth.pause ();  

3. Спри

Най- onClickStop () функция построена подобно на onClickPause (). Ако речта продължава, ние Спри като се обадите на SpeechSynthesis.cancel () метод премахва всички изказвания.

 функция onClickStop () if (synth.speaking) / * стоп разказ * / / * за safari * / flag = false; synth.cancel ();  

Обърнете внимание, че при отмяната на реч, накрая Събитието се активира автоматично, и ние вече добавихме кода за нулиране на флага вътре в него. въпреки това, в браузъра Safari има грешка което предотвратява стрелба на това събитие, затова сме върнали флага в полето onClickStop () функция. Не е нужно да го правите, ако не искате да поддържате Safari.

Поддръжка на браузър

Всички най-нови версии на модерни браузъри имат пълна или частична подкрепа за API за синтез на реч. Браузърите на Webkit не възпроизвеждат реч от няколко раздела, паузата е бавна (работи, но не функционира добре) и речта не се нулира, когато потребителят презареди страницата в браузърите на Webkit.

Работна демонстрация

Разгледайте демонстрацията на живо по-долу или вижте пълния код на Github.

Вижте перото?¸Ã¢? Текст в реч - JavaScript от HONGKIAT (@hkdc) на CodePen.