KorniloFF-ScriptS ©

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Комментариев пока нет.

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