Create a Full Player — full-page text to speech bar
The Full Player is the classic listen bar for articles, posts, and long pages. Visitors play natural AI audio while reading — powered by GSpeech Cloud Audio Generation with smart caching so synthesis does not hit your server on every visit.
You create the widget in the Cloud Console, map Content Selector (what to read) and Render Element (where the player appears), then place a mount such as <div class="gsp_full_player"></div> when you use Custom HTML.
Full-page listen UI — ideal for blogs, docs, and long-form marketing pages.
Selector mapping — target article bodies and skip menus or sidebars.
No API Keys Required — voice and player settings stay in the console.
Set Content Selector to the elements whose text should be read. Use # for id, . for class; assemble pieces with commas (e.g. #intro,.post-body). Optional: Exclude List with the same syntax.
Set Render Element to the element that should contain the player (often .gsp_full_player — the leading dot means “class”).
Optional: set Title Text or Title Selector for the player heading.
Click Save, set Status to Published, refresh the live page.
Need help finding selectors? Remember id → #, class → . — full beginner walkthrough: HTML values. Or Contact us. Voice and most player options default to Use Global from website Settings — Global vs custom settings.
Custom HTML
Mount code
Insert this mount where the Full Player should appear, then match Render Element to the same class:
Full Page Player: <div class="gsp_full_player"></div>
FAQ
Full Player FAQ
Content Selector vs Render Element?
Content Selector = which text is narrated (one wrapper or several, comma-separated; # = id, . = class). Render Element = where the player UI is injected. Wrong audio → fix Content Selector (or Exclude List). Missing player → fix Render Element.
When should I use Full instead of Button?
Use Full Player for long articles where a dedicated listen bar feels natural. Use Button Player when you want a compact control in a tighter layout.