Bloque de audio
El mismo patrón de tocar-para-reproducir que el bloque de Video, pero para audio: una imagen de vista previa en el correo, un reproductor <audio> nativo en la vista en vivo alojada. Episodios de podcast, notas de voz y clips de audio cortos encajan todos en esta forma — nada que un cliente de correo pueda reproducir en línea, pero algo que la vista en vivo sí puede.
Cómo funciona
La división sigue exactamente la de Video: ningún cliente de correo puede reproducir audio en línea, así como tampoco puede reproducir video, así que tampoco hay un nivel cinético aquí. El HTML enviado siempre renderiza una vista previa estática. Tu imagen de portada, si está definida, se renderiza como un <img> simple de ancho completo envuelto en un enlace directo al archivo de audio. Sin una portada definida, se renderiza en su lugar una caja de marcador de posición: un rectángulo oscuro sólido con un glifo ♪ y la descripción como su pie de foto. Tocar cualquiera de las dos versiones abre src directamente, y el clic se rastrea en el mapa de calor de clics a nivel de bloque, igual que Video.
La vista en vivo alojada cambia a un elemento <audio controls> real, impulsado por la misma señal de presencia o ausencia de URL base que verifica todo emisor con ramificación de backend en el código. El único lugar donde Audio realmente difiere de Video: <audio> no tiene un atributo poster como sí lo tiene <video>, así que una imagen de portada configurada no puede adjuntarse al elemento en sí. En su lugar, cuando se define una imagen de portada, la vista en vivo la apila como un <img> simple directamente encima del reproductor <audio> dentro de un contenedor compartido, en lugar de perder la imagen por completo en ese nivel. El diseño — carátula encima de los controles — refleja lo que usaría un reproductor de música o podcast. Sin portada definida, el reproductor se renderiza solo dentro del marco con estilo del bloque.
El bloque toma una URL simple para src — la alojas tú; MailInApp no almacena archivos de audio. La imagen de portada es distinta: proviene de la biblioteca multimedia, así que el Inspector muestra una miniatura y un botón Elegir imagen… en lugar de un campo de URL. Un src vacío significa que el bloque no se renderiza en absoluto, en ningún nivel.
Campos configurables:
- URL de audio — el archivo al que enlaza la vista previa enviada, y el
srcdel reproductor de la vista en vivo. - Imagen de portada (opcional) — la imagen de vista previa enviada, y la carátula de la vista en vivo apilada encima de los controles; elegida desde tu biblioteca multimedia.
- Descripción — usada como el pie de foto del marcador de posición (cuando no hay portada definida) y como el
aria-labeldel reproductor de la vista en vivo. - Ancho (%) — 10–100.
- Color de fondo, relleno, borde y radio de borde en el marco.
Al igual que Video, Audio es contenido puro — las reproducciones no se rastrean, solo el propio clic de entrada, a través del mismo mapa de calor de clics que alimenta cualquier bloque simple con enlaces.
Ejemplos
Subject
New episode: behind the scenes with our team
Un resumen semanal de podcast enlaza el episodio de esa semana con su carátula como imagen de vista previa, así el renderizado en la bandeja de entrada luce como una tarjeta de álbum/episodio aunque nada se reproduzca ahí directamente. Una actualización de cliente estilo mensaje de voz (un mensaje corto grabado por un fundador o líder de soporte) se coloca sin ninguna imagen de portada, apoyándose en la caja de marcador de posición simple y una descripción como "Una actualización de 90 segundos de nuestro CEO". Un correo de aprendizaje de idiomas incluye un clip de pronunciación por palabra de vocabulario, cada uno como su propio bloque de Audio pequeño, reducido mediante el campo de ancho para que quepan varios cómodamente en un solo correo.
Cómo se ve la alternativa estática
<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>
Este es el nivel enviado: una imagen de portada envuelta en un enlace simple al archivo de audio. La vista en vivo en cambio renderiza un elemento <audio controls> real, con la misma imagen de portada apilada encima cuando hay una definida.