With podcasting and music sharing so prevalent online, there’s a great opportunity to enhance your visitors’ experience on your site by embedding audio within your blog posts. Thankfully, WordPress continues to evolve its support for embedding other media types – and mp3 files are one of those that are easy to do!
While displaying a player for a recent interview is great, hosting the actual audio file may not be advisable. Most web hosts for WordPress sites aren’t optimized for streaming media – so don’t be surprised if you begin running into some issues where you hit limits on bandwidth usage or your audio stalls altogether. I’d recommend hosting the actual audio file on an audio streaming service or podcast hosting engine. And… be sure that your host supports SSL (an https:// path)… a blog that’s hosted securely won’t play an audio file that’s not hosted securely elsewhere.
That said, it you know the location of your file, embedding it in a blog post is quite simple. WordPress has its own HTML5 audio player built directly into it so you can use a shortcode to display the player.
Here’s an example from a recent podcast episode I did:
With the latest iteration of the Gutenberg editor in WordPress, I just pasted the audio file path and the editor actually created the shortcode. The actual shortcode follows, where you would replace the src with the full URL of the file you want played.
[audio src="audio-source.mp3"]WordPress supports mp3, m4a, ogg, wav, and wma filetypes. You can even have a shortcode that provides a fallback in the event you have visitors using browsers that don’t support one or the other:
[audio mp3="source.mp3" ogg="source.ogg" wav="source.wav"]You can enhance the shortcode as well with other options:
- loop – an option for looping the audio.
- autoplay – an option for automatically playing the file as soon as it loads.
- preload – an option to preload the audio file with the page.
Put it all together and here’s what you get:
[audio mp3="source.mp3" ogg="source.ogg" wav="source.wav" loop="yes" autoplay="on" preload="auto"]Audio Playlists in WordPress
If you want to have a playlist, WordPress doesn’t currently support external hosting of each of your files to play, but they do offer it if you’re hosting your audio files internally:
[playlist ids="123,456,789"]There are some solutions out there that you can add to your Child Theme that will enable external audio file loading.
Add Your Podcast RSS Feed To Your Sidebar
Using the WordPress player, I wrote a plugin to display your podcast automatically in a sidebar widget. You can read about it here and download the plugin from the WordPress repository.
Customization of the WordPress Audio Player
As you can see by my own site, the MP3 player is pretty basic in WordPress. However, because it’s HTML5, you can dress it up quite a bit using CSS. CSSIgniter has written a great tutorial on customizing the audio player so I won’t repeat it all here… but here are the options you can customize:
/* Player background */
.mytheme-mejs-container.mejs-container,
.mytheme-mejs-container .mejs-controls,
.mytheme-mejs-container .mejs-embed,
.mytheme-mejs-container .mejs-embed body {
background-color: #efefef;
}
/* Player controls */
.mytheme-mejs-container .mejs-button > button {
background-image: url("images/mejs-controls-dark.svg");
}
.mytheme-mejs-container .mejs-time {
color: #888888;
}
/* Progress and audio bars */
/* Progress and audio bar background */
.mytheme-mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-total {
background-color: #fff;
}
/* Track progress bar background (amount of track fully loaded)
We prefer to style these with the main accent color of our theme */
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-loaded {
background-color: rgba(219, 78, 136, 0.075);
}
/* Current track progress and active audio volume level bar */
.mytheme-mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-current {
background: #db4e88;
}
/* Reduce height of the progress and audio bars */
.mytheme-mejs-container .mejs-time-buffering,
.mytheme-mejs-container .mejs-time-current,
.mytheme-mejs-container .mejs-time-float,
.mytheme-mejs-container .mejs-time-float-corner,
.mytheme-mejs-container .mejs-time-float-current,
.mytheme-mejs-container .mejs-time-hovered,
.mytheme-mejs-container .mejs-time-loaded,
.mytheme-mejs-container .mejs-time-marker,
.mytheme-mejs-container .mejs-time-total,
.mytheme-mejs-container .mejs-horizontal-volume-total,
.mytheme-mejs-container .mejs-time-handle-content {
height: 3px;
}
.mytheme-mejs-container .mejs-time-handle-content {
top: -6px;
}
.mytheme-mejs-container .mejs-time-total {
margin-top: 8px;
}
.mytheme-mejs-container .mejs-horizontal-volume-total {
top: 19px;
}Enhance Your WordPress MP3 Player
There are also some paid plugins for displaying your MP3 audio in some absolutely stunning audio players:
- MP3 Sticky Player WordPress Plugin
- Royal Audio Player WordPress Plugin
- HTML5 Audio Players WordPress Plugins Bundle
- Easy Audio Player WordPress Plugin
- Sonaar MP3 Player WordPress Plugin
Disclosure: I’m using my affiliate links for the above plugins via Codecanyon, a fantastic plugin site that has well-supported plugins and outstanding service and support.
