WordPress: Embed an MP3 Player in Your Blog Post

Jan 11, 2021

3 minutes read

With podcasting and music sharing so prevalent online, there’s an excellent 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 excellent, 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 start encountering issues like hitting bandwidth usage limits or your audio stalling 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, if 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 should replace the src with the full URL of the file you want to play.

[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 you can add to your site to enable external audio file loading.

Customization of the WordPress Audio Player

As you can see from 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;
}