Content MarketingMarketing Tools

WordPress: Embed an MP3 Player in Your Blog Post

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, 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 would replace the src with the full URL of the file you want to be 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 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;
}

Enhance Your WordPress MP3 Player

There are also some paid plugins for displaying your MP3 audio in some absolutely stunning audio players:

Disclosure: Martech Zone is using affiliate links for the above plugins including Codecanyon, a fantastic plugin site that has well-supported plugins and outstanding service and support.

Appreciate this content?

Sign up for our weekly newsletter, which delivers our latest posts every Monday morning.

We don’t spam! Read our privacy policy for more info.

Douglas Karr

Douglas Karr is a fractional Chief Marketing Officer specializing in SaaS and AI companies, where he helps scale marketing operations, drive demand generation, and implement AI-powered strategies. He is the founder and publisher of Martech Zone, a leading publication in marketing technology, and a trusted advisor to startups and enterprises alike. With a track record spanning more than $5 billion in MarTech acquisitions and investments, Douglas has led go-to-market strategy, brand positioning, and digital transformation initiatives for companies ranging from early-stage startups to global tech leaders like Dell, GoDaddy, Salesforce, Oracle, and Adobe. A published author of Corporate Blogging for Dummies and contributor to The Better Business Book, Douglas is also a recognized speaker, curriculum developer, and Forbes contributor. A U.S. Navy veteran, he combines strategic leadership with hands-on execution to help organizations achieve measurable growth.

Related Articles

Back to top button
Close

Adblock Detected

We rely on ads and sponsorships to keep Martech Zone free. Please consider disabling your ad blocker—or support us with an affordable, ad-free annual membership ($10 US):

Sign Up For An Annual Membership