Putting audio in your email is a simple way to create a unique interactive email experience.
All the talk these days is about AMP for email it’s certainly all we have been talking about lately and sure, AMP is the cutting edge of dynamic emails, but you might be interested to know that you can create an interactive email experience today by popping a media player with audio into your emails. A playable audio track is a refreshing change from average email content and doesn’t take much effort to implement.
Imagine it:
- To kick off the weekend in your weekly Friday newsletter your customers hit play to hear a song full of feel good Friday vibes.
- You share a new and interesting podcast episode with your subscribers, or a recording from your most recent webinar.
- Or maybe it’s Monday morning and you offer relief from a full to bursting inbox with a calming rain soundscape.
Your customers will find themselves lingering in your email to enjoy the sweet tunes. The possibilities are endless, and all from within the confines of an email! No clicking through, just clicking play.
How to add audio to your email
Okay you’re sold, but how do you add an audio track to an email? The HTML audio element and it’s partner, the source element. The audio element is the media player and it has the attributes loop, autoplay and controls.
Loop will loop the audio indefinitely.
Controls will display an audio player and before you ask, you can’t control how it looks— that is set by the user’s system or browser.
Autoplay does what it says, but only in the Apple Mail email client. You should avoid using autoplay unless you want people furiously unsubscribing from your emails.
The last requirement is the audio track itself. You will want to host your audio file from your own server, that’s ideal for deliverability. Host your music file then link to it in the source element’s src attribute.
Never worry about Gmail clipping again!
Email Guardrails is an automated checklist that tests your email against best-practices for deliverability and accessibility, that runs behind the scenes for every email you create.
Audio in email code:
That’s it! If your customer is using a supported email client, they will see something like this in the email:
Here it is in a dark mode enabled Apple Mail email client:
You get the idea, it’s a media player but it’s in an email!
How is audio in email supported?
Maybe you saw the fallback text in the code and want to know the hard truth about email client’s support of audio, well here’s the good and the bad news:
- Apple iOS supports the media player
- Apple Mail supports the media player
- Outlook 2016 supports the media player
- Gmail will show the fallback text
- Outlook 2017 and above will show the fallback text
That means over 40% of the email client market share will be able to play your audio track directly in the email without clicking through! You can also freely design your fallback text if you want to make clicking through really desirable for your Gmail and Outlook customers.
Like this:
Here’s the code for a rainy day:
Wrap up
Delivering quality content relevant to your customer is what we are all trying to achieve. It's good for engagement, deliverability, sales, and the soul (probably). Adding a media player with audio into your email is a low effort and high reward way to offer a refreshing auditory experience for your customers.
Just don’t use autoplay. Seriously, we’ve all matured since the 90’s web of auto playing and midi file songs.
Further reading:
