KorniloFF-ScriptS ©

Здравствуйте, Гость!

Путь страницы:   > Javascripts > Бесплатные скрипты > Озвучивание текста на сайте

Озвучивание текста на сайте

Подключение SpeechKit JavaScript API к сайту

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

Для подключения SpeechKit JavaScript API к сайту нужно выполнить следующие шаги:

  1. Подключить основную библиотеку webspeechkit.js, желательно между тегами head
  2. Зайти на страницу получения индивидуального ключа и получить там код самого ключа. Далее в коде будет обозначен как . Выбор API ключа для webspeechkit.js
  3. Создать в теле сайта скриптовый блок с настройками скрипта. Пример настроек взят с официального сайта.
    
    			
    			
  4. Так же в теле сайта нужно создать блок с уникальным идентификатором и разместить в нем текст для прослушивания. Примерно так:
    Текст для прослушивания...
  5. Теперь нужно создать кнопку запуска озвучки. В простом варианте она может выглядеть так: Указанный идентификатор должен обязательно совпадать с идентификатором блока, созданного в предыдущем шаге.
  6. Все, теперь при нажатии на кнопку "Прослушать" броузер воспроизведет текст из блока
    ...

Как всегда, если возникнут сложности адаптации, обратиться за помощью ко мне можно через Обратную связь.

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

Фикс асинхронной загрузки страницы

Благодаря комментариям пользователей была обнаружена проблема работы скрипта на сайте. Это связано с тем, что Яндекс API почему-то не всегда корректно подгружается при асинхронной загрузке страницы.

Если у вас не работает пример на сайте - зайдите по прямой ссылке на страницу - https://js-master.ru/?Javascripts___Бесплатные_скрипты___Озвучивание_текста_на_сайте и нажмите F5. После этого проверьте пример ещё раз.

Нерабочие опции

Ложкой дегтя в работе библиотеки можно считать отсутствие заявленной возможности получения с сервера Яндекса набора доступных голосов и эмоций.

По идее метод его вызоав должен выглядеть как tts.speakers();. Но при исполнении этот код в консоли дает ошибку:

Запрос из постороннего источника заблокирован: Политика одного источника запрещает чтение удаленного ресурса на https://webasr.yandex.net/speakers?engine=ytcp&lang=ru. (Причина: отсутствует заголовок CORS 'Access-Control-Allow-Origin').

При этом, если зайти непосредственно по адресу запроса? можно вполне увидеть этот набор и использовать его в настройках скрипта.

Набор доступных голосов и эмоций:

Рабочий пример подключения webspeechkit.js

Афанасий Фет
	Купальщица.
	...
	Игривый плеск в реке меня остановил.
	Сквозь ветви темные узнал я над водою
	Ее веселый лик - он двигался, он плыл,-
	Я голову признал с тяжелою косою.
	...
	Узнал я и наряд, взглянул на белый хрящ,
	И превратился весь в смущенье и тревогу,
	Когда красавица, прорвав кристальный плащ,
	Вдавила в гладь песка младенческую ногу.
	...
	Она предстала мне на миг во всей красе,
	Вся дрожью легкою объята и пугливой.
	Так пышут холодом на утренней росе
	Упругие листы у лилии стыдливой.

Комментарии к теме ( 8 )

Дабавить комментарий

8 Павел   CMS: Не указана... ( 31.07.2018 06:07:22 )
Статья актуальная, работает?

Pavel KorniloFF:

Да, вполне.
Просто через ajax почему-то Яндекс API не всегда подгружается.
Если такое произошло - зайдите по прямой ссылке на страницу - https://js-master.ru/?Javascripts___Бесплатные_скрипты___Озвучивание_текста_на_сайте и нажмите F5.
7 Рафаэль   CMS: Не указана... ( 30.07.2018 15:19:30 )
нашел причину - почему то ключ который я получил на яндексе не работает - попробовал чужой ключ из примера и заработало

Pavel KorniloFF:

