mailinapp
Documentation menu

Audio-Block

Dasselbe Klick-durch-zum-Abspielen-Muster wie beim Video-Block, nur für Audio: ein Vorschaubild in der E-Mail, ein nativer <audio>-Player auf der gehosteten Live-Ansicht. Podcast-Episoden, Sprachnotizen und kurze Audioclips passen alle in dieses Schema — nichts, was ein E-Mail-Client inline abspielen kann, aber etwas, das die Live-Ansicht kann.

Wie es funktioniert

Die Aufteilung folgt exakt der von Video: Kein E-Mail-Client kann Audio inline genauso wenig abspielen wie Video, daher gibt es auch hier keine kinetische Stufe. Die versendete E-Mail rendert immer eine statische Vorschau. Ihr Cover-Bild, falls gesetzt, wird als einfaches, in voller Breite dargestelltes <img> angezeigt, eingebettet in einen Link direkt zur Audiodatei. Ist kein Cover-Bild gesetzt, wird stattdessen ein Platzhalter gerendert: ein massives, dunkles Rechteck mit einem ♪-Symbol und der Beschreibung als Bildunterschrift. Ein Tap auf beide Varianten öffnet src direkt, und der Klick wird in der blockbezogenen Klick-Heatmap erfasst, genau wie bei Video.

Die gehostete Live-Ansicht tauscht dies gegen ein echtes <audio controls>-Element aus, gesteuert durch dasselbe Signal „Basis-URL vorhanden oder nicht“, das jeder backend-verzweigende Emitter im Code prüft. Der eine Punkt, an dem sich Audio tatsächlich von Video unterscheidet: <audio> hat kein poster-Attribut wie <video>, sodass ein konfiguriertes Cover-Bild nicht am Element selbst angebracht werden kann. Stattdessen stapelt die Live-Ansicht, wenn ein Cover-Bild gesetzt ist, dieses als einfaches <img> direkt oberhalb des <audio>-Players in einem gemeinsamen Wrapper, statt das Bild auf dieser Stufe ganz zu verlieren. Das Layout — Cover-Bild oberhalb der Bedienelemente — entspricht dem, was ein Musik- oder Podcast-Player verwenden würde. Ist kein Cover-Bild gesetzt, rendert der Player allein innerhalb des gestalteten Rahmens des Blocks.

Der Block nimmt eine einfache URL für src entgegen — Sie hosten sie selbst; MailInApp speichert keine Audiodateien. Das Cover-Bild ist anders: Es stammt aus der Mediathek, daher zeigt der Inspektor eine Miniaturansicht und eine Schaltfläche Bild wählen… statt eines URL-Felds. Ein leeres src bedeutet, dass der Block auf keiner der beiden Stufen gerendert wird.

Konfigurierbare Felder:

  • Audio-URL — die Datei, zu der die versendete Vorschau verlinkt, und src des Live-Ansicht-Players.
  • Cover-Bild (optional) — das versendete Vorschaubild, und das über den Bedienelementen gestapelte Cover-Bild der Live-Ansicht; ausgewählt aus Ihrer Mediathek.
  • Beschreibung — verwendet als Platzhalter-Bildunterschrift (wenn kein Cover-Bild gesetzt ist) und als aria-label des Live-Ansicht-Players.
  • Breite (%) — 10–100.
  • Hintergrundfarbe, Innenabstand, Rahmen und Eckenradius des Rahmens.

Wie Video ist Audio reiner Inhalt — Wiedergaben werden nicht erfasst, nur der Klick-Durchgang selbst, über dieselbe Klick-Heatmap, die jeder einfache linktragende Block speist.

Beispiele

Subject

New episode: behind the scenes with our team

Eine wöchentliche Podcast-Digest-E-Mail verlinkt die Episode der Woche mit ihrem Cover-Bild als Vorschaubild, sodass die Darstellung im Posteingang wie eine Album-/Episodenkarte wirkt, obwohl dort nichts direkt abgespielt wird. Ein voicemail-artiges Kunden-Update (eine kurze aufgezeichnete Nachricht von einer Gründerin oder einem Support-Lead) wird ganz ohne Cover-Bild eingefügt und verlässt sich auf den einfachen Platzhalter und eine Beschreibung wie „Ein 90-sekündiges Update von unserer CEO“. Eine E-Mail zum Sprachenlernen enthält pro Vokabel einen Aussprache-Clip, jeweils als eigener kleiner Audio-Block, über das Breitenfeld verkleinert, sodass mehrere davon bequem in eine E-Mail passen.

So sieht der statische Fallback aus

<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>

Dies ist die versendete Stufe: ein Cover-Bild, eingebettet in einen einfachen Link zur Audiodatei. Die Live-Ansicht rendert stattdessen ein echtes <audio controls>-Element, mit demselben Cover-Bild darüber gestapelt, falls eines gesetzt ist.

Siehe auch