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://dl.type3.audio/episodes/radio-bostrom/11335090-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"
waveform-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>
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
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"
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:
- Query the TYPE III AUDIO narration database for the current page URL.
- If a narration is found, load that narration.
- 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>
Attribute reference
Attribute | Type | |
---|---|---|
mp3-url | string | url to mp3 audio file |
author | string | author name |
title | string | episode name |
cover-image-url | string | logo image |
subscribe-url--google | string | google podcast url |
subscribe-url--apple | string | apple podcast url |
subscribe-url--spotify | string | spotify url |
subscribe-url--podcast-addict | string | podcast addict podcast url |
subscribe-url--rss | string | rss feed url |
Colours
Attribute | Type | |
---|---|---|
background-color | css color string | background color (default #FEFCE8) |
primary-color | css color string | text color, fill slider color, controls icon color (default black) |
waveform-color | css color string | waveform color |
accent-color | css color string | the left hand side of the wave form color and play button color |
background-color-dark | css color string | (prefers-color-scheme: dark) background color |
primary-color-dark | css color string | (prefers-color-scheme: dark) text color, fill slider color, controls icon color |
waveform-color-dark | css color string | (prefers-color-scheme: dark) waveform color |
accent-color-dark | css color string | (prefers-color-scheme: dark) the left hand side of the wave form color and play button color |
play-button-color | css color string | play / pause button background color |
play-button-color-dark | css color string | (prefers-color-scheme: dark) play / pause button background color |
play-button-icon-color | css color string | play / pause icon color |
play-button-icon-color-dark | css color string | (prefers-color-scheme: dark) play / pause icon color |
play-button-icon-color-hover | css color string | play / pause icon color for button :hover state |
play-button-icon-color-hover-dark | css color string | (prefers-color-scheme: dark) play / pause icon color for button :hover state |
data-skeleton-bg-color | css color string | skeleton loader background color |
data-skeleton-text-color | css color string | skeleton loader text color |
Typeface and custom CSS
Attribute | Type | |
---|---|---|
primary-font-family | css font family string | typeface used for the episode title |
primary-font-weight | css font weight string | font weight for the episode title |
secondary-font-family | css font family string | typeface used for the author title |
secondary-font-weight | css font weight string | font weight for the author title |
custom-css | css string | any CSS you put here will be added within a <style> tag. |
Player features
Attribute | Type | |
---|---|---|
analytics | "none", "google", "segment", "custom" | sends analytics events to selected provider (defaults to "google") |
share-button | boolean | set to "false" to hide share button |
feedback-button | boolean | set to "true" to show feedback button |
(soon) library-url | string | link for the "View in library" button |
sticky | "true", "false" | enable floating player (defaults to "false") |
listen-to-this-page | boolean | show a "listen to this page" button instead of the full player |
listen-to-this-page-text | string | set the "listen to this page" button text. defaults to "Listen to this page". |
link-to-timestamp | boolean | is link to timestamp feature active. |
link-to-timestamp-selector | css selector string | link to timestamp feature will look for links in the selected elements (default "body *") |
t3a-logo | boolean | hides t3a logo if value is "false" |
Subscribe
Subscribe button will only be visible if at least one subscribe-url--[type]
attribute is specified.
Link to timestamp
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.
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 player out of view.
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;
background-color: #ddd;
border: none;
color: #fff;
width: 1.5rem;
height: 1.5rem;
outline: none;
cursor: pointer;
transform: translate(0, 0);
z-index: 10;
}
.t3a-heading-play-button: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 */
h2 .t3a-heading-play-button { margin-top: 9px }
h3 .t3a-heading-play-button { margin-top: 3px }
}
Analytics events
Use the analytics
attribute to send events to your preferred analytics service. Options:
google
: send events to Google Analytics usingwindow.gtag
(gtag("event", event.type, event)
).segment
: send events to Segment usingwindow.analytics
(analytics.track(event.type, event)
).custom
: player will send analytics events towindow.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 type | Event attributes | Fired |
---|---|---|
play | currentPlaybackPosition, playbackSpeed | when player starts playing |
continued-listening | currentPlaybackPosition, playbackSpeed | when player plays without interruption for 30 sec |
completed-episode | currentPlaybackPosition, playbackSpeed | when player progress reaches <95% for the first time and its playing |
reached-minute | minute, playbackSpeed | when player reaches minute 5, 10, 15 (etc) of the audio |
reached-percentage | percentage, playbackSpeed | when player reaches 25, 50 and 75% of the audio |
share | platform | when share button is clicked |
subscribe | platform | when subscribe button is clicked |
player-loaded | mp3Url | when player succesfully loads an MP3 |
error | errorMessage, userMessage, mp3Url, networkState | when an error ocurrs |
All analytics events also include the following attributes:
- episodeType: the type of episode (
ai_narration
,human_narration
orhardcoded_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
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 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"]
You can use any of the attributes listed below.
The shortcode loads JavaScript automatically, so there's no need to manually load player.js
.