Audio embed player

Our embed player is the best way to add narrations and other audio to your web pages.

Want help?

Embed an MP3

Copy-paste the embed code, then edit the required and optional attributes.


  author="Nick Bostrom"
  title="Base Camp for Mount Ethics"

Customise player style

  author="80,000 Hours"
  title="Preventing an AI-related catastrophe"
  primary-font-family="'museo-sans','Helvetica Neue',Helvetica,Arial,sans-serif"

"Listen to this page"

Instead of showing the player by default, you can show a smaller "Listen to this page" button.

When the user clicks the button, playback will begin and the full player will show.

  author="Nick Bostrom"
  title="Base Camp for Mount Ethics"

Embed a narration

To embed a TYPE III AUDIO narration, just add the embed code with no custom parameters.

When your web page loads, the embed player will:

  1. Query the TYPE III AUDIO narration database for the current page URL.
  2. If a narration is found, load that narration.
  3. If a narration is not found, generate a narration via our "fully automatic" narration pipeline.

It's that easy.

N.B. To embed narrations, your domain must be registered as a TYPE III AUDIO client.


WordPress plugin

Install our WordPress plugin to enable the [type_3_player] shortcode.

Use the shortcode as follows:

[type_3_player mp3-url="" author="Nick Bostrom" title="Base Camp for Mount Ethics"]

You can use any of the attributes listed below.

The shortcode loads JavaScript automatically, so there's no need to manually load player.js.

Attribute reference

mp3-urlstringurl to mp3 audio file
authorstringauthor name
titlestringepisode name
cover-image-urlstringlogo image
background-colorcss color stringbackground color (default #FEFCE8)
background-color-darkcss color string(prefers-color-scheme: dark) background color
primary-colorcss color stringtext color, fill slider color, controls icon color (default black)
primary-color-darkcss color string(prefers-color-scheme: dark) text color, fill slider color, controls icon color
waveform-colorcss color stringwaveform color
waveform-color-darkcss color string(prefers-color-scheme: dark) waveform color
accent-colorcss color stringthe left hand side of the wave form color and play button color
accent-color-darkcss color string(prefers-color-scheme: dark) the left hand side of the wave form color and play button color
primary-font-familycss font family stringtypeface used for the episode title
primary-font-weightcss font weight stringfont weight for the episode title
secondary-font-familycss font family stringtypeface used for the author title
secondary-font-weightcss font weight stringfont weight for the author title
listen-to-this-pagecss booleanshow a "listen to this page" button instead of the full player
custom-csscss stringany CSS you put here will be added within a <style> tag.
t3a-logobooleanhides t3a logo if value is "false"
subscribe-url--googlestringgoogle podcast url
subscribe-url--applestringapple podcast url
subscribe-url--spotifystringspotify url
subscribe-url--podcast-addictstringpodcast addict podcast url
subscribe-url--rssstringrss feed url
share-buttonbooleanset to "false" to hide share button
feedback-buttonbooleanset to "true" to show feedback button
analytics"none", "google", "segment", "custom"sends analytics events to selected provider (defaults to "google")
(soon) library-urlstringlink for the "View in library" button
plausiblebooleandisable plausible analytics (enabled by default)
data-skeleton-bg-colorcss color stringskeleton loader background color
data-skeleton-text-colorcss color stringskeleton loader text color
link-to-timestampbooleanis link to timestamp feature active
link-to-timestamp-selectorcss selector stringlink to timestamp feature will look for links in the selected elements (default "body *") document.querySelectorAll(link-to-timestamp-selector)


Subscribe button will only be visible if at least one subscribe-url--[type] attribute is specified.

When the player loads, it will search your entire page for timestamps in the format [HH:MM:SS]. These timestamp will become links. When clicked, those links will seek the player to the timestamp and start playback.

Analytics events

Use the analytics attribute to send events to your preferred analytics service. Options:

  • google: send events to Google Analytics using window.gtag (gtag("event", event.type, event)).
  • segment: send events to Segment using (analytics.track(event.type, event)).
  • custom: player will send analytics events to window.t3aAnalytics(event.type, event).
  • none: player will not send analytics events.

Events will only be sent if the relevant window.x function is defined. If a given visitor is blocking your analytics service via their privacy settings, the function will be undefined and events will not be sent.

If you do not specify an analytics value, the player defaults to using Google Analytics.

Event typeEvent attributesFired
playcurrentPlaybackPosition, playbackSpeedwhen player starts playing
continued-listeningcurrentPlaybackPosition, playbackSpeedwhen player plays without interruption for 30 sec
completed-episodecurrentPlaybackPosition, playbackSpeedwhen player progress reaches <95% for the first time and its playing
reached-minuteminute, playbackSpeedwhen player reaches minute 5, 10, 15 (etc) of the audio
reached-percentagepercentage, playbackSpeedwhen player reaches 25, 50 and 75% of the audio
shareplatformwhen share button is clicked
subscribeplatformwhen subscribe button is clicked
errorerrorMessage, userMessage, mp3Url, networkStatewhen an error ocurrs

All analytics events also include the following attributes:

  • type: the type of episode (e.g. human narration or AI narration)
  • episodeTitle: title of the episode
  • episodeAuthor: author of the narrated article, if known
  • url: the URL where the player was loaded, excluding query params and hash values
  • origin: the domain name where the player was loaded

Privacy note

By default, the embed player also sends the analytics events above to the TYPE III AUDIO internal analytics service, which is provided by Plausible uses a GDPR-compliant tracking mechanism for which visitor consent and cookie notices are not required. No personally identifiable information is collected, so our data analytics has no legal implications for your privacy policy.

We use this information to improve the player, provide usage reports to clients and assess the impact of our work.

If you wish to opt-out of this tracking, send us an email.

Questions? Suggestions?

You are using the beta version of the TYPE III EMBED player. See our roadmap and ideas backlog to get a sense of what's to come. What would you like us to build next?

Improvements to the player will be released automatically: you won't need to update your embed code.

Get help