HTML-webbplats text-till-tal — bädda in AI-röst med ett skript
Utvecklare och team som kör anpassad HTML, statiska webbplatser eller icke-WordPress CMS-stackar kan bädda in TTS-skript en gång och leverera naturligt anpassad webbplats AI-röst med GSpeechUppspelning och syntes sker genom GSpeech Cloud Console - Inga API-nycklar krävs, ingen TTS-stack på serversidan och ingen extra belastning på webbhotell.
Den här guiden visar hur man lägga till text till tal på en HTML-webbplatsklistra in den enradiga anslutningskoden före , placera helsides-/knapp-/cirkelspelare med anpassade HTML-monteringar, mappa sedan Innehållsväljare och Render element till dina layoutklasser och ID:n.
Inbäddning på en rad — klistra in före på valfri anpassad stack eller statisk webbplats.
Molnljudgenerering — syntetisera en gång, cachelagra och spela upp över besök.
Inga API-nycklar krävs — röster och spelare från en konsol.
Selektorbaserad mappning — rikta in dig på valfri artikel-, huvud- eller anpassad layoutomslag.
Bäst för: utvecklare, statiska generatorer och anpassade CMS-teman där du kontrollerar HTML-koden och vill ha en enda inbäddning plus CSS-väljare för anpassade layouter.
Skapa en webbplats — om du inte har lagt till en webbplats än, följ skapa en webbplats.
Öppna webbplatsen — gå till din instrumentbräda och välj webbplatsen.
Kopiera HTML-koden — öppen Integrationer → Html-webbplats och kopiera anslutningskoden.
Klistra in före — infoga koden i din mall före avslutningen tagga och distribuera sedan.
Anslutningskoden laddas GSpeech på varje sida där den finns. Spelare visas bara där du placerar monteringar / anpassad HTML och bara när matchande widget är publicerad och konfigurerad.
Kartläggningsmodell
Bädda in skript, monteringar och väljarmappning för anpassad HTML
På en anpassad HTML-webbplats laddar en inbäddning motorn. Varje widget mappar sedan dina egna klasser och ID:n till en montering – så att du behåller full kontroll över layouten medan berättarröstningen finns kvar i Cloud Console:
1Anslutningskod
Laddar motorn innan Utan den gör fästen ingenting.
2Anpassad widget
Instrumentpanelskonfiguration: röst, språk, design, innehållsinställningar, URL-regler för valfri rutter eller mallar.
3Montera / Anpassad HTML
En markör i din sidas HTML (till exempel .gsp_full_player) där spelarens användargränssnitt visas.
4Innehållsmappning
Innehållsväljare = vad man ska läsa. Render element = där spelaren visas. Exkludera / Titel / URL:er förfinar matchningen.
Obegränsad widgets — separata widgetar för helsida, knapp eller cirkel för olika layouter, språk eller designer.
Obegränsat antal spelare per widget — en publicerad widget kan driva varje matchande montering som tillåts av Render Element + URL-reglerna.
Anpassade HTML-monteringar — på HTML-webbplatser ser monteringen ut så här <div class="gsp_full_player"></div>På WordPress använder samma idé kortkoder som [gspeech].
Standardvärden kontra avancerade — standardmonteringar fungerar snabbt. Unika anpassade layouter kräver exakta värden för Content Selector/Render Element.
Spelare
Lägg till spelare med anpassad HTML
Placera någon av dessa fästen där spelaren ska visas på sidan. Klicka på ett kort för att kopiera. Ställ sedan in widgeten. Render element till samma klass.
I widgeten Innehåll tabb, pekselektorer på artikeln, huvudmenyn eller anpassade omslag du äger – vilken CSS-selektor som helst som din markup exponerar.
id → # — HTML id="main" → skriva #main.
klass → . — HTML class="post-content" → skriva .post-content.
Samla bitar — Innehållsväljaren accepterar flera mål, kommaseparerade: #intro,.body,#summary.
Trimma bitar — Exkluderingslista använder samma # / . + kommatecken: #comments,.ads,.share-buttons.
Hitta värden — högerklicka → Inspektera på livesidan. Fullständig genomgång för nybörjare: HTML-värden (# / .).
CS
Innehållsväljare
definierar vilken text som läses uppAnvänd CSS-selektorer, kommaseparerade (sätt ihop innehållet i bitar). Exempel:
Artikeln, .post-innehåll, #huvud, .anpassad-layout — läs dessa element (# = id, . = klass).
artikel, avsnitt, #mitt_id, .min_klass — flera mål i ett fält (delar kombinerade till en berättelse).
förälderklass — läs den överordnade omslaget till monteringen (användbart för anpassad HTML inuti ett innehållsblock).
självklass — läs samma omslag som fästet sitter i.
Lämna tomt om du använder Innehållstext istället (fast text, inte DOM-innehåll).
RE
Render element
definierar där spelarens användargränssnitt injicerasDet måste matcha ett verkligt element på sidan.
För anpassade HTML-monteringar, sätt den till mount-klassen: .gsp_full_player, .gsp_knappspelare, eller .gsp_cirkel_spelare.
Du kan också rikta in dig på layoutbehållare som kropp, #innehåll, eller .artikel-rubrik när du inte använder ett dedikerat fäste.
Om Innehållsväljaren är korrekt men ingenting visas, är Render Element vanligtvis fel eller saknas på den sidan.
RP
Rendera position
Placerar spelaren Innan or Efter Render Element-innehållet. För en dedikerad monterings-div fungerar After/Before vanligtvis fortfarande relativt till den noden — håll monteringen tom och låt widgeten fylla den.
EX
Uteslut lista
Väljare som måste inte bli upplästa, även om de sitter i Innehållsväljaren. Samma # / . regler, kommaseparerade. Exempel: #comments,.sidebar,.ads,.no-speech.
TT
Titelväljare / Titeltext
Titelväljare — dynamisk titel från sidan (exempel: h1).
Titeltext — fast titel visas i spelaren. Lämna titelväljaren tom när du använder titeltext.
CT
Innehållstext
Valfri fast berättartext. När den används kan Innehållsväljaren förbli tom. Användbart för statiska reklamblock när DOM-innehåll inte ska driva ljud.
Tumregel för HTML-webbplatser: Innehållsväljaren pekar på den omslagsplatta du kontrollerar (till exempel article.post or #main), Render Element-punkter vid monteringen, och Exclude List hoppar över navigering, annonser och kommentarer.
Exempel
Praktiska mappningsexempel för anpassade HTML-layouter
Exempel A
Anpassad layoutartikel med helsidesspelare
Din statiska mall eller CMS-mall innehåller en artikel och en montering:
Uteslut lista - .share-buttons,.related-posts (Tillval)
Titelväljare - h1 (Tillval)
Exempel B
Montera inuti en CMS-innehållsregion — parent_class
Om monteringen finns inom en anpassad CMS-innehållsregion kan Innehållsväljaren vara relativ:
Innehållsväljare - parent_class (läser föräldern till fästet)
Render element - .gsp_full_player
Använda self_class när själva monteringsomslaget innehåller texten som ska läsas upp.
Exempel C
Statiska webbplatsmallar med widget med en knapp
Plats .gsp_button_player över många statiska mallar. Widget för enknappsspelare med renderingselement .gsp_button_player kan driva dem alla. Skapa ytterligare widgetar endast när röst, design, väljare eller URL-regler måste skilja sig åt.
Välj webbplatsen — öppna HTML-webbplatsen du anslöt till.
Lägg till ny widget — Widgetar → Lägg till ny widget → välj typ (Fullständig spelare, Knapp, Cirkel, …) → Skapa.
Konfigurera innehåll — ange innehållsväljare, renderingselement, undantagslista och titlar för din layout.
Konfigurera spelare / Design — röst, paneler, tema, bredd, marginaler.
Publicera och lyssna — ställ in Status till Publicerad, uppdatera livesidan, testa uppspelningen.
När sidtexten ändras kan Smart Audio Sync återskapa berättarröst i bakgrunden. Mappningsfält avgör fortfarande som text och var spelaren lever.
FAQ
Vanliga frågor: Inbäddning av HTML-text till tal för webbplatser
Stöder en HTML-webbplats text-till-tal och AI-röster med GSpeech?
Ja. GSpeech fungerar på alla HTML-webbplatser, statiska generatorer eller anpassade CMS där du kan klistra in ett skript innan Du får naturliga AI-röster och moderna spelare utan att bygga en TTS-pipeline på serversidan.
Hur bäddar jag in GSpeech TTS-skriptet på en anpassad webbplats?
Kopiera anslutningskoden från Integrationer → Html-webbplats. Klistra in den en gång i din delade mall innan du och driftsätt. Lägg sedan till en montering som t.ex. <div class="gsp_full_player"></div> i layouten där spelaren ska visas och sätt Render Element till den klassen.
Vad är Content Selector kontra Render Element på en anpassad HTML-webbplats?
Innehållsväljare är en CSS-väljare för den text du vill ha uppläst – till exempel #main, article.posteller en klass från ditt CMS. Render element är där spelarens användargränssnitt injiceras – vanligtvis din monteringsklass. Eftersom du kontrollerar markupen kan du mappa vilken anpassad layout som helst exakt.
Kommer GSpeech-ljud att sakta ner min HTML- eller statiska webbplats?
Nej. Syntes och cachning sker i GSpeech moln. Inbäddningen är ett lättviktigt klientskript, och spelare laddas bara där det finns monteringsmöjligheter. Din webbhotell fortsätter att servera vanlig HTML, CSS och JS medan besökare lyssnar på begäran.
Behöver jag API-nycklar för att bädda in en anpassad AI-röst för webbplatsen?
Nej. GSpeech is Inga API-nycklar krävs för HTML-webbplatser. Klistra in inbäddningen, konfigurera widgetar i Cloud Console och publicera. Röster och spelare hanteras från ett konto utan TTS-nycklar från tredje part i din kodbas.
Hjälp
Behöver du hjälp med att hitta selektorer för ett anpassat tema eller en layout för en byggare?
Kontakta GSpeech-supportenSkicka en sid-URL så hjälper vi dig att mappa innehållsväljaren/renderingselementet.
