mailinapp
Documentation menu

Bloc Audio

Le même motif de clic direct pour lire que le bloc Vidéo, pour l'audio : une image d'aperçu dans l'email, un lecteur <audio> natif sur la vue en direct hébergée. Les épisodes de podcast, les notes vocales et les courts extraits audio correspondent tous à cette forme : rien qu'un client de messagerie puisse lire intégré, mais quelque chose que la vue en direct le peut.

Comment ça fonctionne

La séparation suit exactement celle de Vidéo : aucun client de messagerie ne peut lire l'audio intégré, pas plus qu'il ne peut lire la vidéo, donc il n'y a pas non plus de niveau cinétique ici. Le HTML envoyé rend toujours un aperçu statique. Votre image de couverture, si elle est définie, se rend comme un simple <img> pleine largeur enveloppé dans un lien direct vers le fichier audio. Sans couverture définie, un encadré de remplacement se rend à la place : un rectangle sombre uni avec un glyphe ♪ et la description comme légende. Toucher l'une ou l'autre version ouvre src directement, et le clic est suivi dans la carte de chaleur des clics au niveau du bloc, comme pour Vidéo.

La vue en direct hébergée remplace cela par un véritable élément <audio controls>, piloté par le même signal de présence ou d'absence d'URL de base que vérifie chaque émetteur à branchement selon le backend dans le code. Le seul point où Audio diffère véritablement de Vidéo : <audio> n'a pas d'attribut poster comme <video>, donc une image de couverture configurée ne peut pas s'attacher à l'élément lui-même. À la place, quand une image de couverture est définie, la vue en direct l'empile comme un simple <img> directement au-dessus du lecteur <audio> à l'intérieur d'un conteneur partagé, plutôt que de perdre l'image entièrement sur ce niveau. La mise en page — pochette au-dessus des contrôles — reflète ce qu'utiliserait un lecteur de musique ou de podcast. Sans couverture définie, le lecteur se rend seul à l'intérieur du cadre stylisé du bloc.

Le bloc prend une simple URL pour src — à vous de l'héberger ; MailInApp ne stocke pas de fichiers audio. L'image de couverture est différente : elle vient de la bibliothèque de médias, donc l'inspecteur affiche une vignette et un bouton Choisir une image… plutôt qu'un champ URL. Un src vide signifie que le bloc ne se rend pas du tout, sur aucun des deux niveaux.

Champs configurables :

  • URL audio — le fichier vers lequel l'aperçu envoyé crée un lien, et le src du lecteur de la vue en direct.
  • Image de couverture (facultatif) — l'image d'aperçu envoyée, et la pochette de la vue en direct empilée au-dessus des contrôles ; choisie depuis votre bibliothèque de médias.
  • Description — utilisée comme légende de remplacement (quand aucune couverture n'est définie) et comme aria-label du lecteur de la vue en direct.
  • Largeur (%) — 10–100.
  • Couleur de fond, marge intérieure, bordure et rayon de bordure sur le cadre.

Comme Vidéo, Audio est du contenu pur — les lectures ne sont pas suivies, seul le clic direct lui-même, via la même carte de chaleur des clics que nourrit tout bloc porteur de lien simple.

Exemples

Subject

New episode: behind the scenes with our team

Une synthèse hebdomadaire de podcast crée un lien vers l'épisode de la semaine avec sa pochette comme image d'aperçu, si bien que le rendu dans la boîte de réception ressemble à une carte d'album/épisode même si rien ne se lit directement là. Une mise à jour client façon message vocal (un court message enregistré d'un fondateur ou d'un responsable support) est déposée sans aucune image de couverture, s'appuyant sur le simple encadré de remplacement et une description comme « Une mise à jour de 90 secondes de notre PDG ». Un email d'apprentissage des langues inclut un extrait de prononciation par mot de vocabulaire, chacun comme son propre petit bloc Audio réduit via le champ de largeur pour que plusieurs tiennent confortablement dans un même email.

À quoi ressemble l'alternative statique

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

Ceci est le niveau envoyé : une image de couverture enveloppée dans un simple lien vers le fichier audio. La vue en direct rend à la place un véritable élément <audio controls>, avec la même image de couverture empilée au-dessus lorsqu'elle est définie.

Voir aussi