MediaThrive Podcast Embed SDK

Embed MediaThrive podcast players on any website.

Quick Start

Add the script and a container element to your page:

html
<script src="https://cdn.mediathrive.com/js/podkit.js"></script>
<div data-mediathrive-podcast="YOUR_TEAM_UUID"></div>

That's it! The podcast player will automatically initialize.

Configuration

Configure the embed using data attributes on the container element:

Attribute	Required	Description
`data-mediathrive-podcast`	Yes	Your team UUID
`data-podcast-id`	No	Show a specific podcast
`data-episode-id`	No	Show a specific episode (requires `data-podcast-id`)
`data-theme`	No	Theme: `light`, `dark`, or `system` (default: `system`)
`data-height`	No	Player height: `full`/`100vh` (default), `100%`, or pixels like `600`
`data-hide-header`	No	Set to `true` to hide the navigation header

Examples

Basic embed - Landing page with all podcasts:

html
<div data-mediathrive-podcast="abc123"></div>

Specific podcast:

html
<div
  data-mediathrive-podcast="abc123"
  data-podcast-id="my-podcast"
></div>

Specific episode with dark theme:

html
<div
  data-mediathrive-podcast="abc123"
  data-podcast-id="my-podcast"
  data-episode-id="episode-42"
  data-theme="dark"
></div>

Minimal player (no header, fixed height):

html
<div
  data-mediathrive-podcast="abc123"
  data-hide-header="true"
  data-height="400"
></div>

Full page embed:

html
<!DOCTYPE html>
<html>
<head>
  <style>* { margin: 0; } html, body { height: 100%; }</style>
</head>
<body>
  <div data-mediathrive-podcast="abc123"></div>
  <script src="https://cdn.mediathrive.com/js/podkit.js"></script>
</body>
</html>

JavaScript API

The MTPodcast object is available globally after the script loads.

Events

Subscribe to player events:

javascript
// When the player is ready
MTPodcast.on('ready', (event) => {
  console.log('Player ready:', event.instanceId);
});

// When playback starts
MTPodcast.on('play', (event) => {
  console.log('Playing:', event.episode.title);
});

// When playback pauses
MTPodcast.on('pause', (event) => {
  console.log('Paused:', event.episode.title);
});

// Playback progress (fires every second)
MTPodcast.on('progress', (event) => {
  console.log(`Progress: ${event.progress.toFixed(1)}%`);
  console.log(`Time: ${event.currentTime}/${event.duration}`);
});

// When episode changes
MTPodcast.on('episodeChange', (event) => {
  console.log('Now playing:', event.episode.title);
});

// When episode ends
MTPodcast.on('ended', (event) => {
  console.log('Episode ended:', event.episode.title);
});

Unsubscribe from events:

javascript
const handler = (event) => console.log(event);
MTPodcast.on('play', handler);

// Later...
MTPodcast.off('play', handler);

// Or remove all listeners for an event
MTPodcast.off('play');

Event Data

All events include:

Property	Type	Description
`instanceId`	string	Unique ID of the player instance
`episode`	object	Current episode info (when applicable)

Episode object:

Property	Type	Description
`id`	string	Episode ID
`title`	string	Episode title
`podcastId`	string	Parent podcast ID
`duration`	number	Duration in seconds
`imageUrl`	string	Cover image URL

Progress event also includes:

Property	Type	Description
`currentTime`	number	Current playback time in seconds
`duration`	number	Total duration in seconds
`progress`	number	Progress percentage (0-100)

Controls

Control playback programmatically:

javascript
// Play/pause
MTPodcast.play();
MTPodcast.pause();
MTPodcast.toggle();

// These operate on the first player instance.
// For multiple players, get a specific instance:
const instance = MTPodcast.getInstance('podkit-abc123');
instance.play();
instance.pause();
instance.seek(60);        // Seek to 60 seconds
instance.seekBy(-15);     // Skip back 15 seconds
instance.seekBy(30);      // Skip forward 30 seconds
instance.setPlaybackRate(1.5);  // Set speed to 1.5x

Multiple Players

You can embed multiple players on the same page:

html
<div data-mediathrive-podcast="team1" id="player1"></div>
<div data-mediathrive-podcast="team2" id="player2"></div>

Access all instances:

javascript
const instances = MTPodcast.getAllInstances();
console.log(instances); // { 'podkit-abc': Instance, 'podkit-xyz': Instance }

// Get first instance
const first = MTPodcast.getFirstInstance();

State

Get the current player state:

javascript
const instance = MTPodcast.getFirstInstance();
const state = instance.getState();

console.log(state.playing);     // true/false
console.log(state.currentTime); // seconds
console.log(state.duration);    // seconds
console.log(state.episode);     // episode object or null

Cleanup

Remove players when needed:

javascript
// Destroy a specific instance
MTPodcast.destroy('podkit-abc123');

// Destroy all instances
MTPodcast.destroy();

Advanced

Disable Auto-Initialization

By default, PodKit automatically initializes when the DOM is ready. To disable this:

html
<script>
  window.MT_PODCAST_DISABLE_AUTO_INIT = true;
</script>
<script src="https://cdn.mediathrive.com/js/podkit.js"></script>
<script>
  // Initialize manually when ready
  document.addEventListener('DOMContentLoaded', () => {
    MTPodcast.init();
  });
</script>

Debug Mode

Enable debug logging:

javascript
MTPodcast.setLogLevel(MTPodcast.LOG_LEVELS.DEBUG);

// Log levels:
// MTPodcast.LOG_LEVELS.ERROR (0) - Errors only
// MTPodcast.LOG_LEVELS.WARN  (1) - Warnings and errors (default)
// MTPodcast.LOG_LEVELS.INFO  (2) - Info, warnings, and errors
// MTPodcast.LOG_LEVELS.DEBUG (3) - All messages

Styling

The player renders inside an iframe, so it's isolated from your page styles. The player automatically adapts to the container width.

To style the container:

css
[data-mediathrive-podcast] {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

Browser Support

PodKit supports all modern browsers:

Chrome 60+
Firefox 55+
Safari 12+
Edge 79+

Troubleshooting

Player not loading:

Check that the team UUID is correct
Verify the script URL is accessible
Check browser console for errors

Events not firing:

Ensure you're subscribing to events after the script loads
Use the ready event to know when the player is initialized

CORS errors:

The embed should work on any domain
If issues persist, contact support

Support

For issues or questions, contact MediaThrive support