The cool thing about websites is our ability to incorporate multi-media content on our pages and posts. When using audio files on your website, there are a few things you should keep in mind for a better user experience.
Just say no to autoplay
I love music as much as the next person, but for the love of all things holy, do not make music (or any other sound) play automatically on your website. This was all the rage in the late 1990s when we all discovered MIDI files and MP3’s were new.
It’s no longer cute. It’s annoying.
Here’s why:
Imagine you’re scrolling the web on your phone while sitting in a quiet waiting room (or maybe at work during a lull), and suddenly, out of no where, music starts playing, loudly. What do you do?
You probably shut that tab as soon as you can!
From a user experience perspective, the last thing we want to do is cause our visitors to flee from our websites. Don’t autoplay audio or video. Ever.
Use the right kinds of audio files
When using sound on your website, you need to use the write file format. MP3 is the preferred format for the internet, as it is widely compatible, and it can be compressed down easily.
Other file formats such as WAV are not universally compatible, and the file sizes are usually huge.
Don’t upload a podcast or large MP3 files to your website
Were you thinking about having your own podcast, and just uploading it to your website? You might want to rethink that plan.
Most of the time, uploading large audio files and hosting podcasts on your website violate the terms of use for your web hosting. Large audio files (or video files) slow down your website and can affect the performance of the server.
Instead, use a service like Anchor.fm to host your podcast or to serve your audio files to your website. You can link the file from that service and embed it on your website without the performance issues.
Some sites where you can host MP3 files include:
- Bunny.net
- Podbean.com
- Audio.com
- Libsyn.com
- Soundcloud.com
Provide a download link
Whenever you have an audio file on your site, even if you’re using an embedded audio player (and you should), make sure to provide the option to download the mp3. Your audience may want the option to listen to it on their own devices without streaming.
Audio players are now native inside of the Gutenberg editor for WordPress. No plugin required. All you need is the link to your file, and WordPress will embed a player.
Compress your MP3’s
Files that are really large make uploading take a while on your end. I used to manage a podcast for a church, and uploading the MP3’s often timed out or failed if the file was too large.
On the user end, your users might experience lags in the audio while streaming, or it might take a while to download the file itself. If they are on mobile data, streaming or downloading might use up too much of their data all at once.
Thankfully, much like our image files, we can adjust the these file sizes too.
Compressing MP3 files involves adjusting the bitrate and frequency in the file, so it is optimized for web streaming. High bitrates increase the file size without improving quality. The recommended settings are:
- Bitrate: 64kbps
- Frequency: 22050Hz (mono)
My favorite tool for editing and optimizing audio is Adobe Audition, which is part of the Adobe suite. Even if you don’t have Audition, there’s a great free tool you can use instead. That’s Audacity, which is a free, open source editor. It’s pretty easy to use, too.
