mailinapp
Documentation menu

音频模块

与视频模块相同的"点击后才能播放"模式,只是换成了音频:邮件中是一张预览图,托管的实时预览中则是原生的 <audio> 播放器。播客单集、语音留言和短音频片段都适合这种形式——邮件客户端无法内联播放它们,但实时预览可以。

工作原理

这套拆分逻辑与视频模块完全一致:没有任何邮件客户端能内联播放音频,正如它们无法内联播放视频一样,因此这里同样没有动态层级。已发送的 HTML 始终渲染一张静态预览图。如果你设置了封面图,它会渲染为一张普通的全宽 <img>,并被包裹在一个直接指向音频文件的链接中。如果没有设置封面图,则会改为渲染一个占位框:一个带有 ♪ 图标和描述文字作为说明的深色实心矩形。点击任意一种版本都会直接打开 src,点击会被记录在模块级点击热力图中,与视频模块相同。

托管的实时预览会替换为一个真正的 <audio controls>元素,由代码库中每个存在前后端分支渲染的组件都会检查的同一个"是否存在基础 URL"信号来驱动。音频模块与视频模块真正不同的一点在于:<audio> 不像 <video> 那样拥有 poster 属性,因此设置好的封面图无法直接绑定到该元素本身。取而代之的是,当设置了封面图时,实时预览会把它作为一张普通的 <img> 堆叠在共享容器内 <audio> 播放器的正上方,而不是在这一层级完全丢失该图片。这种"封面图在上、控件在下"的布局,呼应的是音乐或播客播放器的常见样式。如果没有设置封面图,播放器则单独渲染在该模块自带的样式框内。

该模块的 src 字段接受一个普通 URL——由你自行托管;MailInApp 不存储音频文件本身。封面图则不同:它取自媒体库,因此检查器中显示的是一张缩略图和一个**选择图片…**按钮,而不是 URL 输入框。src 为空时,该模块在任何层级都不会渲染。

可配置字段:

  • 音频 URL——已发送邮件中预览图所链接到的文件,同时也是实时预览播放器的 src。
  • 封面图(可选)——已发送邮件中的预览图,以及实时预览中堆叠在控件上方的封面美术图;从你的媒体库中选取。
  • 描述——在未设置封面图时用作占位框的说明文字,同时也是实时预览播放器的 aria-label。
  • 宽度(%)——10–100。
  • 播放框的背景色、内边距、边框和圆角半径。

与视频模块一样,音频模块是纯内容模块——播放行为不会被记录,只有点击跳转本身会被记录,走的是所有承载普通链接的模块共用的同一套点击热力图。

示例

Subject

New episode: behind the scenes with our team

一封每周播客摘要邮件可以把当周单集连同它的封面美术图作为预览图一起链接进来,这样收件箱中的渲染效果就像一张专辑/单集卡片,即便什么都不会在那里直接播放。一封语音留言风格的客户更新邮件(创始人或支持负责人录制的一段简短消息)可以完全不设置封面图,直接依靠普通的占位框和一段类似"来自我们 CEO 的 90 秒更新"的描述文字。一封语言学习邮件可以为每个词汇附上一个发音片段,每个都是一个独立的小型音频模块,通过宽度字段缩小尺寸,以便一封邮件中能舒适地容纳好几个。

静态回退效果是什么样子

<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>元素,并在设置了封面图时把同一张图堆叠在其上方。

相关内容