Blocco Audio
Lo stesso schema click-through-per-riprodurre del blocco Video, applicato all'audio: un'immagine di anteprima nell'email, un player <audio> nativo sulla vista live ospitata. Episodi podcast, note vocali e brevi clip audio rientrano tutti in questo schema — nulla che un client di posta possa riprodurre in linea, ma qualcosa che la vista live può fare.
Come funziona
La divisione segue esattamente quella di Video: nessun client di posta può riprodurre audio in linea più di quanto possa riprodurre video, quindi anche qui non c'è alcun livello cinetico. L'HTML inviato via email renderizza sempre un'anteprima statica. La tua immagine di copertina, se impostata, viene mostrata come un semplice <img> a piena larghezza racchiuso in un link diretto al file audio. Senza copertina impostata, viene invece renderizzato un riquadro segnaposto: un rettangolo scuro pieno con un glifo ♪ e la descrizione come didascalia. Toccando l'una o l'altra versione si apre direttamente src, e il clic viene tracciato nella mappa di calore dei clic a livello di blocco, come per Video.
La vista live ospitata inserisce invece un vero elemento <audio controls>, guidato dallo stesso segnale di presenza-o-assenza dell'URL di base controllato da ogni emitter con logica lato server condizionale nel codice. L'unico punto in cui Audio differisce davvero da Video: <audio> non ha un attributo poster come invece ha <video>, quindi un'immagine di copertina configurata non può essere associata direttamente all'elemento. Invece, quando è impostata un'immagine di copertina, la vista live la impila come semplice <img> direttamente sopra il player <audio> all'interno di un wrapper condiviso, anziché perdere del tutto l'immagine su quel livello. Il layout — copertina sopra i controlli — rispecchia quello che userebbe un player musicale o podcast. Senza copertina impostata, il player viene renderizzato da solo all'interno del frame stilizzato del blocco.
Il blocco accetta un semplice URL per src — il file lo ospiti tu; MailInApp non memorizza file audio. L'immagine di copertina è diversa: proviene dalla libreria multimediale, quindi l'Ispettore mostra una miniatura e un pulsante Scegli immagine… invece di un campo URL. Un src vuoto significa che il blocco non viene renderizzato affatto, su nessuno dei due livelli.
Campi configurabili:
- URL audio — il file a cui rimanda l'anteprima inviata via email, e il
srcdel player nella vista live. - Immagine di copertina (facoltativa) — l'immagine di anteprima nell'email, e la copertina impilata sopra i controlli nella vista live; scelta dalla tua libreria multimediale.
- Descrizione — usata come didascalia segnaposto (quando non è impostata alcuna copertina) e come
aria-labeldel player nella vista live. - Larghezza (%) — 10–100.
- Colore di sfondo, padding, bordo e raggio del bordo sul frame.
Come Video, Audio è contenuto puro — le riproduzioni non vengono tracciate, solo il click-through in sé, tramite la stessa mappa di calore dei clic a cui contribuisce ogni blocco portatore di link semplice.
Esempi
Subject
New episode: behind the scenes with our team
Un digest podcast settimanale collega l'episodio di quella settimana con la sua copertina come immagine di anteprima, così il render nella posta in arrivo assomiglia a una scheda album/episodio anche se lì non si riproduce nulla direttamente. Un aggiornamento cliente in stile segreteria telefonica (un breve messaggio registrato da un fondatore o da un responsabile assistenza) viene inserito senza alcuna immagine di copertina, affidandosi al semplice riquadro segnaposto e a una descrizione come "Un aggiornamento di 90 secondi dal nostro CEO." Un'email di apprendimento linguistico include una clip di pronuncia per ogni parola di vocabolario, ciascuna come proprio piccolo blocco Audio ridimensionato tramite il campo larghezza in modo che ne stiano comodamente diverse in un'unica email.
Come appare il fallback statico
<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>
Questo è il livello inviato via email: un'immagine di copertina racchiusa in un semplice link al file audio. La vista live renderizza invece un vero elemento <audio controls>, con la stessa immagine di copertina impilata sopra quando ne è impostata una.