HTML-сайт: преобразование текста в речь — встраивание голосового ИИ
HTML-интеграция
Преобразование текста в речь на HTML-сайте — встраивание голоса ИИ в один скрипт
Разработчики и команды, работающие пользовательский HTMLстатические сайты или CMS, не использующие WordPress, могут встроить скрипт TTS один раз и доставить натуральный продукт пользовательский сайт AI-голос с GSpeechВоспроизведение и синтез осуществляются через GSpeech Облачная Консоль - API-ключи не требуютсяОтсутствие серверного стека TTS и дополнительной нагрузки на хостинг.
В этом руководстве показано, как добавить озвучку на HTML-сайт: вставьте однострочный код подключения перед Разместите полностраничные/кнопочные/круговые плееры с пользовательскими HTML-элементами, затем настройте карту. Селектор содержимого и Рендеринг элемента к вашим классам макета и идентификаторам.
Вставка в одну строку — вставить перед на любом пользовательском стеке или статическом сайте.
Генерация облачного аудио — синтезировать один раз, кэшировать и воспроизводить при последующих посещениях.
API-ключи не требуются — голоса и игроки с одной консоли.
Сопоставление на основе селекторов — выбрать любой элемент в качестве объекта для статьи, основного текста или пользовательской оболочки макета.
Оптимально для: Разработчики, генераторы статических элементов и пользовательские темы для CMS, где вы контролируете HTML и хотите использовать один встраиваемый элемент плюс CSS-селекторы для создания пользовательских макетов.
Создать сайт — Если вы еще не добавили сайт, перейдите по ссылке. создать сайт.
Откройте сайт — перейдите к своему приборная панель и выберите сайт.
Скопируйте HTML-код - открыть Интеграции → HTML-сайт и скопируйте код подключения.
Вставить перед — Вставьте код в свой шаблон перед закрывающим тегом Сначала пометьте, затем разверните.
Код подключения загружается GSpeech На каждой странице, где он присутствует. Игроки отображаются только там, где вы размещаете ездовых животных / пользовательский HTML-код, и только когда соответствующий виджет опубликован и настроен.
Модель отображения
Встраивание скриптов, точек монтирования и сопоставление селекторов для пользовательского HTML-кода
На сайте с пользовательским HTML-кодом один встроенный элемент загружает движок. Затем каждый виджет сопоставляет ваши собственные классы и идентификаторы с точкой монтирования — таким образом, вы сохраняете полный контроль над макетом, в то время как озвучка остается в облачной консоли:
1Код подключения
Перед этим загружает двигатель. Без него крепления бесполезны.
2Пользовательский виджет
Настройка панели управления: голос, язык, дизайн, параметры контента, правила URL для любого маршрута или шаблона.
3Крепление / Пользовательский HTML
Маркер в HTML-коде вашей страницы (например) .gsp_full_player) где отображается пользовательский интерфейс игрока.
4Картирование контента
Селектор содержимого = что почитать. Рендеринг элемента = место, где появляется игрок. Исключить / Заголовок / URL-адреса уточняют совпадение.
Неограниченное количество виджетов — Отдельные виджеты «Полная страница», «Кнопка» или «Круг» для разных макетов, языков или дизайнов.
Неограниченное количество игроков на один виджет — Один опубликованный виджет может обеспечить работу всех соответствующих правил монтирования, разрешенных правилами Render Element + URL.
Пользовательские HTML-монтирования — на HTML-сайтах крепление выглядит так: <div class="gsp_full_player"></div>В WordPress используется тот же принцип с помощью шорткодов, например: [gspeech].
Значения по умолчанию против расширенных настроек — Стандартные настройки работают быстро. Для уникальных пользовательских макетов требуются точные значения Content Selector / Render Element.
Игроки
Добавление игроков с помощью пользовательского HTML
Разместите любой из этих элементов на том месте, где должен отображаться игрок на странице. Щелкните по карточке, чтобы скопировать её. Затем настройте виджет. Рендеринг элемента в тот же класс.
Сопоставьте пользовательские HTML-макеты с плеером.
В виджете Контент Используйте вкладку, чтобы указать селекторы на статью, основной текст или пользовательские обертки, которыми вы владеете — любой CSS-селектор, который предоставляет ваша разметка.
CS
Селектор содержимого
Определяет Какой текст озвучен?Используйте CSS-селекторы, разделённые запятыми. Примеры:
статья, .post-content, #основной, .custom-layout — прочтите эти элементы.
статья,раздел,#my_id,.my_class — несколько целей на одном поле.
родительский_класс — Прочитайте родительский контейнер объекта монтирования (полезно для пользовательского HTML-кода внутри блока контента).
self_class — Прочитайте ту же самую обложку, в которой находится крепление.
Оставьте поле пустым, если используете Текст контента вместо этого (фиксированный текст, а не содержимое DOM).
RE
Рендеринг элемента
Определяет где внедряется пользовательский интерфейс игрокаОно должно соответствовать реальному элементу на странице.
Для пользовательских HTML-монтирований установите класс монтирования: .gsp_full_player, .gsp_button_player или .gsp_circle_player.
Вы также можете выбирать контейнеры макета, например... тело, # Содержание или .article-header когда вы не используете специальное крепление.
Если параметр Content Selector указан правильно, но ничего не отображается, это обычно означает, что параметр Render Element на этой странице указан неверно или отсутствует.
RP
Позиция рендеринга
Размещает игрока Перед тем, как or После Отображение содержимого элемента. Для выделенного div-элемента монтирования параметры After/Before обычно по-прежнему работают относительно этого узла — оставьте монтирование пустым и позвольте виджету заполнить его.
EX
Исключить список
Отборщики, которые должны не Произноситься вслух, даже если они находятся внутри селектора контента. Разделены запятыми. Пример: #comments,.sidebar,.ads,.no-speech.
TT
Выбор заголовка / Текст заголовка
Выбор названия — динамический заголовок со страницы (пример: h1).
Текст заголовка — В плеере отображается фиксированный заголовок. При использовании текста заголовка оставьте поле выбора заголовка пустым.
CT
Текст контента
Дополнительный фиксированный текст для озвучивания. При использовании селектор контента может оставаться пустым. Полезно для статических рекламных блоков, когда содержимое DOM не должно управлять звуком.
Общее правило для сайтов на HTML: Селектор содержимого указывает на управляемую вами оболочку (например) article.post or #main), Render Element указывает на точку крепления, а Exclude List пропускает навигацию, рекламу и комментарии.
Примеры
Практические примеры сопоставления данных для создания пользовательских HTML-макетов.
Пример А
Статья с пользовательским макетом и полноэкранным проигрывателем.
Ваш статический шаблон или шаблон для CMS включает в себя статью и точку монтирования:
Исключить список - .share-buttons,.related-posts (опционально)
Выбор названия - h1 (опционально)
Пример Б
Смонтировать внутри области контента CMS — parent_class
Если точка монтирования находится внутри пользовательской области контента CMS, то селектор контента может быть относительным:
Селектор содержимого - parent_class (читает родительский элемент крепления)
Рендеринг элемента - .gsp_full_player
Используйте self_class когда сам контейнер mount содержит текст, который должен быть озвучен.
Пример С
Шаблоны статических сайтов с одним виджетом «Кнопка».
Место .gsp_button_player На множестве статических шаблонов. Виджет One Button Player с элементом Render. .gsp_button_player Может обеспечить их работу. Создавайте дополнительные виджеты только в том случае, если необходимо изменить голос, дизайн, селекторы или правила URL-адресов.
Виджеты
Создавайте собственные виджеты голосового управления на основе ИИ для вашего сайта.
Публикуй и слушай — Установите статус на «Опубликовано», обновите страницу в режиме реального времени и проверьте воспроизведение.
При изменении текста на странице функция Smart Audio Sync может восстанавливать озвучку в фоновом режиме. Решение по-прежнему принимается на основе полей сопоставления. , которые текст и в котором Игрок выживает.
FAQ
Часто задаваемые вопросы: Встраивание текста в HTML-сайт с функцией преобразования в речь
Поддерживает ли HTML-сайт преобразование текста в речь и озвучивание с помощью ИИ на платформе GSpeech?
Да. GSpeech Работает на любом HTML-сайте, статическом генераторе или пользовательской CMS, где можно вставить скрипт перед этим. Вы получаете естественные голоса, озвученные искусственным интеллектом, и современных исполнителей без необходимости создания серверного конвейера преобразования текста в речь.
Как встроить скрипт GSpeech TTS на собственный сайт?
Скопируйте код подключения из раздела «Интеграции» → «HTML-сайт». Вставьте его один раз в свой общий шаблон перед этим. и развернуть. Затем добавьте точку монтирования, например: <div class="gsp_full_player"></div> В том месте, где должен отображаться плеер, установите для параметра Render Element соответствующий класс.
Что такое Content Selector и Render Element на пользовательском HTML-сайте?
Селектор содержимого Это любой CSS-селектор для текста, который вы хотите озвучить — например. #main, article.postили класс из вашей CMS. Рендеринг элемента Здесь внедряется пользовательский интерфейс игрока — обычно это ваш класс ездового животного. Поскольку вы контролируете разметку, вы можете точно настроить любой пользовательский макет.
Замедлит ли использование аудио GSpeech работу моего HTML-сайта или статического сайта?
Нет. Синтез и кэширование происходят в GSpeech Облако. Встроенный контент представляет собой облегченный клиентский скрипт, и плееры загружаются только там, где есть точки подключения. Ваш хостинг продолжает предоставлять обычный HTML, CSS и JS, в то время как посетители слушают музыку по запросу.
Нужны ли мне API-ключи для встраивания пользовательского голосового сопровождения на сайт с помощью ИИ?
№ GSpeech is API-ключи не требуются Для HTML-сайтов. Вставьте встроенный контент, настройте виджеты в консоли Cloud Console и опубликуйте. Голоса и плееры управляются из одной учетной записи без использования сторонних ключей TTS в вашем коде.
Помощь
Нужна помощь в поиске селекторов для пользовательской темы или макета конструктора?
Обратитесь в службу поддержки GSpeechОтправьте URL страницы, и мы поможем сопоставить селектор контента / элемент рендеринга.
