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 fairly-reliable display of fallback content in other clients makes it a possible addition to any email campaign.
Why add sound to email?
Putting 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:
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.