HTML կայքի տեքստից խոսքի փոխակերպում — ներկառուցել արհեստական ​​բանականության ձայն

HTML ինտեգրացիա

HTML կայքի տեքստից խոսք՝ ներկառուցեք արհեստական ​​բանականության ձայնը մեկ սկրիպտի հետ

Մշակողներ և թիմեր, որոնք աշխատում են հատուկ HTML, ստատիկ կայքերը կամ ոչ WordPress CMS կույտերը կարող են ներկառուցել TTS սկրիպտը մեկ անգամ և բնական առաքում կայքի համար նախատեսված արհեստական ​​բանականության ձայն հետ GSpeechՎերարտադրությունը և սինթեզը կատարվում են GSpeech Cloud Console - API բանալիներ անհրաժեշտ չեն, սերվերի կողմից TTS կույտ չկա և լրացուցիչ հոսթինգի բեռ չկա։

Այս ուղեցույցը ցույց է տալիս, թե ինչպես HTML կայքում տեքստը խոսքին ավելացնելըտեղադրեք մեկ տողանոց միացման կոդը նախքան , տեղադրեք լիաէջ / կոճակ / շրջանաձև նվագարկիչներ՝ HTML-ի հատուկ միացումներով, ապա քարտեզագրեք Բովանդակության ընտրիչ և Render տարր ձեր դասավորության դասերին և ID-ներին։

  • Մեկ տողով ներկառուցված — կպցնել առաջ ցանկացած հատուկ կույտի կամ ստատիկ կայքի վրա։
  • Ամպային աուդիո ստեղծում — սինթեզել մեկ անգամ, քեշավորել և վերարտադրել այցելությունների ընթացքում։
  • API բանալիներ անհրաժեշտ չեն — ձայներ և նվագարկիչներ մեկ խաղային համակարգից։
  • Ընտրիչի վրա հիմնված քարտեզագրում — թիրախավորել ցանկացած հոդված, հիմնական կամ հատուկ դասավորության փաթեթ։

