Audio player
An audio player that takes the shape of your page
A pill inside a sentence, a slim strip in an article, a portrait card in a narrow column. Pick one of nine skins, keep your artwork and brand, and paste one embed—DynTube streams the audio, the player fits the page you already have.
Member briefing · 12 min listen
What the September rate decision means for small lenders
Listen to the full briefing below, or read the transcript alongside it.
Skin
The default. Artwork, title, a waveform strip and a full transport in one matte card.
Illustration of the player on a customer page — not a live embed
The short answer
What is an embeddable audio player?
An embeddable audio player is a small piece of code you paste into your own page that streams audio from a host and gives listeners play, seek and time controls. With DynTube, the audio is processed into audio-only HLS streams and the player is chosen by skin, so it matches the page it sits on.
The difference from a plain HTML audio tag is everything around the play button: streams that adapt to the listener’s connection, artwork and a waveform, captions or a transcript, access rules, and listening reports—without building any of it yourself.
Nine skins
Which audio player layout fits my page?
Seven horizontal skins for article flow, lists and full-width moments; two vertical skins for narrow columns and mobile-first pages. Each tile shows the anatomy the player actually renders.
Horizontal
07 skins- 01Quarterly briefingSpeech · 12:044:36 / 12:041×Transcript
Card
card- Arrangement
- column
- Artwork
- inline
- Waveform
- strip
- Controls
- standard
- Surface
- matte
- 02Quarterly briefing4:36Transcript
Bar
bar- Arrangement
- row
- Artwork
- hidden
- Waveform
- strip
- Controls
- minimal
- Surface
- none
- 03Quarterly briefingSpeech · 12:04
Compact
compact- Arrangement
- row
- Artwork
- thumb
- Waveform
- hidden
- Controls
- minimal
- Surface
- matte
- 04Quarterly briefingSpeech · 12:044:3612:04
Waveform
waveform- Arrangement
- column
- Artwork
- hidden
- Waveform
- hero
- Controls
- standard
- Surface
- none
- 05Ep 12Quarterly briefingSpeech · 12:04−15+151×
Podcast
podcast- Arrangement
- row
- Artwork
- hero
- Waveform
- strip
- Controls
- full
- Surface
- matte
- No artwork
- → Card
- 06Quarterly briefingSpeech · 12:04−15+154:36
Cinematic
cinematic- Arrangement
- column
- Artwork
- fill
- Waveform
- strip
- Controls
- full
- Surface
- glass
- No artwork
- → Card
- 074:36
Micro
micro- Arrangement
- row
- Artwork
- hidden
- Waveform
- hidden
- Controls
- minimal
- Surface
- matte
Vertical
02 skins · portraitVertical skins reserve a 9:16 frame for narrow columns and mobile-first pages. If an asset has no artwork, Reel falls back to Stack, and Stack draws a designed tonal panel rather than an empty box.
- 08Quarterly briefingSpeech · 12:044:36
Reel
reel- Arrangement
- portrait
- Artwork
- fill
- Waveform
- hero
- Controls
- minimal
- Surface
- none
- No artwork
- → Stack
- 09Ep 12Quarterly briefingSpeech · 12:044:3612:04−15+15
Stack
stack- Arrangement
- portrait
- Artwork
- inline
- Waveform
- strip
- Controls
- full
- Surface
- matte
Illustrations drawn from the player’s skin configuration — not screenshots
Presentation
Artwork, waveform, captions and a transcript—each one a setting
The audio project decides what the player shows, so the embed never promises something the asset does not have.
- Artwork, square or portraitProject or asset
- Set artwork once at the project and override it per recording. Artwork-led skins such as Podcast and Cinematic fall back to Card when an asset has none, so a missing image never leaves an empty frame.
- WaveformProject player setting
- Show a waveform strip, or let the Waveform and Reel skins use it as the seek control. If waveform data is missing, the player promotes a progress bar so there is always a way to seek.
- Captions and lyricsTracks you attach
- Attach caption or lyric tracks and show them as timed text in the player where the project enables captions.
- Transcript panelProject allows it, a track exists
- When the project allows a transcript and the recording has a caption track, listeners can open a transcript panel beside the player. The text loads only when someone opens it.
- Speed and download controlsProject player setting
- Turn the playback-speed control on or off and set a default speed. The download control appears only where the project allows it.
- Brand and presetsWhere your plan includes presets
- Accent, typography and motion inherit from your brand defaults, then a player preset, then the project, then the recording. A preset can carry an audio skin, so switching presets changes the shape of the player too.
Sample data: one audio project’s player settings
- Skin: Card
- Artwork shown, waveform strip on
- Captions on, transcript panel allowed
- Speed control on, download off
One embed
How do I add an audio player to my website?
Four steps, and the first three happen once per project.
- 01
Create an audio project
- 02
Upload a recording
- 03
Add your domains
- 04
Paste the embed
Where it goes
Where an embedded audio player earns its place
Course lessons
Lecture audio inside the lesson, with a transcript panel for revision and a private link for enrolled students.
Articles and briefings
Bar or Micro sit in the reading flow, so a story can be read or heard without leaving the page.
Member and staff areas
Internal updates and training audio behind your own login, embedded only on the domains you list.
Questions
Audio player questions
Direct answers, each within what the player does today.
Can I customise the audio player?
Yes. Choose one of nine skins, set artwork, accent, typography and motion, and switch the waveform, captions, transcript, speed and download controls on or off per project. A recording can override its project where it needs to.
Is there a vertical or mobile audio player?
Yes. Reel and Stack are portrait skins that reserve a 9:16 frame, built for narrow columns and mobile-first pages. Reel uses full-bleed artwork with the waveform as its scrubber; Stack is a vertical card with skip buttons either side of play.
Will the embed work in WordPress or my course platform?
The player is an iframe embed, so it works wherever a page, block or lesson accepts an HTML embed. If you have listed allowed domains, add the site you are embedding on to that list first.
Can listeners read a transcript?
Where the project allows a transcript and the recording has a caption track, listeners can open a transcript panel beside the player. You can attach a track you already have, or request transcription as a separate metered step.
Is the audio player in every plan?
Audio is a plan-gated product, and player presets are a plan feature too. Check the audio limits and features of the plan you are considering on the pricing page rather than assuming them.
Embed one recording and see which skin your page wants
Upload a real file, try three skins on a page you own, and keep the one that looks like it was always there.