Audio embed player
Our embed player is the best way to add narrations and other audio to your web pages. Just copy-paste the embed code.
Embed an MP3
<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"
></type-3-player>
Embed a narration (coming soon)
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>
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
| Attribute | Type | |
|---|---|---|
| mp3-url | string | url to mp3 audio file |
| author | string | author name |
| title | string | episode name |
| cover-image-url | string | logo image |
| background-color | css color string | background color (default #FEFCE8) |
| primary-color | css color string | text color, fill slider color, controls icon color (default black) |
| secondary-color | css color string | waveform color |
| accent-color | css color string | the left hand side of the wave form color and play button color |
| primary-font-family | css font family string | typeface used for the episode title |
| primary-font-weight | css font family 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 family string | font weight for the author title |
| t3a-logo | boolean | hides t3a logo if value is "false" |
| 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 |
| (soon) library-url | string | link for the "View in library" button |
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
Player will send events to window.gtag (gtag("event", event.type, event)) and window.analytics (analytics.track(event.type, event)) if available
Events sent:
| Event type | Attributes | Fired |
|---|---|---|
| play | type, episodeTitle, currentPlaybackPosition, playbackSpeed | when player starts playing |
| continued-playing | type, episodeTitle, currentPlaybackPosition, playbackSpeed | when player plays without interruption for 30 sec |
| share | type, episodeTitle | when share button is clicked |
| subscribe | type, episodeTitle, url | when subscribe button is clicked |
Custom analytics handler
Player will send the same events to window.t3aAnalytics (window.t3aAnalytics(event.type, event)). If the window.t3aAnalytics is defined and its a function.
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.