Player (legacy)

We deprecated our legacy player at the end of Q2 2025. To support this transition, we’ve created a migration guide to help you update your integration and take advantage of the new features. This guide will walk you through the migration process, whether by updating the player embed script or using NPM.

Whats new?

The updated player comes with several new customization features designed to enhance user engagement and improve the listening experience. For more details on the new player’s features, visit our player documentation. To explore customization options and test new features in a sandbox environment, check out our player demo page.

Update the embed script

To start using the new BeyondWords player, you’ll need to replace the legacy embed script with the one below:

<script async defer src="https://proxy.beyondwords.io/npm/@beyondwords/player@latest/dist/umd.js" 
  onload="new BeyondWords.Player({ 
    target: this, 
    projectId: YOUR_PROJECT_ID,
    contentId: 'YOUR_CONTENT_ID'
  })">
</script>;

<iframe
  id="speechkit-io-iframe"
  data-src="https://audio.beyondwords.io/e/{contentID}"
  frameborder="0"
  scrolling="no"
  allowfullscreen="false"
  style="display: none;">
</iframe>

<script 
  src="https://proxy.beyondwords.io/npm/@beyondwords/audio-player@latest/dist/module/iframe-helper.js" 
  type="text/javascript">
</script>

The <script> tag loads the BeyondWords player and instantiates a new player instance
The async and defer attributes ensure the browser doesn’t stall while downloading the script
Setting target: this places the player immediately after the script tag in the <body>. If you need a different placement, you can specify another target.
Replace YOUR_PROJECT_ID with your numeric project ID and 'YOUR_CONTENT_ID' with your content UUID

You can use any of the following properties along with projectId to initialize the player.

Property	Description
`contentId`	Unique UUID string for the audio content. You can also pass the previous integer audio ID as a string for users migrating from the legacy API.
`sourceId`	The externally provided source identifier for a content item. This could be the ID from your CMS, the `<guid>` from an RSS `<item>`, or the post ID if generated using the WordPress Plugin.
`sourceUrl`	The URL containing the source content. This could be the public URL submitted via the API, the `<link>` from an RSS `<item>`, or the post URL from the WordPress Plugin.
`playlistId`	The unique ID for a playlist created in the dashboard or through the API.

Update via NPM

Add the new player NPM package

npm add @beyondwords/player

npm install --save @beyondwords/audio-player

Add a target <div>

This will be where the player is shown in your web application.

<div id='beyondwords-player'></div>

Initialize the player

import BeyondWords from '@beyondwords/player';

new BeyondWords.Player({ target: '#beyondwords-player', projectId: YOUR_PROJECT_ID, contentId: 'YOUR_CONTENT_ID' });

Replace YOUR_PROJECT_ID with your numeric project ID and 'YOUR_CONTENT_ID' with your content UUID.

You can use any of the following properties along with projectId to initialize the player.

Property	Description
`contentId`	Unique UUID string for the audio content. You can also pass the previous integer audio ID as a string for users migrating from the legacy API.
`sourceId`	The externally provided source identifier for a content item. This could be the ID from your CMS, the `<guid>` from an RSS `<item>`, or the post ID if generated using the WordPress Plugin.
`sourceUrl`	The URL containing the source content. This could be the public URL submitted via the API, the `<link>` from an RSS `<item>`, or the post URL from the WordPress Plugin.
`playlistId`	The unique ID for a playlist created in the dashboard or through the API.

Get started

Content

Voices

Distribution

Analytics

Monetization

Tools

Integrations

Admin

Support

Migration guides

Whats new?

Update the embed script

Update via NPM

​Whats new?

​Update the embed script

​Update via NPM

Whats new?

Update the embed script

Update via NPM