G

HTML-verkkosivuston teksti puheeksi — Upota tekoälyääni

HTML-verkkosivuston tekstistä puheeksi — upota tekoälyääni yhdellä skriptillä

Kehittäjät ja tiimit käynnissä mukautettu HTML, staattiset sivustot tai muut kuin WordPress-sisällönhallintajärjestelmät voivat upota TTS-skripti kerran ja toimita luonnollinen mukautettu sivuston tekoälyääni GSpeechToisto ja synteesi tapahtuvat laitteen GSpeech Cloud Console - Ei vaadi API-avaimia, ei palvelinpuolen TTS-pinoa eikä ylimääräistä hosting-kuormitusta.

Tämä opas näyttää, miten lisää tekstiä puheeksi HTML-verkkosivustolle: liitä yksirivinen yhteyskoodi ennen , aseta koko sivun / painikkeen / ympyrän pelaajat mukautetuilla HTML-kiinnikkeillä ja sitten kartoita Sisällön valitsin ja Renderöintielementti asetteluluokkiin ja -tunnuksiin.

  • Yhden rivin upotus — liimaa ennen millä tahansa mukautetulla pinolla tai staattisella sivustolla.
  • Pilviäänen generointi — syntetisoi kerran, tallenna välimuistiin ja toista eri käyntien aikana.
  • Ei vaadi API-avaimia — äänet ja pelaajat yhdestä konsolista.
  • Valitsinpohjainen kartoitus — kohdista mihin tahansa artikkeliin, pääsisältöön tai mukautettuun asettelun kääreeseen.

Paras: kehittäjille, staattisille generaattoreille ja mukautetuille CMS-teemoille, joissa hallitset HTML:ää ja haluat yhden upotuksen sekä CSS-valitsimet mukautettuja asetteluja varten.

Verkkosivuston TTS-yleiskatsaus Live-demoja Open Cloud Console

kytkeä GSpeech HTML-verkkosivustolle

Kuinka muodostaa yhteyden GSpeech HTML-muotoon

  • Kirjaudu sisään - kirjaudu GSpeech-tilillesi (tarvitsetko sellaisen? luo ilmainen tili).
  • Luo verkkosivusto — jos et ole vielä lisännyt sivustoa, seuraa luoda verkkosivuston.
  • Avaa sivusto — mene luoksesi kojelauta ja valitse sivusto.
  • Kopioi HTML-koodi — avoin Integraatiot → HTML-verkkosivusto ja kopioi yhteyskoodi.
  • Liitä ennen — lisää koodi mallipohjaasi ennen sulkemista tunniste ja ota sitten käyttöön.

Yhteyskoodi latautuu GSpeech jokaisella sivulla, jolla se on läsnä. Soittimet näkyvät vain, mihin sijoitat kiinnityskohtia / mukautettua HTML:ää ja vain silloin, kun vastaava widget on julkaistu ja määritetty.

Upota skripti, liitokset ja valitsinmääritykset mukautetulle HTML:lle

Mukautetulla HTML-sivustolla yksi upotus lataa moottorin. Jokainen widget yhdistää sitten omat luokkasi ja tunnuksesi liitoskohtaan – joten säilytät täyden hallinnan asettelusta, kun taas kerronta pysyy Cloud Consolessa:

1 Yhteyskoodi

Kuormittaa moottoria ennen Ilman sitä kiinnikkeet eivät tee mitään.

2 Muokattu widget

Kojelaudan asetukset: ääni, kieli, ulkoasu, sisältöasetukset, URL-säännöt mille tahansa reitille tai mallille.

3 Asenna / Mukautettu HTML

Sivusi HTML-koodissa oleva merkki (esimerkiksi .gsp_full_player), jossa soittimen käyttöliittymä näkyy.

4 Sisällön kartoitus

Sisällön valitsin = mitä lukea. Renderöintielementti = missä pelaaja esiintyy. Sulje pois / Otsikko / URL-osoitteet tarkentavat osumaa.

  • Rajoittamaton määrä widgetejä — erilliset koko sivun, painikkeen tai ympyrän widgetit eri asetteluille, kielille tai malleille.
  • Rajoittamaton määrä pelaajia widgetiä kohden — yksi julkaistu widget voi pyörittää kaikkia Render Element + URL -sääntöjen sallimia vastaavia kiinnityksiä.
  • Mukautetut HTML-kiinnitykset — HTML-sivustoilla mount näyttää tältä <div class="gsp_full_player"></div>WordPressissä sama idea käyttää lyhyitä koodeja, kuten [gspeech].
  • Oletusasetukset vs. lisäasetukset — Oletusasennukset toimivat nopeasti. Yksilölliset mukautetut asettelut vaativat tarkat sisällönvalitsimen / renderöintielementin arvot.

