Пераўтварэнне тэксту ў маўленне на вэб-сайце ў фармаце HTML — убудаванне голасу са штучным інтэлектам
Інтэграцыя HTML
Пераўтварэнне тэксту ў маўленне на вэб-сайце ў фармаце HTML — убудуйце голас штучнага інтэлекту з дапамогай аднаго скрыпта
Распрацоўшчыкі і каманды, якія працуюць карыстальніцкі HTML, статычныя сайты або стэкі CMS, якія не належаць WordPress, могуць убудаваць скрыпт TTS адзін раз і дастаўляць натуральным чынам голас штучнага інтэлекту для карыстальніцкага сайта з GSpeechПрайграванне і сінтэз выконваюцца праз GSpeech Воблака кансолі - Ключы API не патрабуюцца, без сервернага стэка TTS і без дадатковай нагрузкі на хостынг.
У гэтым кіраўніцтве паказана, як даданне тэксту ў маўленне на вэб-сайт HTML: устаўце аднарадковы код падключэння перад , размясціце паўнастаронкавыя / кнопачныя / круглыя прайгравальнікі з дапамогай мацаванняў карыстальніцкага HTML, а затым адлюструйце Выбар змесціва і Элемент візуалізацыі да вашых класаў і ідэнтыфікатараў макета.
Убудаванне ў адзін радок — уставіць перад на любым карыстальніцкім стэку або статычным сайце.
Генерацыя воблачнага аўдыё — сінтэзаваць адзін раз, кешаваць і прайграваць падчас наведванняў.
Ключы API не патрабуюцца — галасы і гульцы з адной кансолі.
Мапаграфаванне на аснове селектараў — мэтавая аўдыторыя для любога артыкула, асноўнага элемента або карыстальніцкай макета-абгорткі.
Лепш за ўсё падыходзіць для: распрацоўшчыкі, генератары статычных элементаў і карыстальніцкія тэмы CMS, дзе вы кіруеце HTML і хочаце мець адзін убудаваны элемент плюс селектары CSS для карыстальніцкіх макетаў.
Скапіюйце HTML-код — адкрыты Інтэграцыі → HTML-сайт і скапіюйце код падключэння.
Уставіць перад — устаўце код у шаблон перад закрыццём пазначыць, а затым разгарнуць.
Код падключэння загружаецца GSpeech на кожнай старонцы, дзе ён прысутнічае. Гульцы з'яўляюцца толькі там, дзе вы размяшчаеце мацаванне / карыстальніцкі HTML і толькі тады, калі адпаведны віджэт апублікаваны і настроены.
Мадэль адлюстравання
Убудаваць скрыпт, мантаванні і адлюстраванне селектараў для карыстальніцкага HTML
На сайце з уласным HTML адзін убудаваны элемент загружае рухавік. Затым кожны віджэт прывязвае вашы ўласныя класы і ідэнтыфікатары да мацавання — такім чынам вы захоўваеце поўны кантроль над макетам, а агучванне застаецца ў кансолі Cloud:
1Код злучэння
Загрузіце рухавік загадзя Без яго мацаванне нічога не робіць.
2Карыстальніцкі віджэт
Канфігурацыя панэлі кіравання: голас, мова, дызайн, налады кантэнту, правілы URL для любога маршруту або шаблону.
3Мантаваць / Карыстальніцкі HTML
Маркер у HTML вашай старонкі (напрыклад .gsp_full_player), дзе з'яўляецца інтэрфейс гульца.
4Картаграфаванне кантэнту
Выбар змесціва = што чытаць. Элемент візуалізацыі = дзе з'яўляецца гулец. Выключыць / Назва / URL-адрасы ўдакладняюць супадзенне.
Неабмежаваная колькасць віджэтаў — асобныя віджэты «Поўная старонка», «Кнопка» або «Круг» для розных макетаў, моў або дызайнаў.
Неабмежаваная колькасць гульцоў на віджэт — адзін апублікаваны віджэт можа падтрымліваць усе адпаведныя мантажы, дазволеныя правіламі Render Element + URL.
Карыстальніцкія HTML-мантажы — на HTML-сайтах мацаванне выглядае наступным чынам <div class="gsp_full_player"></div>На WordPress тая ж ідэя выкарыстоўвае шорткоды, такія як [gspeech].
Налады па змаўчанні супраць пашыраных — мантаванні па змаўчанні працуюць хутка. Унікальныя карыстальніцкія макеты патрабуюць дакладных значэнняў селектара кантэнту / элемента рэндэрынгу.
Гульцы
Дадайце гульцоў з дапамогай карыстальніцкага HTML
Размясціце любога з гэтых маунтаў туды, дзе павінен з'явіцца гулец на старонцы. Націсніце на карту, каб скапіяваць яе. Затым усталюйце віджэт. Элемент візуалізацыі да таго ж класа.
Прывязаць карыстальніцкія макеты HTML да прайгравальніка
У віджэце змест табуляцыі, селектары ўказальнікаў на артыкул, асноўны раздзел або ўласныя абгорткі, якія вы маеце — любы селектар CSS, які адкрывае ваша разметка.
ідэнтыфікатар → # — HTML id="main" → пісаць #main.
клас → . — HTML class="post-content" → пісаць .post-content.
Збярыце часткі — Селектар змесціва прымае некалькі мэтавых значэнняў, падзеленых коскамі: #intro,.body,#summary.
Абрэзаць кавалачкі — Спіс выключэнняў выкарыстоўвае тое ж самае # / . + коскі: #comments,.ads,.share-buttons.
Знайсці значэнні — пстрыкніце правай кнопкай мышы → Праверыць на старонцы, якая працуе. Поўнае кіраўніцтва для пачаткоўцаў: Значэнні HTML (# / .).
CS
Выбар змесціва
вызначае які тэкст агучваеццаВыкарыстоўвайце селектары CSS, падзеленыя коскамі (збірайце кантэнт па частках). Прыклады:
артыкул, .post-змест, #галоўны, .custom-layout — прачытайце гэтыя элементы (# = ідэнтыфікатар, . = клас).
артыкул,раздзел,#мой_ідэнтыфікатар,.мой_клас — некалькі мішэняў у адным полі (часткі, аб'яднаныя ў адно апавяданне).
бацькоўскі_клас — прачытаць бацькоўскую абгортку мантавання (карысна для карыстальніцкага HTML унутры блока кантэнту).
сам_клас — гаворыцца на той жа абгортцы, у якой знаходзіцца мацаванне.
Пакіньце пустым, калі выкарыстоўваеце Змест Тэкст замест гэтага (фіксаваны тэкст, а не змесціва DOM).
RE
Элемент візуалізацыі
вызначае куды ўводзіцца інтэрфейс гульцаЁн павінен адпавядаць рэальнаму элементу на старонцы.
Для карыстальніцкіх HTML-мантаванняў усталюйце клас мантавання: .gsp_full_player, .gsp_button_playerабо .gsp_circle_player.
Вы таксама можаце арыентавацца на кантэйнеры макета, такія як цела, # зместабо .article-header калі вы не выкарыстоўваеце спецыяльнае мацаванне.
Калі селектар змесціва правільны, але нічога не адлюстроўваецца, элемент рэндэрынгу звычайна няправільны або адсутнічае на гэтай старонцы.
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 (Апцыянальна)
Прыклад B.
Мантаваць унутры вобласці змесціва CMS — parent_class
Калі мацаванне знаходзіцца ўнутры карыстальніцкага рэгіёна кантэнту CMS, селектар кантэнту можа быць адносным:
Выбар змесціва - parent_class (чытае бацькоўскі элемент мацавання)
Элемент візуалізацыі - .gsp_full_player
Выкарыстоўваць self_class калі сама абгортка мантавання змяшчае тэкст, які павінен быць агучаны.
Прыклад С
Статычныя шаблоны сайтаў з адным віджэтам Button
Месца .gsp_button_player у многіх статычных шаблонах. Віджэт One Button Player з элементам рэндэрынгу .gsp_button_player можа забяспечыць працу ўсіх з іх. Стварайце дадатковыя віджэты толькі тады, калі голас, дызайн, селектары або правілы URL-адрасоў павінны адрознівацца.
фішкі
Стварэнне галасавых віджэтаў са штучным інтэлектам для ўласных сайтаў
Апублікаваць і слухаць — усталюйце статус на «Апублікавана», абнавіце старонку, праверце прайграванне.
Калі тэкст старонкі змяняецца, Smart Audio Sync можа перабудаваць агучванне ў фонавым рэжыме. Палі адлюстравання ўсё яшчэ вырашаюць які тэкст і дзе гулец жыве.
Часта задаваныя пытанні
Часта задаваныя пытанні: убудаванне тэксту ў маўленне на вэб-сайце ў HTML
Ці падтрымлівае вэб-сайт HTML пераўтварэнне тэксту ў маўленне і галасы штучнага інтэлекту з дапамогай GSpeech?
Так. GSpeech працуе на любым HTML-сайце, статычным генератары або карыстальніцкай CMS, дзе вы можаце ўставіць скрыпт перад Вы атрымліваеце натуральныя галасы штучнага інтэлекту і сучасных прайгравальнікаў без неабходнасці ствараць канвеер TTS на баку сервера.
Як убудаваць скрыпт GSpeech TTS на карыстальніцкі сайт?
Скапіруйце код падключэння з раздзела «Інтэграцыі» → «Вэб-сайт у фармаце HTML». Устаўце яго адзін раз у агульны шаблон перад і разгарнуць. Затым дадайце мантаванне, напрыклад <div class="gsp_full_player"></div> у макеце, дзе павінен з'явіцца гулец, і ўсталюйце для элемента рэндэру гэты клас.
Што такое селектар кантэнту супраць элемента рэндэрынгу на сайце з уласным HTML?
Выбар змесціва любы CSS-селектар для тэксту, які вы хочаце агучваць — напрыклад #main, article.postабо клас з вашай сістэмы кіравання кантэнтам. Элемент візуалізацыі тут уводзіцца інтэрфейс гульца — звычайна ваш клас мацавання. Паколькі вы кіруеце разметкай, вы можаце дакладна адлюстраваць любую ўласную раскладку.
Ці запаволіць аўдыё GSpeech мой HTML або статычны сайт?
Не. Сінтэз і кэшаванне адбываюцца ў GSpeech воблака. Убудаванне — гэта лёгкі кліенцкі скрыпт, і прайгравальнікі загружаюцца толькі там, дзе ёсць мантаванні. Ваш хостынг працягвае абслугоўваць звычайны HTML, CSS і JS, у той час як наведвальнікі слухаюць па запыце.
Ці патрэбныя мне ключы API для ўбудавання голасу штучнага інтэлекту на ўласным сайце?
Не. GSpeech is Ключы API не патрабуюцца для сайтаў HTML. Устаўце ўбудаваны код, наладзьце віджэты ў Cloud Console і апублікуйце. Галасы і прайгравальнікі кіруюцца з аднаго ўліковага запісу без старонніх ключоў TTS у вашай кодавай базе.
дапамогу
Патрэбна дапамога ў пошуку селектараў для карыстальніцкай тэмы або макета канструктара?
Звярніцеся ў службу падтрымкі GSpeechДашліце URL старонкі, і мы дапаможам адлюстраваць селектар кантэнту / элемент рэндэрынгу.
