How to Embed MP3 Audio Files in a Web Page (HTML5 and WordPress)

How do you embed MP3 audio files in a web page? In 2011 the easiest trick was to borrow the Flash audio player from Google Reader and pass it your MP3 link. That player stopped working when Google Reader closed in 2013, and Flash itself was switched off in all browsers at the end of 2020. The good news: today you need no player at all. Every browser plays MP3 with one line of HTML5. Here is how to embed audio on any site and in WordPress.

How to embed MP3 audio files in a web page

Quick answer: Upload your MP3 and add <audio controls src="your-file.mp3"></audio> to your page. Browsers show a built-in player with play, pause, seek and volume. In WordPress, use the Audio block in the block editor, or the audio shortcode in the classic editor.

Embed MP3 with the HTML5 audio tag

<audio controls preload="none">
  <source src="https://example.com/audio/episode-1.mp3" type="audio/mpeg">
  Your browser does not support audio. <a href="https://example.com/audio/episode-1.mp3">Download the MP3</a>.
</audio>
  • controls shows the player buttons.
  • preload=”none” stops the browser downloading the file until someone presses play, which keeps your page fast.
  • Add loop to repeat, or muted. Browsers block autoplay with sound, so do not rely on it.
  • Make the player full width with CSS: audio { width: 100%; }

Full details are on MDN’s audio element reference.

Embed MP3 in WordPress

Block editor

  1. Click the plus icon and add an Audio block.
  2. Upload an MP3, pick one from the Media Library, or paste a URL.
  3. In the block settings, choose autoplay, loop and preload options.

Classic editor

Click Add Media, upload the MP3 and insert it; WordPress adds the audio shortcode. You can also type it yourself:

[audio src="https://example.com/audio/episode-1.mp3"]

WordPress shows a consistent, accessible player in every browser.

Where to host your MP3 files

  • Your own site is fine for a few short clips. Large files use bandwidth and storage.
  • Podcast hosts like Buzzsprout or Spotify for Creators host episodes, give embed players and create the RSS feed.
  • SoundCloud gives an embeddable player with waveform and sharing.
  • Cloud storage like Amazon S3 or a CDN works well for many files.

Only embed audio you own or have permission to share.

Tips for better audio embeds

  • Export speech at 64 to 96 kbps mono MP3 to keep files small; use 128 to 192 kbps for music.
  • Add a transcript or summary under the player for accessibility and SEO.
  • Add a download link for listeners who prefer offline playback.
  • Do not autoplay sound; it annoys visitors and is blocked anyway.
  • Test the player on mobile, where most of your visitors will hear it.

Hosting large media? Keep the rest of your page fast too; see Google PageSpeed Insights. And if you need to convert other audio formats to MP3 first, try our list of free online file converters.

What happened to the Google audio player?

The Google player was a Flash file built for Google Reader, never an official embed tool. It broke when Google Reader shut down, and all Flash players stopped working after Adobe ended Flash Player at the end of 2020. Sites still using Flash embeds show nothing today and should switch to HTML5 audio.

Adding a playlist

If you have several tracks, such as a podcast series or an album you own, WordPress can show them as a playlist. In the classic editor, choose Add Media, then Create Audio Playlist, select your files and insert. The playlist shows track titles, artwork and a single player that moves through each file in order. In the block editor, add several Audio blocks or use a playlist block plugin. Keep playlists short so the page stays fast on mobile connections.

FAQ

Can I embed an MP3 without a plugin?

Yes. The HTML5 audio tag works in all modern browsers and in WordPress without any plugin.

Why will my audio not autoplay?

Browsers block autoplay with sound until the visitor interacts with the page. Let people press play.

Which audio formats work in browsers?

MP3 plays everywhere. AAC (M4A), Ogg and WAV are also widely supported.

Stuck on a gift? Try our free Gift Idea GeneratorIdeas for anyone by age, job, interests and budget, with Amazon.com and Amazon.in linksFind gifts →

Found this useful? Share it with someone who needs it.

Get our free weekly email: new tech guides and tools, no spam.

New and updated tech guides, a free tool worth bookmarking and one useful pick, once a week. No spam, unsubscribe anytime.

One email a week. Unsubscribe anytime. See our privacy policy.

Related Tech Guides

Leave a Reply

Your email address will not be published. Required fields are marked *

17 Comments

  1. That works very well (and thank you) when browsing from a laptop, but the player is not visible when I view the same page from an iPhone. Maybe it requires Flash or Java?

    1. yes, it requires Flash so this isn’t a great solution for mobile devices.

    1. Why has no body answered this?
      I’ve tried to to insert the google audio player in my google site and nothing appears
      It works when put in my old html site

  2. Its really awesome. And I found it very interesting. Its very effective. Nut I found some problems while tried to use Google Audio Player to Embed the files. I will post the problem soon here. By the way thanks for the post.

  3. How can i edit the player options. like get rid of the volume control, or make the play button smaller??

  4. where do you type in the mpr file path?

    flashvars="audioUrl=MP3link"
    do u put it instead of the MP3link or do u put it in the parentheses

  5. This is totally not working for me and I’m really upset about it. Would it have anything to do with my MP3 being on SoundCloud?

    1. I think any mp3 url which works as a direct link on the web, should work on the Google Audio Player.

  6. Its cool. The most easy thing is it can be used as web page. Its very important feature also. As it give us an opportunity to listen to the musics on the web page. But another fact is obviously it needs higher internet connection.

    1. But this code will work on any webpage. This does not need wordpress.