Как добавить функцию преобразования текста в речь на любой веб-странице

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

API веб-речи

JavaScript API веб-речи это ворота в получить доступ к функции преобразования текста в речь через веб-браузер. Итак, если вы хотите внедрить функцию преобразования текста в речь на веб-странице с большим объемом текста и позволить своим читателям слушать контент, вы можете использовать этот удобный 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'); / * обработчики события click для кнопок * / playEle.addEventListener ('click', onClickPlay); pauseEle.addEventListener ('click', onClickPause); stopEle.addEventListener ('click', onClickStop); function onClickPlay ()  function onClickPause ()  function onClickStop ()

Создать пользовательские функции

Теперь давайте построить функции клика из трех отдельных кнопок, которые будут вызываться обработчиками событий.

1. Воспроизвести / возобновить

Когда кнопка Play нажата, сначала мы проверить флаг. Если это ложный, мы установили это правда, так что если в любое время нажать кнопку позже, код внутри первый если условие не выполнится (пока флаг не ложный снова).

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

 function onClickPlay () if (! flag) flag = true; utterance = new SpeechSynthesisUtterance (document.querySelector ('article'). 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 () метод.

 function onClickPause () if (synth.speaking &&! synth.paused) / * pause narration * / synth.pause ();

3. Стоп

onClickStop () функция построен аналогично onClickPause (). Если речь продолжается, мы прекрати это позвонив SpeechSynthesis.cancel () метод, который удаляет все высказывания.

 function onClickStop () if (synth.speaking) / * остановить повествование * / / * для сафари * / flag = false; synth.cancel ();

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

Поддержка браузера

Все последние версии современных браузеров иметь полную или частичную поддержку для API синтеза речи. Браузеры Webkit не воспроизводят речь с нескольких вкладок, пауза глючит (работает, но глючит), и речь не сбрасывается, когда пользователь перезагружает страницу в браузерах Webkit.

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

Посмотрите демонстрационную версию ниже или посмотрите полный код на Github..

Смотрите перо Ã ?? Â ° Ã… Â¸Ã¢Текст в речь - JavaScript от HONGKIAT (@hkdc) на CodePen.