G

Create a Full Player

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.

Open Cloud Console Button Player Live demos

GSpeech create a Full Page Player
Full Page Player — paid version with translation power

How to create a Full Player

  1. Sign in (or create a free account).
  2. Open your dashboard and choose your website (see create a website).
  3. From the left menu: WidgetsAdd new widget.
  4. Enter a title (dashboard reference only).
  5. Set type to Full PlayerCreate.
  6. Open the Content tab.
  7. 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.
  8. Set Render Element to the element that should contain the player (often .gsp_full_player — the leading dot means “class”).
  9. Optional: set Title Text or Title Selector for the player heading.
  10. 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.

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>

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.