Lisää pelaajia mukautetulla HTML:llä

Aseta mikä tahansa näistä kiinnikkeistä kohtaan, johon haluat pelaajan näkyvän sivulla. Kopioi kortti napsauttamalla sitä. Aseta sitten widget. Renderöintielementti samaan luokkaan.

  • Koko sivun soitin
    <div class="gsp_full_player"></div>
  • Painikesoitin
    <div class="gsp_button_player"></div>
  • Circle Player
    <div class="gsp_circle_player"></div>

Täydelliset pelaajadokumentit Button Playerin dokumentit Circle Playerin dokumentit

Yhdistä mukautetut HTML-asettelut soittimeen

Widgetissä Sisältö välilehti, osoita valitsimia omistamiesi artikkelien, päätekstien tai mukautettujen kääreiden kohdalle — mihin tahansa CSS-valitsimeen, jonka merkinnät näyttävät.

Sisällön valitsin

määrittelee mitä tekstiä puhutaanKäytä CSS-valitsimia pilkulla erotettuna. Esimerkkejä:

  • artikkeli, .post-content, #pääasiallinen, .mukautettu asettelu – lue nuo elementit.
  • artikkeli,osio,#oma_tunnus,.oma_luokka — useita kohteita yhdellä kentällä.
  • vanhempi_luokka — lue mountin pääkääre (hyödyllinen mukautetulle HTML:lle sisältölohkon sisällä).
  • itseluokka — lue sama kääre, jossa teline on.
  • Jätä tyhjäksi, jos käytät Sisältöteksti sen sijaan (kiinteää tekstiä, ei DOM-sisältöä).

Renderöintielementti

määrittelee mihin pelaajan käyttöliittymä ruiskutetaanSen on vastattava sivulla olevaa todellista elementtiä.

  • Mukautettuja HTML-liitäntöjä varten aseta se liitosluokkaan: .gsp_full_player, .gsp_painike_soitintai .gsp_ympyräpelaaja.
  • Voit myös kohdistaa asettelukontteja, kuten elin, #contenttai .article-header kun et käytä erillistä telinettä.
  • Jos sisällönvalitsin on oikein, mutta mitään ei näy, renderöintielementti on yleensä väärin tai puuttuu sivulta.

Renderöinnin sijainti

Pelaajan paikat Ennen or Jälkeen Renderöintielementin sisältö. Omille mount-div-osioille After/Before-osiot toimivat yleensä edelleen suhteessa kyseiseen solmuun — pidä mount-osio tyhjänä ja anna widgetin täyttää se.

Poissulje luettelo

Valitsimet, joiden on oltava emme voidaan puhua, vaikka ne olisivatkin sisällönvalitsimen sisällä. Pilkuilla erotettuna. Esimerkki: #comments,.sidebar,.ads,.no-speech.

Otsikon valitsin / Otsikon teksti

  • Otsikon valitsin — dynaaminen otsikko sivulta (esimerkki: h1).
  • Otsikon teksti — soittimessa näkyvä otsikko on kiinteä. Jätä otsikon valitsin tyhjäksi, kun käytät otsikkotekstiä.

Sisältöteksti

Valinnainen kiinteä selostusteksti. Sisällönvalitsin voi pysyä tyhjänä, kun sitä käytetään. Hyödyllinen staattisille mainosblokeille, kun DOM-sisällön ei pitäisi ohjata ääntä.

