音声ブロック

動画ブロックと同じ、クリックして再生するパターンの音声版です: メールではプレビュー画像を、ホスティングされたライブビューではネイティブの<audio>プレイヤーを表示します。ポッドキャストのエピソード、音声メモ、短い音声クリップはいずれもこの形に当てはまります — メールクライアントがインラインで再生できるものは何もありませんが、ライブビューでは再生できます。

仕組み

この分岐は動画ブロックと全く同じです: メールクライアントは動画を再生できないのと同様に音声もインラインで再生できないため、ここにもキネティックティアはありません。メール送信されるHTMLは常に静止画のプレビューをレンダリングします。カバー画像を設定していれば、音声ファイルへ直接リンクされた単純な全幅の<img>としてレンダリングされます。カバーが設定されていない場合は、代わりにプレースホルダーのボックスがレンダリングされます: ♪のグリフと、キャプションとしての説明文が付いた単色の暗い矩形です。どちらのバージョンをタップしてもsrcが直接開かれ、動画ブロックと同様にクリックはブロック単位のクリックヒートマップで追跡されます。

ホスティングされたライブビューでは、コードベース内のバックエンド分岐を行うすべてのエミッターが確認しているのと同じ、ベースURLの有無という信号によって、本物の<audio controls>要素に切り替わります。音声ブロックが動画ブロックと本当に異なる唯一の点はここです: <audio>には<video>のようなposter属性がないため、設定したカバー画像を要素自体に付けることができません。代わりに、カバー画像が設定されている場合、ライブビューはそのティアで画像を完全に失う代わりに、共有のラッパーの中で<audio>プレイヤーの直上に単純な<img>として積み重ねます。このレイアウト — コントロールの上にカバーアート — は、音楽やポッドキャストのプレイヤーが使うものを反映しています。カバーが設定されていない場合、プレイヤーはブロックのスタイル付きフレームの中に単独でレンダリングされます。

このブロックはsrcに単純なURLを受け取ります — 自分でホスティングするものです。MailInAppは音声ファイルを保存しません。カバー画像は異なります: メディアライブラリから取得されるため、インスペクターにはURLボックスの代わりにサムネイルと**画像を選択…**ボタンが表示されます。srcが空の場合、ブロックはどちらのティアでも一切レンダリングされません。

設定可能なフィールド:

• 音声URL — メールのプレビューがリンクするファイルであり、ライブビューのプレイヤーのsrcでもあります。
• カバー画像(任意) — メールのプレビュー画像であり、ライブビューではコントロールの上に積み重ねられるカバーアートです。メディアライブラリから選択します。
• 説明 — (カバーが設定されていない場合の)プレースホルダーのキャプション、およびライブビューのプレイヤーのaria-labelとして使われます。
• 幅(%) — 10〜100。
• フレーム全体の背景色、パディング、枠線、角丸。

動画ブロックと同様に、音声も純粋なコンテンツです — 再生は追跡されず、リンクを持つ通常のブロックがすべて反映する同じクリックヒートマップを通じて、クリックスルー自体だけが追跡されます。

例

週次のポッドキャストダイジェストでは、その週のエピソードをカバーアートと共にプレビュー画像としてリンクするため、受信トレイでのレンダリングはアルバム/エピソードのカードのように見えますが、そこで直接何かが再生されるわけではありません。ボイスメール風の顧客向け更新情報(創業者やサポート担当からの短い録音メッセージ)では、カバー画像を一切設定せず、プレーンなプレースホルダーボックスと「CEOからの90秒の最新情報」のような説明文に頼ります。語学学習メールでは、単語ごとに発音クリップを含め、それぞれを幅フィールドで小さくサイズ調整した独自の音声ブロックとすることで、1つのメールに複数を無理なく収めます。

静的フォールバックの見え方

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

これがメール送信されるティアです: 音声ファイルへの単純なリンクに包まれたカバー画像です。ライブビューでは代わりに本物の<audio controls>要素がレンダリングされ、カバー画像が設定されている場合は同じ画像がその上に積み重ねられます。

関連ページ

• ブロックリファレンス概要
• 動画ブロック
• ライブビュー
• インタラクションと分析