Լավագույնը ` մշակողներ, ստատիկ գեներատորներ և CMS-ի հատուկ թեմաներ, որտեղ դուք կարող եք կառավարել HTML-ը և ունենալ մեկ ներդրված կոդ, գումարած CSS ընտրիչներ՝ հատուկ դասավորությունների համար։

Կայքի TTS-ի ակնարկ Կենդանի դեմոներ Բացեք Cloud Console-ը

Արագ հղումներ Մատչ Քարտեզագրման մոդել Խաղացողի հեծաններ Բովանդակության կարգավորումներ Օրինակներ ֆայլեր ՀՏՀ

Videos

միացնել GSpeech դեպի HTML կայք
Մատչ

Ինչպես միանալ GSpeech դեպի HTML

Միացման կոդը բեռնվում է GSpeech յուրաքանչյուր էջում, որտեղ այն առկա է: Խաղացողները հայտնվում են միայն այնտեղ, որտեղ դուք տեղադրում եք միացումներ / հատուկ HTML, և միայն այն դեպքում, երբ համապատասխան վիջեթը հրապարակված և կարգավորված է:

Քարտեզագրման մոդել

Embed script, mounts և selector mapping՝ հատուկ HTML-ի համար

HTML-ի հատուկ կայքում մեկ ներդրված տարբերակ բեռնում է շարժիչը։ Այնուհետև յուրաքանչյուր վիջեթ ձեր դասերն ու ID-ները կապում է միացման հետ, որպեսզի դուք լիովին վերահսկեք դասավորությունը, մինչդեռ պատմությունը մնում է Cloud Console-ում։

1 Միացման կոդը

Շարժիչը բեռնվում է նախքան Առանց դրա, մոնտաժները ոչինչ չեն անում։

2 Հատուկ վիջեթ

Վահանակի կարգավորում՝ ձայն, լեզու, դիզայն, բովանդակության կարգավորումներ, URL կանոններ ցանկացած երթուղու կամ ձևանմուշի համար։

3 Մոնտաժ / Պատվերով HTML

Ձեր էջի HTML-ում նշիչ (օրինակ՝ .gsp_full_player), որտեղ հայտնվում է խաղացողի ինտերֆեյսը։

4 Բովանդակության քարտեզագրում

Բովանդակության ընտրիչ = ինչ կարդալ։ Render տարր = որտեղ է հայտնվում խաղացողը։ Բացառումը / Վերնագիրը / URL-ները ճշգրտում են համընկնումը։

  • Անսահմանափակ վիդջեթներ — առանձին լիաէջ, կոճակ կամ շրջանակ վիջեթներ՝ տարբեր դասավորությունների, լեզուների կամ դիզայնի համար։
  • Անսահմանափակ խաղացողներ մեկ վիջեթի համար — մեկ հրապարակված վիջեթը կարող է հզորացնել Render Element + URL կանոններով թույլատրված բոլոր համապատասխան միացումները։
  • HTML-ի հատուկ միացումներ — HTML կայքերում մոնտաժը նման է <div class="gsp_full_player"></div>WordPress-ում նույն գաղափարը օգտագործում է կարճ կոդեր, ինչպիսիք են՝ [gspeech].
  • Լռելյայն vs. առաջադեմ — լռելյայն միացումները արագ են աշխատում։ Եզակի, անհատական ​​դասավորությունները պահանջում են բովանդակության ընտրիչի / ռենդերինգի տարրերի ճշգրիտ արժեքներ։
Ձայնարկիչներ

Ավելացրեք խաղացողներ՝ օգտագործելով հատուկ HTML

Տեղադրեք այս ձողերից որևէ մեկը այնտեղ, որտեղ խաղացողը պետք է հայտնվի էջում: Սեղմեք քարտի վրա՝ պատճենելու համար: Այնուհետև տեղադրեք վիջեթը: Render տարր նույն դասարանին։

  • Ամբողջ էջի նվագարկիչ
    <div class="gsp_full_player"></div>
  • Կոճակ նվագարկիչ
    <div class="gsp_button_player"></div>
  • Circle Player
    <div class="gsp_circle_player"></div>

Լրիվ խաղացողի փաստաթղթեր Button Player-ի փաստաթղթերը Circle Player-ի փաստաթղթերը

Բովանդակության կարգավորումներ

Համապատասխանեցրեք HTML դասավորությունները նվագարկչին

Վիջեթում Պարունակություն ներդիր, ընտրիչները ուղղեք ձեր սեփական հոդվածի, հիմնական կամ ձեր սեփական փաթեթավորման վրա՝ ձեր նշագրման կողմից բացահայտված ցանկացած CSS ընտրիչի վրա։

  • id → # — HTML id="main" → գրել #main.
  • դաս → . — HTML class="post-content" → գրել .post-content.
  • Հավաքեք կտորները — Բովանդակության ընտրիչը ընդունում է մի քանի թիրախներ, որոնք բաժանված են ստորակետերով։ #intro,.body,#summary.
  • Կտրեք կտորները — Բացառությունների ցանկը օգտագործում է նույնը # / . + ստորակետեր: #comments,.ads,.share-buttons.
  • Գտեք արժեքներ — սեղմեք աջ կոճակը → Ստուգել ակտիվ էջում։ Սկսնակների համար ամբողջական ուղեցույց՝ HTML արժեքներ (# / .).

Բովանդակության ընտրիչ

Սահմանում է ինչ տեքստ է ասվումՕգտագործեք CSS ընտրիչներ, որոնք բաժանված են ստորակետերով (հավաքեք բովանդակությունը մասերի): Օրինակներ՝

  • հոդված, .post-content, #գլխավոր, .custom-layout — կարդացեք այդ տարրերը (# = id, . = դաս):
  • հոդված, բաժին, #my_id,.my_class — մեկ դաշտում բազմաթիվ թիրախներ (կտորները միավորված են մեկ պատմության մեջ):
  • ծնող_դաս — կարդացեք միացման ծնողական փաթեթավորումը (օգտակար է բովանդակության բլոկի ներսում գտնվող Custom HTML-ի համար):
  • ինքնադասարան — կարդացեք նույն փաթեթավորումը, որի մեջ տեղադրված է լեռը։
  • Թողեք դատարկ, եթե օգտագործում եք Բովանդակության տեքստ փոխարենը (ֆիքսված տեքստ, ոչ թե DOM բովանդակություն):

Render տարր

Սահմանում է որտեղ է ներդրվում խաղացողի ինտերֆեյսըԱյն պետք է համապատասխանի էջի իրական տարրին։

  • HTML-ի հատուկ միացումների համար սահմանեք այն որպես mount դաս՝ .gsp_full_player, .gsp_button_playerԿամ .gsp_circle_player.
  • Կարող եք նաև թիրախավորել դասավորության կոնտեյներներ, ինչպիսիք են՝ մարմին, #contentԿամ .հոդվածի վերնագիր երբ դուք չեք օգտագործում հատուկ ամրակ։
  • Եթե ​​բովանդակության ընտրիչը ճիշտ է, բայց ոչինչ չի երևում, ապա Render տարրը սովորաբար սխալ է կամ բացակայում է այդ էջում։

Render Position

Տեղադրում է խաղացողին նախքան or Այն բանից հետո Render տարրի պարունակությունը։ Առանձին mount div-ի համար After/Before-ը սովորաբար դեռևս աշխատում է այդ հանգույցի նկատմամբ՝ թողեք mount-ը դատարկ և թողեք, որ վիջեթը լրացնի այն։

Բացառել ցուցակը

Ընտրողներ, որոնք պետք է Նշում կարող են արտասանվել, նույնիսկ եթե դրանք գտնվում են Բովանդակության ընտրիչի ներսում։ Նույնը # / . կանոններ, ստորակետերով բաժանված։ Օրինակ՝ #comments,.sidebar,.ads,.no-speech.

Վերնագրի ընտրիչ / Վերնագրի տեքստ

  • Վերնագրի ընտրիչ — էջի դինամիկ վերնագիր (օրինակ՝ h1).
  • Վերնագիր տեքստը — շտկված է նվագարկիչում ցուցադրվող վերնագիրը: Վերնագրի տեքստն օգտագործելիս թողեք Վերնագրի ընտրիչը դատարկ:

Բովանդակության տեքստ

Լրացուցիչ ֆիքսված պատմողական տեքստ։ Օգտագործման դեպքում բովանդակության ընտրիչը կարող է դատարկ մնալ։ Օգտակար է ստատիկ գովազդային բլոկների համար, երբ DOM բովանդակությունը չպետք է ձայնագրի։

HTML կայքերի համար հիմնական կանոն. Բովանդակության ընտրիչը մատնացույց է անում ձեր կողմից կառավարվող փաթաթանին (օրինակ՝ article.post or #main), Render Element-ը մատնացույց է անում միացման կետին, իսկ բացառությունների ցանկը բաց է թողնում նավիգացիան, գովազդները և մեկնաբանությունները։

Օրինակներ

HTML դասավորությունների համար գործնական քարտեզագրման օրինակներ

Օրինակ Ա

Հոդվածի անհատական ​​դասավորություն լիաէջ նվագարկիչով

Ձեր ստատիկ կամ CMS ձևանմուշը ներառում է հոդված և միացում։

  • Էջի նշում
    <article class="post custom-layout">...</article> <div class="gsp_full_player"></div>
  • Բովանդակության ընտրիչ - article.post.custom-layout
  • Render տարր - .gsp_full_player
  • Բացառել ցուցակը - .share-buttons,.related-posts (Ընտրանքայինl)
  • Վերնագրի ընտրիչ - h1 (Ընտրանքայինl)
Օրինակ Բ

Տեղադրել CMS բովանդակության տիրույթում — parent_class

Եթե ​​միացումը գտնվում է CMS-ի հատուկ բովանդակության տիրույթում, Content Selector-ը կարող է լինել հարաբերական՝

  • Բովանդակության ընտրիչ - parent_class (կարդում է լեռան ծնողը)
  • Render տարր - .gsp_full_player

օգտագործում self_class երբ մոնտաժի փաթաթանն ինքնին պարունակում է պատմվող տեքստը։

Օրինակ Գ

Ստատիկ կայքի ձևանմուշներ մեկ կոճակի վիջեթով

Տեղ .gsp_button_player բազմաթիվ ստատիկ ձևանմուշների վրա: Մեկ կոճակով նվագարկիչ վիջեթ՝ Render տարրով .gsp_button_player կարող է հզորացնել դրանք բոլորը: Ստեղծեք լրացուցիչ վիջեթներ միայն այն դեպքում, երբ ձայնը, դիզայնը, ընտրիչները կամ URL կանոնները պետք է տարբերվեն:

ֆայլեր

Ստեղծեք կայքի համար նախատեսված արհեստական ​​բանականության ձայնային վիջեթներ

  • Բացել վահանակը - գնա քո մոտ GSpeech վահանակ.
  • Ընտրեք կայքը — բացեք ձեր միացված HTML կայքը։
  • Ավելացնել նոր վիջեթ — Վիջեթներ → Ավելացնել նոր վիջեթ → ընտրել տեսակը (Լրիվ նվագարկիչ, Կոճակ, Շրջան, …) → Ստեղծել։
  • Կարգավորել բովանդակությունը — սահմանեք բովանդակության ընտրիչ, ռենդերինգի տարր, բացառությունների ցանկ, վերնագրեր ձեր դասավորության համար։
  • Կարգավորել նվագարկիչը / դիզայնը — ձայն, վահանակներ, թեմա, լայնություն, լուսանցքներ։
  • Հրապարակել և լսել — կարգավիճակը սահմանել «Հրապարակված», թարմացնել ուղիղ հեռարձակման էջը, փորձարկել վերարտադրումը։

Երբ էջի տեքստը փոխվում է, Smart Audio Sync-ը կարող է վերականգնել պատմությունը ֆոնային ռեժիմում: Համատեքստային դաշտերը դեռևս որոշում են որը տեքստ և որտեղ խաղացողը ապրում է։

ՀՏՀ

Հաճախակի տրվող հարցեր. HTML կայքի տեքստից խոսքի ներդրում

  • HTML կայքը GSpeech-ի միջոցով աջակցո՞ւմ է տեքստից խոսք փոխակերպմանը և արհեստական ​​բանականության ձայներին։

    Այո: GSpeech աշխատում է ցանկացած HTML կայքի, ստատիկ գեներատորի կամ հատուկ CMS-ի վրա, որտեղ դուք կարող եք տեղադրել սկրիպտ նախքան Դուք ստանում եք բնական արհեստական ​​բանականության ձայներ և ժամանակակից նվագարկիչներ՝ առանց սերվերի կողմից TTS խողովակաշար կառուցելու։

  • Ինչպե՞ս ներդնել GSpeech TTS սկրիպտը հատուկ կայքում։

    Պատճենեք միացման կոդը Integrations → Html Website-ից: Տեղադրեք այն մեկ անգամ ձեր համօգտագործվող ձևանմուշում նախքան և տեղակայել։ Այնուհետև ավելացրեք միացում, օրինակ՝ <div class="gsp_full_player"></div> այն դասավորության մեջ, որտեղ պետք է հայտնվի խաղացողը, և Render Element-ը սահմանեք այդ դասին։

  • Ի՞նչ է Content Selector-ը ընդդեմ Render Element-ի HTML-ի հատուկ կայքում:

    Բովանդակության ընտրիչ արտասանվող տեքստի համար ցանկացած CSS ընտրիչ է, օրինակ՝ #main, article.post, կամ ձեր CMS-ի դասընթացը։ Render տարր սա այն վայրն է, որտեղ տեղադրվում է նվագարկչի ինտերֆեյսը՝ սովորաբար ձեր mount դասը։ Քանի որ դուք եք կառավարում նշագրումը, կարող եք ճշգրիտ քարտեզագրել ցանկացած հատուկ դասավորություն։

  • GSpeech աուդիոն կդանդաղեցնի՞ իմ HTML-ը կամ ստատիկ կայքը։

    Ոչ։ Սինթեզը և քեշավորումը տեղի են ունենում GSpeech ամպ: Ներդիրը թեթև հաճախորդային սկրիպտ է, և նվագարկիչները բեռնվում են միայն այնտեղ, որտեղ կան միացումներ: Ձեր հոսթինգը շարունակում է մատուցել սովորական HTML, CSS և JS, մինչդեռ այցելուները լսում են պահանջարկի դեպքում:

  • Արդյո՞ք ինձ անհրաժեշտ են API բանալիներ կայքի արհեստական ​​բանականության ձայնը ներդնելու համար։

    Ոչ. GSpeech is API բանալիներ անհրաժեշտ չեն HTML կայքերի համար: Տեղադրեք ներդրված ֆայլը, կարգավորեք վիջեթները Cloud Console-ում և հրապարակեք: Ձայններն ու նվագարկիչները կառավարվում են մեկ հաշվից՝ առանց ձեր կոդային բազայում երրորդ կողմի TTS բանալիների:
Օգնություն

Օգնություն է պետք հատուկ թեմայի կամ շինարարի դասավորության համար ընտրիչներ գտնելու հարցում՞ Կապվեք GSpeech-ի աջակցության ծառայության հետՈւղարկեք էջի URL-ը, և մենք կօգնենք ձեզ քարտեզագրել բովանդակության ընտրիչը / արտապատկերման տարրը։

Related

Wix Shopify Squarespace Joomla WordPress-ի TTS

Փաստաթղթեր և ուղեցույցներ
Սկսել
Ստեղծել հաշիվ Ստեղծեք կայք Ուսումնասիրեք ձեր վահանակը
Integrations
Բոլոր հարթակները Միացեք HTML կայքին Միացեք WordPress-ին Միացեք Wix-ին Միացեք Shopify-ին Միացեք Squarespace-ին Միացեք Joomla-ին
Ստեղծեք վիդջեթ
Ստեղծեք RHT նվագարկիչ Ստեղծեք ամբողջական նվագարկիչ Ստեղծեք կոճակ նվագարկիչ Ստեղծեք Circle Player Ստեղծեք ողջույնի հաղորդագրություն
ուսումնասիրել
Պլատֆորմներ
աջակցություն
© 2012–2026 թթ Creative Solutions Բոլոր իրավունքները պաշտպանված են