Audio in email newsletters - are there really sound uses for it?

If we were to create a list of bad email design ideas, adding music to email would probably be up there with using one big image as your email content. However, there are instances when sound in email can not only be used, but used for good.

If you cut your teeth on coding the '90s web, you probably remember things like auto-playing MIDI files with some perverse affection. Ah, the good times, when having the 'X-Files Theme' forced on you was the tell-tale sign that you were indeed visiting a Geocities page.

Well, you'll be pleased to know that you can play (and autoplay) music in HTML email, using the HTML5 <audio> tag. While this technique is only fully supported in Apple and iOS Mail (mind you, that's almost 50% of recorded opens), the faily-reliable display of fallback content in other clients makes it a possible addition to any email campaign.

Why add sound to email?

A music player in iOS MailPutting sarcasm aside for a moment, there may be some pretty valid reasons why one would want to add recorded speech or music to an email newsletter. For example, lets say you're a musician and want to provide your loyal fans with a convenient way to listen to your latest single. Or a language teacher and like providing pronunciation tips to your students. For accessibility reasons, you may want to even feature a spoken version of your message, for those who can't see it.

Keep in mind that streaming music over a mobile data connection may end up being a costly exercise for those on metered plans, so this is certainly not a technique to use lightly.

Make some noise for HTML5!

Before we go headlong into the code, we'd like to point out that while the <audio> tag allows you to embed a media player into an email design, the audio isn't embedded in the email message. Instead, you will have to host and stream the file from your own server.

So lets say we have all this sorted out, adding a player is easy. Simply use the following code:

<audio controls="controls">
	<source src="http://yourdomain.com/widgetwiggle.mp3">
	<p>♫ Listen: <a href="http://yourdomain.com/widgetwiggle.mp3">Widget Wiggle</a> (mp3)</p>
</audio>

In Apple and iOS Mail, you should see an embedded player. Elsewhere, the fallback will be displayed:

Fallback content, as displayed in Outlook

The above snippet can be simply edited and pasted into the <source> view of any multiline editable region in our template editor, which makes things easy if you just want to add an audio file to an article.

Hotmail (and clients that don't support HTML5) won't rock with you

While this technique is fairly benign in most email clients, issues arise in Hotmail, where the controls are disabled, just as they were in our previous HTML5 video tests. Sadly, the Safari browser doesn't let you use the 'right-click to play' trick that we outlined earlier and Firefox doesn't display the player at all.

Likewise, we found that Postbox strips out the <audio> tags and content altogether, perhaps pre-empting the chaos that audio in email could bring. For both clients, your best bet is perhaps to feature a secondary fallback, such as a link to the file in the email copy, so subscribers have something other than the HTML5 audio content to work with.

Putting a stop to autoplay

We've said it before - please don't use autoplay. Yes, it works - even in Hotmail, where a lack of player controls will cause nothing but grief... And unsubscribes. There was a reason why historical tags like <bgsound> were deprecated and that's because everyone strongly dislikes having things play that they can't control.

On a related note, you may be interested in how Facebook uses sound files to track their email campaigns. It's an interesting idea, but not one we'll likely recommend implementing any time soon.

Well, that's the skinny on audio and email. If you try this at home, please do so for the happiness and convenience of humankind. Not to force everyone into reliving the 90's by listening to the X-Files theme.

Is adding audio to email brilliant, or simply a bad idea? Let us know in the comments below.

Posted by Ros Hodgekiss

3 Comments

  • Wordpress Developer
    7th January

    Simply amazing.

    Even if only iOs supports it, its a good news. HTML5 is definetly a game changer.

    I came back to CM blog after a while and I am excited reading so many good blogs and new trends in EDM. Happy );

  • Jarrod
    9th January

    Sound uses… I see what you did there…

    I was playing around with some Movable Ink (http://movableink.com/) aps, one of which is video in email and had it on autoplay. Wanted to kill myself after 5 minutes of trying to find where the music was coming from. No to autoplay (audio at least).

  • Adwords Guru
    13th February

    NO no no please no. The reason you don’t use autoplay is that people don’t want it.. that get irritated.. close it and unsubscribe.. I just think this approach is gimmicky.. whether it will convert in any way is doubtful in my opinion. Think website autoplay sounds and videos.. what do you do? You take every action to shut it off and never visit again.

Got something to add?

Sign up for free.
Then send campaigns for as little as $9/month

Create an account