HTML webwerf teks na spraak — integreer KI-stem met een skrip
Ontwikkelaars en spanne wat hardloop persoonlike HTML, statiese webwerwe, of nie-WordPress CMS-stapels kan inbed TTS-skrip een keer en lewer natuurlik persoonlike webwerf KI-stem met GSpeechTerugspeel en sintese loop deur die GSpeech Wolkkonsole - Geen API-sleutels benodig nie, geen bedienerkantse TTS-stapel, en geen ekstra gasheerlas nie.
Hierdie gids wys hoe om voeg teks-na-spraak by 'n HTML-webwerf: plak die eenreël-verbindingskode voor , plaas Volbladsy / Knoppie / Sirkel spelers met Pasgemaakte HTML-monterings, en karteer dan Inhoudkieser en Gee element aan jou uitlegklasse en ID's.
Eenlyn-inbedding — plak voor op enige persoonlike stapel of statiese webwerf.
Wolk-klankgenerering — sintetiseer een keer, kasgee en herspeel oor besoeke.
Geen API-sleutels benodig nie — stemme en spelers vanaf een konsole.
Selektor-gebaseerde kartering — teiken enige artikel-, hoof- of persoonlike uitlegomslag.
Beste vir: ontwikkelaars, statiese kragopwekkers en persoonlike CMS-temas waar jy die HTML beheer en 'n enkele inbedding plus CSS-selektors vir persoonlike uitlegte wil hê.
Skep 'n webwerf — as jy nog nie 'n webwerf bygevoeg het nie, volg skep 'n webwerf.
Maak die webwerf oop — gaan na jou dashboard en kies die webwerf.
Kopieer die HTML-kode — oop Integrasies → Html-webwerf en kopieer die verbindingskode.
Plak voor — voeg die kode in jou sjabloon in voor die sluiting etiket, en ontplooi dan.
Die verbindingskode laai GSpeech op elke bladsy waar dit teenwoordig is. Spelers verskyn slegs waar jy monterings / persoonlike HTML plaas en slegs wanneer die ooreenstemmende widget gepubliseer en gekonfigureer is.
Karteringsmodel
Inbed skripte, monterings en selektorkartering vir persoonlike HTML
Op 'n persoonlike HTML-webwerf laai een inbedding die enjin. Elke widget karteer dan jou eie klasse en ID's na 'n montering – sodat jy volle beheer oor die uitleg behou terwyl die vertelling in die Cloud Console bly:
1Verbindingskode
Laai die enjin voor Daarsonder doen rydiere niks.
2Pasgemaakte widget
Dashboard-konfigurasie: stem, taal, ontwerp, inhoudinstellings, URL-reëls vir enige roete of sjabloon.
3Monteer / Pasgemaakte HTML
'n Merker in jou bladsy se HTML (byvoorbeeld .gsp_full_player) waar die speler se gebruikerskoppelvlak verskyn.
4Inhoudskartering
Inhoudkieser = wat om te lees. Gee element = waar die speler verskyn. Uitsluit / Titel / URL'e verfyn die ooreenkoms.
Onbeperkte widgets — aparte Volblad-, Knoppie- of Sirkel-widgets vir verskillende uitlegte, tale of ontwerpe.
Onbeperkte spelers per widget — een gepubliseerde widget kan elke ooreenstemmende montering wat deur Render Element + URL-reëls toegelaat word, aandryf.
Pasgemaakte HTML-monterings — op HTML-webwerwe lyk die montering so <div class="gsp_full_player"></div>Op WordPress gebruik dieselfde idee kortkodes soos [gspeech].
Plaas enige van hierdie monterings waar die speler op die bladsy moet verskyn. Klik op 'n kaart om te kopieer. Stel dan die widget. Gee element na dieselfde klas.
artikel,afdeling,#my_id,.my_klas — verskeie teikens in een veld (stukke gekombineer in een vertelling).
ouerklas — lees die ouer-omslag van die montering (nuttig vir persoonlike HTML binne 'n inhoudsblok).
self_klas — lees dieselfde omslag waarin die monteerstuk sit.
Los leeg as jy dit gebruik Inhoud teks in plaas daarvan (vaste teks, nie DOM-inhoud nie).
RE
Gee element
Definieer waar die speler se gebruikerskoppelvlak ingespuit wordDit moet ooreenstem met 'n werklike element op die bladsy.
Vir Pasgemaakte HTML-monterings, stel dit na die monteringsklas: .gsp_full_player, .gsp_knoppie_speler, of .gsp_sirkel_speler.
Jy kan ook uitleghouers soos teiken liggaam, #inhoud, of .artikel-opskrif wanneer jy nie 'n toegewyde montering gebruik nie.
As die Inhoudselektor korrek is, maar niks verskyn nie, is die Render-element gewoonlik verkeerd of ontbreek op daardie bladsy.
RP
Gee posisie
Plaas die speler Voordat or Na die Render Element-inhoud. Vir 'n toegewyde monterings-div werk After/Before gewoonlik steeds relatief tot daardie nodus — hou die montering leeg en laat die widget dit vul.
EX
Sluit lys uit
Keurders wat moet nie gepraat word, selfs al sit hulle binne Inhoudselektor. Dieselfde # / . reëls, komma-geskei. Voorbeeld: #comments,.sidebar,.ads,.no-speech.
TT
Titelkieser / Titelteks
Titelkieser — dinamiese titel van die bladsy (voorbeeld: h1).
Titel Teks — vaste titel wat in die speler gewys word. Los Titelkieser leeg wanneer Titelteks gebruik word.
CT
Inhoud teks
Opsionele vaste vertellingsteks. Wanneer dit gebruik word, kan Inhoudselektor leeg bly. Nuttig vir statiese promosieblokke wanneer DOM-inhoud nie klank moet aandryf nie.
Duimreël vir HTML-webwerwe: Inhoudselektor wys na die omhulsel wat jy beheer (byvoorbeeld article.post or #main), Lewer elementpunte by die montering, en Uitsluitlys slaan navigasie, advertensies en kommentaar oor.
voorbeelde
Praktiese karteringsvoorbeelde vir persoonlike HTML-uitlegte
Voorbeeld A
Pasgemaakte uitlegartikel met Volbladsyspeler
Jou statiese of CMS-sjabloon sluit 'n artikel en 'n montering in:
Sluit lys uit - .share-buttons,.related-posts (Opsioneel)
Titelkieser - h1 (Opsioneel)
Voorbeeld B
Monteer binne 'n CMS-inhoudstreek — ouerklas
As die montering binne 'n persoonlike CMS-inhoudsgebied sit, kan Inhoudselektor relatief wees:
Inhoudkieser - parent_class (lees die ouer van die berg)
Gee element - .gsp_full_player
Gebruik self_class wanneer die monteringsomslag self die teks bevat wat vertel moet word.
Voorbeeld C
Statiese webwerf-sjablone met een knoppie-widget
Plek .gsp_button_player oor baie statiese sjablone. Eenknoppie-speler-widget met Render-element .gsp_button_player kan almal aandryf. Skep slegs bykomende widgets wanneer stem, ontwerp, selekteerders of URL-reëls moet verskil.
Publiseer en luister — stel Status op Gepubliseer, verfris die regstreekse bladsy, toets terugspeel.
Wanneer bladsyteks verander, kan Smart Audio Sync vertelling in die agtergrond regenereer. Karteringsvelde bepaal steeds wat teks en waar die speler leef.
FAQ
Gereelde vrae: HTML webwerf teks-na-spraak inbedding
Ondersteun 'n HTML-webwerf teks-na-spraak en KI-stemme met GSpeech?
Ja. GSpeech werk op enige HTML-webwerf, statiese generator of persoonlike CMS waar jy 'n skrip kan plak voor Jy kry natuurlike KI-stemme en moderne spelers sonder om 'n bedienerkantse TTS-pyplyn te bou.
Hoe kan ek die GSpeech TTS-skrip op 'n persoonlike webwerf insluit?
Kopieer die verbindingskode vanaf Integrasies → Html-webwerf. Plak dit een keer in jou gedeelde sjabloon voordat jy dit doen. en ontplooi. Voeg dan 'n montering by soos <div class="gsp_full_player"></div> in die uitleg waar die speler moet verskyn en stel Render Element op daardie klas.
Wat is Content Selector teenoor Render Element op 'n persoonlike HTML-webwerf?
Inhoudkieser is enige CSS-selektor vir die teks wat jy wil hê dit moet praat — byvoorbeeld #main, article.post, of 'n klas vanaf jou CMS. Gee element is waar die speler se gebruikerskoppelvlak ingespuit word — gewoonlik jou monteringsklas. Omdat jy die opmaak beheer, kan jy enige persoonlike uitleg presies karteer.
Sal GSpeech-klank my HTML- of statiese webwerf vertraag?
Nee. Sintese en kasgeheue vind plaas in die GSpeech wolk. Die inbedding is 'n liggewig kliëntskrip, en spelers laai slegs waar monteerbare elemente bestaan. Jou gasheerdiens gaan voort om normale HTML, CSS en JS te bedien terwyl besoekers op aanvraag luister.
Het ek API-sleutels nodig om 'n persoonlike webwerf-KI-stem in te sluit?
Aantal GSpeech is Geen API-sleutels benodig nie vir HTML-webwerwe. Plak die inbedding, konfigureer widgets in die Wolkkonsole en publiseer. Stemme en spelers word vanaf een rekening bestuur sonder derdeparty-TTS-sleutels in jou kodebasis.
help
Het jy hulp nodig om selektors vir 'n persoonlike tema of boueruitleg te vind?
Kontak GSpeech-ondersteuningStuur 'n bladsy-URL en ons sal help om die Inhoudselektor / Lewerelement te karteer.
