Embedding the player

Load the script once per page (for example in <head> or before </body>). Wherever you want a player, add a <div> with the attributes described in Configuration.

Minimal example

article.html
<!-- Load once per page -->
<script src="https://cdn.voicgen.io/player/v1/voicgen-player.min.js" defer></script>

<!-- One player for this article -->
<div data-voicgen-player data-post-id="my-article-slug"></div>

Use the same post_idyou used when that article's audio was created in Voicgen (whether you generated it from the dashboard, an integration, or another tool). Multiple players on one page are fine — add another div with a different data-post-id.

Script URL

Builds are hosted on the Voicgen CDN under a versioned path. Your team may share the exact URL; WordPress integrations typically use the same /player/v1/ pattern with either the full or minified file.

React and other SPAs

Load the script with your framework's script tag helper, then render the div with data-voicgen-player and data-post-id. The embed watches the page so players inserted later (client-side navigation, infinite lists) still initialize.

⚠
Hostname must match VoicgenReaders must view the page on a hostname you've added to your Voicgen site (for example your production domain). If the hostname does not match, the player cannot attach to your account.