Як додати функцію перетворення тексту в мову на будь-яку веб-сторінку

The перетворення тексту в мову Особливість відноситься до розмовний текст тексту відображається на пристрої. В даний час такі пристрої, як ноутбуки, планшети і мобільні телефони вже має цю функцію. Будь-яке додаток, запущене на цих пристроях, наприклад веб-браузер, може використовуйте його, і розширити його функціональність. Функція розповіді може бути відповідною допомогою для програми відображає рясний текст, як це пропонує можливість прослуховування відвідувачам сайту.

API веб-мовлення

The API веб-мовлення JavaScript є воротами доступ до функції "Текст-мовлення" через веб-браузер. Отже, якщо ви хочете запровадити функцію перетворення тексту в мову на веб-сторінці, що містить важкі тексти, і дозвольте читачам прослухати вміст, ви можете скористатися цим зручним API, або, більш конкретно, його Синтез мовлення інтерфейс.

Початковий код і перевірка підтримки

Для початку створіть веб-сторінку з мені зразок тексту, який буде розказаний, і три кнопки.

     
  Заєць з багатьма друзями
  Заєць був дуже популярний серед… 
 Але він відмовився, заявивши, що ... 
  Мораль історії…

Кнопки будуть контроль над оповіданням. Тепер нам потрібно переконатися, що UA підтримує Синтез мовлення інтерфейс. Для цього ми швидко перевіряємо JavaScript, якщо вікна об'єкт має 'speechSynthesis' власності, чи ні.

 onload = function () if ('speechSynthesis' у вікні) / * синтезується мова * / else / * синтез мови не підтримується * /

Якщо Синтез мови є, спочатку ми створити посилання для Синтез мови що ми призначаємо синтезатор змінної. Ми також ініціювати прапор з помилковий значення (ми побачимо його мету пізніше в пості), і ми створювати посилання та обробники подій для трьох кнопок (відтворення, пауза, стоп).

Коли користувач натискає одну з кнопок, його відповідна функція (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 інтерфейс, що містить інформацію про мовлення, наприклад, текст, що підлягає читанню, гучність мовлення, голос, що говориться, швидкість, крок і мова мови. Додаємо текст статті як параметр конструктора, і призначити його висловлювання змінної.

 function onClickPlay () if (! flag) flag = true; висловлення = 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]; заяву.

The onend властивість представляє обробник подій, тобто виконується, коли мова закінчена. Всередині неї ми змінюємо значення прапор змінної назад до помилкового так що код, який починає мова може бути виконано коли кнопка знову натиснув.

Потім ми називаємо SpeechSynthesis.speak () Метод для того, щоб почати розповідь. Ми також повинні перевірити якщо оповідання призупинено, для яких ми використовуємо тільки для читання SpeechSynthesis.paused власності. Якщо оповідання призупинено, нам потрібно відновити розповідь на кнопці, яку ми можемо отримати, використовуючи SpeechSynthesis.resume () метод.

2. Пауза

Тепер створімо onClickPause () Функція, в якій ми спочатку перевіряємо якщо розповідь триває і не призупинено. Ми можемо перевірити ці умови, використовуючи SpeechSynthesis.speaking і SpeechSynthesis.paused властивості. Якщо обидві умови вірні, наші onClickPause () функції призупиняє мовлення за допомогою виклику SpeechSynthesis.pause () метод.

 функція onClickPause () if (synth.speaking &&! synth.paused) / * pause narration * / synth.pause ();

3. Стоп

The onClickStop () функція побудований аналогічно onClickPause (). Якщо мова триває, ми Зупини це за допомогою виклику SpeechSynthesis.cancel () метод видаляє всі висловлювання.

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

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

Підтримка браузера

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

Робоча демо

Погляньте на демонстрацію нижче, або перегляньте повний код на Github.

Див. Pen Ã ?? Â ° Ã… Â¸Ã¢Â Â Â Â Â Â Â Â Â Â Текст у мову - JavaScript від HONGKIAT (@hkdc) на CodePen.