Audio embed player

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

Want help?

Embed a narration

To embed a TYPE III AUDIO narration, 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, create a new narration.

It's that easy.

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

Here's how the player looks by default:

Customise player style

<script
  type="module"
  crossorigin
  src="https://embed.type3.audio/player.js"
></script>
<type-3-player
  background-color="#f1f1f1"
  primary-color="#333"
  accent-color="#2ebdd1"
></type-3-player>

For more fine-grained control, use the custom-css attribute. CSS you enter will be injected within the component scope using an inline <style> tag.

"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
  listen-to-this-page="true"
>
</type-3-player>

Attribute reference

Player features

AttributeType
analytics"none", "google", "segment", "custom"sends analytics events to selected provider (defaults to "google")
(soon) library-urlstringlink for the "View in library" button
sticky"true", "always", "false"true = enable floating player when inline player is not in viewport; always = disable inline player and always show the player in floating mode (defaults to "false")
listen-to-this-pagebooleanshow a "listen to this page" button instead of the full player
listen-to-this-page-textstringset the "listen to this page" button text. defaults to "Listen to this page".
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 *")

Subscribe buttons

AttributeType
mp3-urlstringurl to mp3 audio file
subscribe-url--applestringapple podcast url
subscribe-url--spotifystringspotify url
subscribe-url--youtubestringyoutube url
subscribe-url--podcast-addictstringpodcast addict podcast url
subscribe-url--rssstringrss feed url

Colours

AttributeType
background-colorcss color stringbackground color (default #FEFCE8)
primary-colorcss color stringtext color, fill slider color, controls icon color (default black)
background-color-darkcss color string(prefers-color-scheme: dark) background color
primary-color-darkcss color string(prefers-color-scheme: dark) text color, fill slider color, controls icon color
accent-color-darkcss color string(prefers-color-scheme: dark) the play button color
play-button-colorcss color stringplay / pause button background color
play-button-color-darkcss color string(prefers-color-scheme: dark) play / pause button background color
play-button-icon-colorcss color stringplay / pause icon color
play-button-icon-color-darkcss color string(prefers-color-scheme: dark) play / pause icon color
play-button-icon-color-hovercss color stringplay / pause icon color for button :hover state
play-button-icon-color-hover-darkcss color string(prefers-color-scheme: dark) play / pause icon color for button :hover state
data-skeleton-bg-colorcss color stringskeleton loader background color
data-skeleton-text-colorcss color stringskeleton loader text color

Typeface and custom CSS

AttributeType
custom-csscss stringany CSS you put here will be added within a <style> tag.

Floating player

If sticky=true, then the player will float at the bottom of the screen when the user clicks "play" and then scrolls the inline player out of view.

If sticky=always, then the inline player will be disabled, and the player will always float at the bottom of the screen.

When the sticky player is visible, the .t3a-sticky-player-visible will be present on the <body> element.

Header play buttons

If header-play-buttons="true", the player will look for headings on your web page with text that exactly matches a chapter title from your audio. A "Play" button will be added to the left of matching headings.

To use this function, you must add CSS like the following to your stylesheet:

/*
  Styles for the TYPE III AUDIO player "heading play button" feature.
*/

/* Heading play button should not be shown on small screens */
.t3a-heading-play-button {
  display: none;
}

/* Set minimum width at which heading play button should be shown */
@media screen and (min-width: 850px) {
  .t3a-heading-play-button {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    margin-left: -34px;
    margin-right: 10px;
    border-radius: 9999px;
    border: none;
    width: 1.5rem;
    height: 1.5rem;
    outline: none;
    cursor: pointer;
    transform: translate(0, 0);
    z-index: 10;

    /* Colour of the play button */
    background-color: #ddd;
    /* Colour of the play button icon. */
    color: #fff;
  }

  .t3a-heading-play-button:hover {
    /* Colour of the play on hover */
    background-color: #333;
  }

  .t3a-heading-play-button:focus {
    outline: none;
  }

  .t3a-heading-play-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 2px;  
  }

  /* Refine this to match the dimensions of your heading typeface */
  h1 .t3a-heading-play-button { margin-top: 9px } 
  h2 .t3a-heading-play-button { margin-top: 9px } 
  h3 .t3a-heading-play-button { margin-top: 3px }
}

If you'd like to show the header play buttons only if the user has started audio playback, you can use the following CSS:

.t3a-heading-play-button {
  display: none;
}

.t3a-playback-started .t3a-heading-play-button {
  display: block;
}

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.

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
subscribeplatformwhen subscribe button is clicked
player-loadedmp3Urlwhen player succesfully loads an MP3
errorerrorMessage, userMessage, mp3Url, networkStatewhen an error ocurrs

All analytics events also include the following attributes:

  • episodeType: the type of episode (ai_narration, human_narration or hardcoded_mp3_url)
  • episodeTitle: title of the episode, if known
  • episodeAuthor: author of the narrated article, if known
  • episodeId: episode ID (if episode was loaded from the TYPE III episode database)
  • url: the URL where the player was loaded, excluding query params and hash values
  • origin: the domain name where the player was loaded

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://dl.type3.audio/episodes/radio-bostrom/11335090-base-camp-for-mount-ethics-2022.mp3"
  author="Nick Bostrom"
  title="Base Camp for Mount Ethics"
  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>

If link-to-timestamp="true", then: when the player loads, it will search your entire page for strings in the format [HH:MM:SS], [H:MM:SS] and [MM:SS]. These timestamp will become links. When clicked, those links will seek the player to the timestamp and start playback.

If the player should search just part of your page for timestamps, set the link-to-timestamp-selector attribute to any valid CSS selector.

N.B. If you have more than one <type-3-player> on a single page, you must set link-to-timestamp="false" on the players that you do not wish to seek using the link to timestamp function.

Privacy note

By default, the embed player also sends the analytics events above to the TYPE III AUDIO internal analytics service. We use a GDPR-compliant tracking mechanism for which visitor consent and cookie notices are not required. No personally identifiable information is collected, so our usage 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.

WordPress plugin

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

Use the shortcode as follows:

[type_3_player]

Optionally add custom attributes like so:

[type_3_player listen-to-this-page="true"]

You can use any of the attributes listed above.

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

Get help