Audio block
The same click-through-to-play pattern as the Video block, for audio: a preview image in email, a native <audio> player on the hosted live view. Podcast episodes, voice notes, and short audio clips all fit this shape — nothing an email client can play inline, but something the live view can.
How it works
The split follows Video's exactly: no email client can play audio inline any more than it can play video, so there's no kinetic tier here either. Mailed HTML always renders a static preview — your cover image, if set, as a plain full-width <img> wrapped in a link straight to the audio file; with no cover set, a placeholder box renders instead, a solid dark rectangle with a ♪ glyph and the description as its caption. Tapping either version opens src directly and the click is tracked in the block-level click heatmap, same as Video.
The hosted live view swaps in a real <audio controls> element, driven by the same base-URL-present-or-absent signal every backend-branching emitter in the codebase checks. The one place Audio genuinely differs from Video: <audio> has no poster attribute the way <video> does, so a configured cover image can't attach to the element itself. Instead, when a cover image is set, the live view stacks it as a plain <img> directly above the <audio> player inside a shared wrapper — cover art above controls, the layout a music or podcast player would use — rather than losing the image entirely on that tier. With no cover set, the player renders alone inside the block's styled frame.
The block takes a plain URL for src — yours to host; MailInApp doesn't store audio files. The cover image is different: it comes from the media library, so the Inspector shows a thumbnail and a Choose image… button rather than a URL box. An empty src means the block doesn't render at all, on either tier.
Configurable fields:
- Audio URL — the file the mailed preview links to, and the live-view player's
src. - Cover image (optional) — the mailed preview image, and the live-view cover art stacked above the controls; picked from your media library.
- Description — used as the placeholder caption (when no cover is set) and the live-view player's
aria-label. - Width (%) — 10–100.
- Background color, padding, border and border radius on the frame.
Like Video, Audio is pure content — plays aren't tracked, only the click-through itself, via the same click heatmap every plain link-bearing block feeds.
Examples
Subject
New episode: behind the scenes with our team
A weekly podcast digest links that week's episode with its cover art as the preview image, so the inbox render looks like an album/episode card even though nothing plays there directly. A voicemail-style customer update (a short recorded message from a founder or support lead) drops in with no cover image at all, relying on the plain placeholder box and a description like "A 90-second update from our CEO." A language-learning email includes a pronunciation clip per vocabulary word, each as its own small Audio block sized down via the width field so several fit comfortably in one email.
What the static fallback looks like
<a href="https://cdn.example.com/episode-42.mp3"
style="display:block">
<div style="box-sizing:border-box;overflow:hidden;width:100%;max-width:100%">
<img src="https://cdn.example.com/episode-42-cover.jpg" alt="Episode 42: Shipping fast"
style="display:block;width:100%;max-width:100%" />
</div>
</a>
This is the mailed tier: a cover image wrapped in a plain link to the audio file. The live view instead renders a real <audio controls> element, with the same cover image stacked above it when one is set.