Prevod textu na reč pre webové stránky v HTML – vložte hlas s umelou inteligenciou
Integrácia HTML
Prevod textu na reč na webovej stránke HTML – vložte hlas s umelou inteligenciou pomocou jedného skriptu
Vývojári a tímy bežiace vlastný HTML, statické stránky alebo systémy CMS, ktoré nie sú WordPress vložiť skript TTS raz a doručte prirodzene vlastný hlas AI pre webstránku s GSpeechPrehrávanie a syntéza prebiehajú cez GSpeech Cloud Console - Nie sú potrebné žiadne kľúče API, žiadny zásobník TTS na strane servera a žiadne dodatočné zaťaženie hostingu.
Táto príručka ukazuje, ako pridanie textu do reči na webovú stránku HTML: vložte jednoriadkový kód pripojenia pred , umiestnite prehrávače na celú stránku / tlačidlo / kruh s vlastnými HTML úchytmi a potom namapujte Výber obsahu a Render Element k vašim triedam a ID rozloženia.
Vloženie jedného riadku — prilepiť predtým na ľubovoľnom vlastnom zásobníku alebo statickej stránke.
Generovanie cloudového zvuku — syntetizovať raz, ukladať do vyrovnávacej pamäte a prehrávať počas viacerých návštev.
Nie sú potrebné žiadne kľúče API — hlasy a hráči z jednej konzoly.
Mapovanie založené na selektoroch — zacieliť na akýkoľvek článok, hlavný alebo vlastný obal rozloženia.
Najlepšie pre: vývojári, statické generátory a vlastné témy CMS, kde ovládate HTML a chcete jeden embed plus CSS selektory pre vlastné rozloženia.
Vytvorte webovú stránku — ak ste ešte nepridali stránku, postupujte podľa vytvorte webové stránky.
Otvoriť stránku — choď k svojmu prístrojová doska a vyberte stránku.
Skopírujte HTML kód - OTVORENÉ Integrácie → HTML webová stránka a skopírujte kód pripojenia.
Prilepiť pred — vložte kód do šablóny pred záverečný reťazec označiť a potom nasadiť.
Načíta sa kód pripojenia GSpeech na každej stránke, kde sa nachádza. Hráči sa zobrazia iba tam, kde umiestnite držiaky / vlastný HTML kód a iba vtedy, keď je zverejnený a nakonfigurovaný zodpovedajúci widget.
Mapovací model
Vložte skript, pripojenia a mapovanie selektorov pre vlastný HTML kód
Na vlastnej HTML stránke jeden embed načíta engine. Každý widget potom namapuje vaše vlastné triedy a ID na mount – takže si zachováte plnú kontrolu nad rozložením, zatiaľ čo rozprávanie zostáva v Cloud Console:
1Kód pripojenia
Predtým zaťažte motor Bez neho by hory neurobili nič.
2Vlastný widget
Konfigurácia ovládacieho panela: hlas, jazyk, dizajn, nastavenia obsahu, pravidlá URL pre ľubovoľnú trasu alebo šablónu.
3Pripojiť / Vlastný HTML
Značka v HTML vašej stránky (napríklad .gsp_full_player), kde sa zobrazí používateľské rozhranie prehrávača.
4Mapovanie obsahu
Výber obsahu = čo čítať. Render Element = kde sa hráč objaví. Vylúčiť / Názov / URL adresy spresňujú zhodu.
Neobmedzené widgety – samostatné widgety Celá stránka, Tlačidlo alebo Kruh pre rôzne rozloženia, jazyky alebo dizajny.
Neobmedzený počet hráčov na widget — jeden publikovaný widget môže napájať každé zodpovedajúce pripojenie povolené pravidlami Render Element + URL.
Vlastné HTML pripojenia — na HTML stránkach vyzerá mount takto <div class="gsp_full_player"></div>Na WordPresse sa v rovnakej myšlienke používajú krátke kódy ako napríklad [gspeech].
Predvolené verzus rozšírené nastavenia — predvolené pripojenia fungujú rýchlo. Unikátne vlastné rozloženia vyžadujú presné hodnoty pre výber obsahu / vykresľovací prvok.
Hráči
Pridajte hráčov pomocou vlastného HTML
Umiestnite ľubovoľného z týchto mountov na miesto, kde by sa mal hráč zobraziť na stránke. Kliknite na kartu, ktorú chcete skopírovať. Potom nastavte widget. Render Element do tej istej triedy.
Vo widgete obsah tabulátor, selektory ukazujú na článok, hlavný text alebo vlastné obaly, ktoré vlastníte – akýkoľvek selektor CSS, ktorý vaše označenie sprístupňuje.
id → # — HTML id="main" → napísať #main.
trieda → . — HTML class="post-content" → napísať .post-content.
Zhromaždite kúsky — Výber obsahu akceptuje niekoľko cieľov oddelených čiarkou: #intro,.body,#summary.
Orezať kusy — Zoznam vylúčení používa to isté # / . + čiarky: #comments,.ads,.share-buttons.
Nájsť hodnoty — kliknite pravým tlačidlom myši → Skontrolovať na aktívnej stránke. Úplný návod pre začiatočníkov: Hodnoty HTML (# / .).
CS
Výber obsahu
definuje aký text sa hovoríPoužívajte selektory CSS oddelené čiarkami (zostavujte obsah po častiach). Príklady:
článok, .post-obsah, #hlavný, .custom-layout — prečítajte si tieto prvky (# = id, . = trieda).
clanok,sekcia,#moje_id,.moja_trieda — viacero cieľov v jednom poli (časti spojené do jedného rozprávania).
rodičovská_trieda — prečítať rodičovský obal pripojenia (užitočné pre vlastné HTML vo vnútri bloku obsahu).
self_class – prečítajte si ten istý obal, v ktorom je držiak umiestnený.
Ak používate, nechajte prázdne Text obsahu namiesto toho (pevný text, nie obsah DOM).
RE
Render Element
definuje kde je vložené používateľské rozhranie hráčaMusí sa zhodovať so skutočným prvkom na stránke.
Pre vlastné HTML pripojenia nastavte triedu pripojenia: .gsp_full_player, .gsp_button_player, Alebo .gsp_circle_player.
Môžete tiež zacieliť na kontajnery rozloženia, ako napríklad telo, #obsah, Alebo .hlavička-article keď nepoužívate určený držiak.
Ak je Výber obsahu správny, ale nič sa nezobrazuje, prvok vykreslenia je zvyčajne nesprávny alebo na danej stránke chýba.
RP
Poloha vykreslenia
Umiestni hráča Predtým or Po obsah prvku Render. Pre vyhradený div pripojenia funguje After/Before zvyčajne stále vzhľadom na daný uzol – pripojenie nechajte prázdne a nechajte ho vyplniť widgetom.
EX
Vylúčiť zoznam
Selektory, ktoré musia nie budú vyslovené, aj keď sa nachádzajú vo Výbere obsahu. To isté # / . pravidlá, oddelené čiarkou. Príklad: #comments,.sidebar,.ads,.no-speech.
TT
Výber názvu / Text názvu
Výber titulov — dynamický názov zo stránky (príklad: h1).
Text nadpisu — opravený názov zobrazený v prehrávači. Pri použití textu názvu nechajte výber názvu prázdny.
CT
Text obsahu
Voliteľný fixný text rozprávania. Pri použití môže Selektor obsahu zostať prázdny. Užitočné pre statické propagačné bloky, keď obsah DOM nemá prehrávať zvuk.
Základné pravidlo pre HTML stránky: Selektor obsahu ukazuje na obal, ktorý ovládate (napríklad article.post or #main), Render Element ukazuje na miesto pripojenia a Exclude List preskočí navigáciu, reklamy a komentáre.
Príklady
Praktické príklady mapovania pre vlastné rozloženia HTML
Príklad A
Článok s vlastným rozložením a prehrávačom na celú stránku
Vaša statická alebo CMS šablóna obsahuje článok a pripojovací bod:
Vylúčiť zoznam - .share-buttons,.related-posts (Voliteľne)
Výber titulov - h1 (Voliteľne)
Príklad B
Pripojiť v rámci oblasti obsahu CMS — parent_class
Ak sa pripojenie nachádza vo vnútri vlastnej oblasti obsahu CMS, Selektor obsahu môže byť relatívny:
Výber obsahu - parent_class (číta rodičovský názov mountu)
Render Element - .gsp_full_player
Použitie self_class keď samotný obal pripojenia obsahuje text, ktorý má byť prečítaný.
Príklad C
Šablóny statických stránok s jedným widgetom Button
Miesto .gsp_button_player v mnohých statických šablónach. Widget One Button Player s prvkom Render .gsp_button_player môže ich všetky poháňať. Vytvárajte ďalšie widgety iba vtedy, keď sa hlas, dizajn, selektory alebo pravidlá URL musia líšiť.
Miniaplikácie
Vytvorte si vlastné hlasové widgety s umelou inteligenciou pre webové stránky
Publikovať a počúvať — nastavte Stav na Publikované, obnovte aktívnu stránku, otestujte prehrávanie.
Keď sa text na stránke zmení, funkcia Smart Audio Sync dokáže na pozadí regenerovať rozprávanie. Mapovacie polia stále rozhodujú ktorý text a kde hráč žije.
Často kladené otázky
Často kladené otázky: Vloženie textu na reč na webovej stránke HTML
Podporuje webová stránka HTML prevod textu na reč a hlasy umelej inteligencie pomocou GSpeech?
Áno. GSpeech funguje na akejkoľvek HTML stránke, statickom generátore alebo vlastnom CMS, kde môžete pred vložením skriptu Získate prirodzené hlasy umelej inteligencie a moderných prehrávačov bez nutnosti budovania TTS kanála na strane servera.
Ako vložím skript GSpeech TTS na vlastnú stránku?
Skopírujte kód pripojenia z Integrácie → Webová stránka vo formáte HTML. Predtým ho raz vložte do zdieľanej šablóny. a nasadiť. Potom pridajte pripojenie, napríklad <div class="gsp_full_player"></div> v rozložení, kde by sa mal hráč zobraziť, a nastavte Render Element na túto triedu.
Čo je to selektor obsahu vs. element vykreslenia na vlastnej HTML stránke?
Výber obsahu je ľubovoľný CSS selektor pre text, ktorý chcete prečítať – napríklad #main, article.postalebo kurz z vášho CMS. Render Element je miesto, kde sa vkladá používateľské rozhranie hráča – zvyčajne vaša trieda mounta. Keďže vy ovládate značky, môžete presne namapovať ľubovoľné vlastné rozloženie.
Spomalí zvuk GSpeech moju HTML alebo statickú stránku?
Nie. Syntéza a ukladanie do vyrovnávacej pamäte prebiehajú v GSpeech cloud. Embed je ľahký klientsky skript a prehrávače sa načítavajú iba tam, kde existujú pripojenia. Váš hosting naďalej poskytuje bežné HTML, CSS a JS, zatiaľ čo návštevníci počúvajú na požiadanie.
Potrebujem kľúče API na vloženie vlastného hlasu AI pre webovú stránku?
Nie. GSpeech is Nie sú potrebné žiadne kľúče API pre HTML stránky. Vložte vložený súbor, nakonfigurujte widgety v Cloud Console a publikujte. Hlasy a prehrávače sa spravujú z jedného účtu bez kľúčov pre tvorbu textu tretích strán vo vašej kódovej základni.
Pomoc
Potrebujete pomôcť s nájdením selektorov pre vlastnú tému alebo rozloženie editora?
Kontaktujte podporu GSpeechPošlite URL adresu stránky a my vám pomôžeme namapovať prvok výberu obsahu / vykreslenia.