Здравствуйте, Рафаэль!
Только что прочёл Ваши посты. Отлично, что нашли причину.
Броузер, в любом случае, был бы не при чём, если бы на моём сайте пример арботал, а на Вашем - тот же код - нет.
Спасибо, что указали причину, может быть полезно другим.
6 Рафаэль   CMS: Не указана... ( 30.07.2018 12:50:21 )
может быть у меня браузер устаревший (фаерфокс 48 на маке)
5 Рафаэль   CMS: Не указана... ( 30.07.2018 12:45:48 )
Сделал как в вашем примере но выдает ошибку:
TypeError: namespace.ya.speechkit.settings is undefined
в head я подключаю скрипт и создаю tts как в вашем примере
даже без запуска речи выдает эту ошибку
и в другом варианте тоже ошибка:
в head я подключаю скрипт
в window.onload я создаю tts
и сразу после этого запускаю tts.speak()
ошибка:
Session null: Error:
4 Андрей   CMS: Joomla ( 23.06.2018 17:37:02 )
Большое спасибо. Данный вариант сработал.
Правда, не без вопросов. Сейчас скрипт запускает озвучивание всего текста на странице, не зависимо от того, к какому объекту применен id. И самое печальное, он долго срабатывает. Озвучка текста начинается через 1 минуту, если не больше.
Подскажите, представленный пример должен озвучивать выделенный текст или он воспроизводит весь текст на странице? Если второе, то что необходимо для того, что бы воспроизводился только тот текст, который выделен?

Pavel KorniloFF:

Здравствуйте, Андрей!
Данный скрипт озвучивает весь текстовый контент, присутствующий в DOM-элементе document.getElementById('forSpeach' ). В моём примере - это стихотворение Фета.
Вы можете создать любой блочный элемент с id=forSpeach и разместить в нём необходимый для озвучки текст (см. п.4 инструкции выше). Сейчас у Вас в блоке c этим идентификатором находится весь контент страницы. Отсюда и время отправки / приёма данных серверу Яндекса.
===
ЗЫ. Изменил код на странице. Действительно, вовсе не обязательно вешать скрипт в обработчик события загрузки страницы, когда отправка на озвучивание происходит по клику пользователя.
ЗЗЫ. Домен 4 уровня! Это круто =)
3 Андрей   CMS: Joomla ( 23.06.2018 12:19:25 )
Я не интегрирую в Joomla.
Установку скрипта я произвожу в шаблон, который установлен на Joomla. Но скрипт не срабатывает.
А вот по какой причине - понять не могу. Видимо не добавлен какой-то элемент...

Pavel KorniloFF:

Консоль чётко пишет по этому поводу:
ReferenceError: tts is not defined
Что означает, что переменная tts не определена, а обращение к ней идёт.
===
Попробуйте заменить код примера на:
onload= function() {
this.tts = new ya.speechkit.Tts(
// Настройки синтеза речи.
{
// API-ключ. Обязательно!!!
apikey: '',
//== Необязательные настройки
// Эмоциональная окраска: добрый голос.
emotion: 'good',
// Скорость речи.
speed: 1.5,
// Имя диктора.
speaker: 'jane'
});
}
2 Андрей   CMS: Joomla ( 22.06.2018 15:15:36 )
Ничего не могу понять.
Добавил скрипт API в тег head. Добавил скрипт настройки с указанием ключа + кнопку. Указал id блока, который нужно воспроизводить. Но не работает.
Какие манипуляции нужно еще выполнить, что бы синтез текста заработал?

Pavel KorniloFF:

Здравствуйте, Андрей!
Джумла - это отдельный разговор. Как Вы добавляете скрипт? Родной редактор скрипты режет. Я пользовался плагином Flexi Custom Code для добавления своих скриптов. Но, поскольку я не часто сталкиваюсь с этой CMS, возможно, в ней уже появились встроенные инструменты для этого.
В любом случае - нужно посмотреть сайт через веб-консоль, что там происходит.
1 Владислав   CMS: WP ( 23.05.2018 15:27:47 )
Добрый день,нужно сделать как у вас на странице Озвучивание текста на сайте по выделению помогите пожалуйста своих мозгов не хватает

Pavel KorniloFF:

Здравствуйте, Владислав!
А что именно из перечисленных выше инструкций вызвало затруднение? Опишите проблему подробнее, чтобы я смог помочь.
Дабавить комментарий