NOTICE

Use with care. The misuse of the techniques explained in this article, especially the ones from the last section, can lead to verbal and even physical abuse. The author can neither control nor predict the reaction your audience will have and therefore will not be held liable for any harm that may come to you by improper use.

Introduction

We’re going to add audio files to an email. Audio in webpages isn’t new, it has been around for a while, and although I can think of some valid use-cases 1, it’s mostly used as some sort of a gimmick, which - at best - gets a mixed response from the general audience. But like I said, there are situations where adding sound really enhances the experience and the same is true for email.

How?

Now, how does one fashion an email that plays audio? Well the answer to that question is rather straightforward: we’ll use the html5 audio tag with a hosted audio file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>Soundcheck</title>

    <style type="text/css">
    </style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
    <!-- MAIN CONTENT -->
    <tr>
        <td width="100%" valign="top" align="left">
            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#000000;">
                <tr>
                    <td width="100%" valign="top" align="center">
                        <table width="650" cellpadding="0" cellspacing="0" border="0" class="table__container">
                            <tr>
                                <td width="100%" valign="top" align="center">
                                    <img src="img/fire.gif" alt="" width="100%" class="image--full-width">
                                </td>
                            </tr>
                            <tr>
                                <td width="100%" valign="top" align="center" style="text: #ffffff;">
                                    <audio controls autoplay src="http://mailings.kunstmaan.be/assets/sound.mp3">
                                        Your browser does not support the audio element.
                                    </audio>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>
Options

Autoplay

Autoplay works, but I don’t recommend using it, since people generally find websites that do use this annoying. Would you like to have your playlist interrupted by something you didn’t approve? I wouldn’t either, so I’m guessing people would react negatively to such emails.

However, if you’re just adding a short sound effect that doesn’t loop, and solely aims to get the attention I think you can get away with it.

Controls

I would definitely add them if you’re using loops or longer audio files, so people can choose whether they want to play or not and when they’ve had enough.

Support?

Support is, as one might expect, not that widespread: it’ll work in Apple Mail (both mobile and desktop) and that’s about it. There’s no graceful degradation / fallback for clients that don’t support it for the simple reason that there’s nothing to gracefully degrade to. Clients that don’t have support, get nothing, which isn’t that big of a problem because people will still see the mail. It’s important to know however, that not everyone will hear your audio files. This implies that you have to know the usage percentage of email clients of your audience. It’s basically not a good idea to provide crucial information through audio files, given that not everyone will hear them.

I wouldn’t recommend adding audio to every mail you send out, but it can definitely add an extra layer of experience when used in the correct context, backed by a good concept.

But wait, there's more

We’ve added audio to an email, great, but why stop there? Since email signatures can be coded in html, there’s no reason we can’t use the audio tag, right? Right. This can only be done if you’re using Apple Mail to send your emails though, because the audio tag isn’t supported in other clients (except for outlook.com).

You start by making an html file with all the stuff you want in your signature.

<table width="100%" cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
    <!-- MAIN CONTENT -->
    <tr>
        <td width="100%" valign="top" align="left" style="padding-top: 10px; font-family: Helvetica, Arial; font-size: 12px; font-weight: bold;">
            Kevin Fiv&eacute;
        </td>
    </tr>
    <tr>
        <td width="100%" valign="top" align="left" style="padding-bottom: 10px; font-family: Helvetica, Arial; font-size: 12px;">
            Web Developer
        </td>
    </tr>
    <tr>
        <td width="100%" valign="top" align="left" style="padding-top: 10px; padding-bottom: 10px;">
            <img src="http://mailings.kunstmaan.be/assets/kunstmaan.png" alt="" style="display: block; border: none;">
        </td>
    </tr>
    <tr>
        <td width="100%" valign="top" align="left" style="padding-top: 10px; font-family: Helvetica, Arial; font-size: 12px;">
            Philipssite 5, bus 10 | B-3001 Leuven <br>
            T +32 16 300 780 | F +32 16 3 <br>
            <a href="www.kunstmaan.be">www.kunstmaan.be</a>
        </td>
    </tr>
    <tr>
        <td>
            <audio autoplay src="http://mailings.kunstmaan.be/assets/strong_the_darkside_is.mp3">
            </audio>
        </td>
    </tr>
</table>

Note: Don’t use html, body or head tags and only use inline css.

Next: open up Apple Mail and make a new signature for your account.

Note: The content doesn’t really matter because it’s going to be replaced with the html file we made in the first step.

When you’ve done this, close the Preferences window to save and then quit Apple Mail.


Next we need to locate the new signature file so open up terminal.

This location can be in one of 4 places, depending on how or if you use iCloud to sync your files and settings.

Using iCloud drive:

~/Library/Mobile\ Documents/com~apple~Mail/Data/MailData/Signatures/

Not using iCloud drive but using iCloud:

~/Library/Mobile\ Documents/Mail/Data/MailData/Signatures/

Not using iCloud:

~/Library/Mail/V2/MailData/Signatures/

~/Library/Mail/V3/MailData/Signatures/

When you locate the correct folder, you should see a list of the used signatures, the ones we’re looking for start with ubiquitos_ and end with .mailsignature. These folders and files are hidden by default, but you can navigate to them using the terminal. Once you’ve found the correct directory type open . in your terminal window, which will open a new finder window. Next open the signature file in your text editor, it’s normally the last created file. Which will give you something looking like this:

Keep the top meta lines and replace the html with the html you created in the html file from step one, save and close.

If you’re using iCloud or iCloud drive you can skip this step. In the finder window we’ve opened with terminal, locate your adjusted signature file, and bring up the info pane (cmd + i), when opened, tick the locked checkbox.

Open your Preferences in Apple Mail and the placeholder signature we  created in the second step should be replaced by your custom html.

Note: If you’re using images they’ll appear broken in the preview, they will however be visible in the actual signature when you send an email, if the location is valid.

Now you can send an email to yourself using this signature for testing purposes.

Sources
Written by

Kevin Fivé

Frontend developer

Follow @_fvkvn