mailinapp
Documentation menu

Bloco Áudio

O mesmo padrão de clique-para-reproduzir do Bloco Vídeo, para áudio: uma imagem de pré-visualização no e-mail, um player <audio> nativo na visualização ao vivo hospedada. Episódios de podcast, notas de voz e clipes de áudio curtos se encaixam nesse formato — nada que um cliente de e-mail consiga reproduzir embutido, mas algo que a visualização ao vivo consegue.

Como funciona

A divisão segue exatamente a do Vídeo: nenhum cliente de e-mail consegue reproduzir áudio embutido, assim como não consegue reproduzir vídeo, então também não há um nível cinético aqui. O HTML enviado por e-mail sempre renderiza uma pré-visualização estática. Sua imagem de capa, se definida, é exibida como uma simples <img> de largura total envolvida em um link direto para o arquivo de áudio. Sem uma capa definida, uma caixa de espaço reservado é renderizada em vez disso: um retângulo sólido escuro com um glifo ♪ e a descrição como sua legenda. Tocar em qualquer uma das versões abre src diretamente, e o clique é rastreado no mapa de calor de cliques em nível de bloco, assim como no Vídeo.

A visualização ao vivo hospedada troca isso por um elemento <audio controls> real, guiado pelo mesmo sinal de URL-base-presente-ou-ausente que todo emissor com ramificação de backend no código verifica. O único ponto em que Áudio genuinamente difere de Vídeo: <audio> não tem um atributo poster como <video> tem, então uma imagem de capa configurada não pode ser anexada diretamente ao elemento. Em vez disso, quando uma imagem de capa está definida, a visualização ao vivo a empilha como uma <img> simples diretamente acima do player <audio>, dentro de um invólucro compartilhado, em vez de perder a imagem completamente nesse nível. O layout — capa acima dos controles — reflete o que um player de música ou podcast usaria. Sem uma capa definida, o player é renderizado sozinho dentro do quadro estilizado do bloco.

O bloco recebe uma URL simples para src — você mesmo hospeda; o MailInApp não armazena arquivos de áudio. A imagem de capa é diferente: ela vem da biblioteca de mídia, então o Inspetor mostra uma miniatura e um botão Escolher imagem… em vez de uma caixa de URL. Um src vazio significa que o bloco simplesmente não é renderizado, em nenhum dos dois níveis.

Campos configuráveis:

  • URL do áudio — o arquivo para o qual a pré-visualização enviada por e-mail é vinculada, e o src do player da visualização ao vivo.
  • Imagem de capa (opcional) — a imagem de pré-visualização no e-mail, e a arte de capa da visualização ao vivo empilhada acima dos controles; escolhida na sua biblioteca de mídia.
  • Descrição — usada como a legenda do espaço reservado (quando nenhuma capa está definida) e como o aria-label do player da visualização ao vivo.
  • Largura (%) — 10–100.
  • Cor de fundo, espaçamento interno, borda e raio da borda do quadro.

Assim como Vídeo, Áudio é conteúdo puro — reproduções não são rastreadas, apenas o próprio clique, através do mesmo mapa de calor de cliques que todo bloco simples com link alimenta.

Exemplos

Subject

New episode: behind the scenes with our team

Um resumo semanal de podcast vincula o episódio da semana com sua arte de capa como imagem de pré-visualização, para que a renderização na caixa de entrada pareça um cartão de álbum/episódio, mesmo que nada seja reproduzido diretamente ali. Uma atualização de cliente no estilo mensagem de voz (uma breve mensagem gravada de um fundador ou líder de suporte) é enviada sem nenhuma imagem de capa, contando com a caixa de espaço reservado simples e uma descrição como "Uma atualização de 90 segundos do nosso CEO." Um e-mail de aprendizado de idiomas inclui um clipe de pronúncia por palavra do vocabulário, cada um como seu próprio pequeno bloco de Áudio, redimensionado através do campo de largura para que vários caibam confortavelmente em um único e-mail.

Como é o fallback estático

<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 é o nível enviado por e-mail: uma imagem de capa envolvida em um link simples para o arquivo de áudio. A visualização ao vivo, em vez disso, renderiza um elemento <audio controls> real, com a mesma imagem de capa empilhada acima dele quando uma é definida.

Veja também