HTML-sivustojen nyrkkisääntö: Sisällönvalitsin osoittaa hallitsemaasi kääreeseen (esimerkiksi article.post or #main), Renderöintielementti osoittaa kiinnitykseen ja Poissulkemisluettelo ohittaa navigoinnin, mainokset ja kommentit.

Käytännön esimerkkejä mukautetuista HTML-asetteluista

Mukautettu asetteluartikkeli koko sivun soittimella

Staattinen tai CMS-mallipohjasi sisältää artikkelin ja mountin:

  • Sivun merkintä
    <article class="post custom-layout">...</article> <div class="gsp_full_player"></div>
  • Sisällön valitsin - article.post.custom-layout
  • Renderöintielementti - .gsp_full_player
  • Poissulje luettelo - .share-buttons,.related-posts (Valinnainen)
  • Otsikon valitsin - h1 (Valinnainen)

Liitä CMS-sisältöalueen sisälle — parent_class

Jos mount-tiedosto sijaitsee mukautetun CMS-sisältöalueen sisällä, sisällönvalitsin voi olla suhteellinen:

  • Sisällön valitsin - parent_class (lukee vuoren vanhemman)
  • Renderöintielementti - .gsp_full_player

Käyttää self_class kun itse kiinnityskääre sisältää tekstin, joka tulisi lukea.

Staattiset sivustomallit yhdellä painikkeella varustetulla widgetillä

Paikka .gsp_button_player monissa staattisissa malleissa. Yhden painikkeen soitinwidget renderöintielementillä .gsp_button_player voi käyttää niitä kaikkia. Luo lisäwidgettejä vain, kun äänen, ulkoasun, valitsimien tai URL-sääntöjen on oltava erilaiset.

Luo mukautettuja sivuston tekoälyäänipidgetejä

  • Avaa kojelauta — mene luoksesi GSpeech-kojelauta.
  • Valitse verkkosivusto — avaa yhdistämäsi HTML-sivusto.
  • Lisää uusi widget — Widgetit → Lisää uusi widget → valitse tyyppi (Täysi soitin, Painike, Ympyrä, …) → Luo.
  • Sisällön määrittäminen — aseta sisällönvalitsin, renderöintielementti, poissulkemisluettelo ja otsikot asettelullesi.
  • Soittimen konfigurointi / Suunnittelu — ääni, paneelit, teema, leveys, marginaalit.
  • Julkaise ja kuuntele — aseta tilaksi Julkaistu, päivitä live-sivu, testaa toistoa.

Kun sivun teksti muuttuu, Smart Audio Sync voi luoda kertojankerronnan uudelleen taustalla. Kenttien yhdistäminen ratkaisee edelleen joka teksti ja jossa pelaaja elää.

Usein kysytyt kysymykset: HTML-verkkosivuston tekstin puheeksi upottaminen

  • Tukeeko HTML-verkkosivusto tekstistä puheeksi -toimintoa ja tekoälyääniä GSpeechin avulla?

    Kyllä. GSpeech toimii millä tahansa HTML-sivustolla, staattisella generaattorilla tai mukautetulla sisällönhallintajärjestelmällä, johon voit liittää komentosarjan ennen Saat luonnollisia tekoälyääniä ja moderneja pelaajia ilman palvelinpuolen TTS-putken rakentamista.
  • Miten upotan GSpeech TTS -skriptin mukautetulle sivustolle?

    Kopioi yhteyskoodi kohdasta Integraatiot → HTML-verkkosivusto. Liitä se kerran jaettuun mallipohjaasi ennen ja ota käyttöön. Lisää sitten kiinnitys, kuten <div class="gsp_full_player"></div> siinä asettelussa, johon pelaajan tulisi ilmestyä, ja aseta Render Element -arvoksi kyseinen luokka.
  • Mitä eroa on sisällönvalitsimella ja renderöintielementillä mukautetulla HTML-sivustolla?

    Sisällön valitsin on mikä tahansa CSS-valitsin tekstille, jonka haluat puhuttavan — esimerkiksi #main, article.posttai sisällönhallintajärjestelmäsi kurssi. Renderöintielementti on kohta, johon pelaajan käyttöliittymä lisätään – yleensä liitosluokkasi. Koska hallitset merkintöjä, voit määrittää minkä tahansa mukautetun asettelun tarkasti.
  • Hidastaako GSpeech-ääni HTML- tai staattista sivustoani?

    Ei. Synteesi ja välimuistiin tallennus tapahtuvat GSpeech pilvi. Upotus on kevyt asiakasskripti, ja soittimet latautuvat vain siellä, missä liittimet ovat olemassa. Hosting-palvelusi jatkaa normaalin HTML:n, CSS:n ja JS:n tarjoamista, kun taas kävijät kuuntelevat sitä pyynnöstä.
  • Tarvitsenko API-avaimia mukautetun sivuston tekoälyäänen upottamiseen?

    Ei. GSpeech is Ei vaadi API-avaimia HTML-sivustoille. Liitä upotus, määritä widgetit Cloud Consolessa ja julkaise. Ääniä ja soittimia hallitaan yhdeltä tililtä ilman kolmannen osapuolen TTS-avaimia koodikannassasi.

Tarvitsetko apua valitsimien löytämisessä mukautetulle teemalle tai rakennustyökalun asettelulle? Ota yhteyttä GSpeech-tukeenLähetä sivun URL-osoite, niin autamme sisällönvalitsimen / renderöintielementin kartoittamisessa.