Audio embed player

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

Embed an MP3

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

<script
  type="module"
  crossorigin
  src="https://embed.type3.audio/player.js"
></script>

<type-3-player
  mp3-url="https://www.buzzsprout.com/2040011/11391492-12-base-camp-for-mount-ethics-2022.mp3"
  author="Nick Bostrom"
  title="Base Camp for Mount Ethics"
  cover-image-url="https://radiobostrom.com/images/cover-art-radio-bostrom-500x500.jpeg"
  subscribe-url--apple="https://podcasts.apple.com/gb/podcast/an-introduction-to-nick-bostrom/id1641730884"
  subscribe-url--spotify="https://open.spotify.com/show/6N6EokexQLzxdG16J3FbWd"
  subscribe-url--podcast-addict="https://podcastaddict.com/podcast/4076029"
  subscribe-url--rss="https://feeds.buzzsprout.com/2040011.rss"
>
</type-3-player>

Customise player style

<script
  type="module"
  crossorigin
  src="https://embed.type3.audio/player.js"
></script>
<type-3-player
  mp3-url="https://www.buzzsprout.com/2062493/11448900-preventing-an-ai-related-catastrophe-fewer-footnotes.mp3"
  author="80,000 Hours"
  title="Preventing an AI-related catastrophe"
  cover-image-url="https://80000hours.org/wp-content/uploads/2022/10/ai-catastrophe-300x300.jpeg"
  background-color="#f1f1f1"
  primary-color="#333"
  secondary-color="#aaa"
  accent-color="#2ebdd1"
  primary-font-family="'museo-sans','Helvetica Neue',Helvetica,Arial,sans-serif"
  secondary-font-family="'proxima-nova',Arial,sans-serif"
  secondary-font-weight="700"
></type-3-player>

"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.

<type-3-player
  mp3-url="https://www.buzzsprout.com/2040011/11391492-12-base-camp-for-mount-ethics-2022.mp3"
  author="Nick Bostrom"
  title="Base Camp for Mount Ethics"
  cover-image-url="https://radiobostrom.com/images/cover-art-radio-bostrom-500x500.jpeg"
  listen-to-this-page="true"
>
</type-3-player>

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.

<script
  type="module"
  crossorigin
  src="https://embed.type3.audio/player.js"
></script>
<type-3-player></type-3-player>

WordPress plugin

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

Use the shortcode as follows:

[type_3_player mp3-url="https://www.buzzsprout.com/2040011/11391492-12-base-camp-for-mount-ethics-2022.mp3" 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

Subscribe

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

Link to timestamp

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 window.analytics (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.

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.io. 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