{"id":18185,"date":"2011-04-14T21:23:22","date_gmt":"2011-04-14T15:53:22","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=18185"},"modified":"2026-10-13T13:39:35","modified_gmt":"2026-10-13T08:09:35","slug":"google-audio-player-to-embed-mp3-audio-files","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2011\/04\/google-audio-player-to-embed-mp3-audio-files\/","title":{"rendered":"How to Embed MP3 Audio Files in a Web Page (HTML5 and WordPress)"},"content":{"rendered":"<p>How do you <strong>embed MP3<\/strong> 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.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-63454\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/embed-mp3-audio-files.webp\" alt=\"How to embed MP3 audio files in a web page\" width=\"1200\" height=\"630\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/embed-mp3-audio-files.webp 1200w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/embed-mp3-audio-files-300x158.webp 300w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/embed-mp3-audio-files-1024x538.webp 1024w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/embed-mp3-audio-files-150x79.webp 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/embed-mp3-audio-files-768x403.webp 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><strong>Quick answer:<\/strong> Upload your MP3 and add <code>&lt;audio controls src=\"your-file.mp3\"&gt;&lt;\/audio&gt;<\/code> 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.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6aef7e8a724f3\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a202c;color:#1a202c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6aef7e8a724f3\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/04\/google-audio-player-to-embed-mp3-audio-files\/#Embed_MP3_with_the_HTML5_audio_tag\" >Embed MP3 with the HTML5 audio tag<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/04\/google-audio-player-to-embed-mp3-audio-files\/#Embed_MP3_in_WordPress\" >Embed MP3 in WordPress<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/04\/google-audio-player-to-embed-mp3-audio-files\/#Block_editor\" >Block editor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/04\/google-audio-player-to-embed-mp3-audio-files\/#Classic_editor\" >Classic editor<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/04\/google-audio-player-to-embed-mp3-audio-files\/#Where_to_host_your_MP3_files\" >Where to host your MP3 files<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/04\/google-audio-player-to-embed-mp3-audio-files\/#Tips_for_better_audio_embeds\" >Tips for better audio embeds<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/04\/google-audio-player-to-embed-mp3-audio-files\/#What_happened_to_the_Google_audio_player\" >What happened to the Google audio player?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/04\/google-audio-player-to-embed-mp3-audio-files\/#Adding_a_playlist\" >Adding a playlist<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/04\/google-audio-player-to-embed-mp3-audio-files\/#FAQ\" >FAQ<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/04\/google-audio-player-to-embed-mp3-audio-files\/#Can_I_embed_an_MP3_without_a_plugin\" >Can I embed an MP3 without a plugin?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/04\/google-audio-player-to-embed-mp3-audio-files\/#Why_will_my_audio_not_autoplay\" >Why will my audio not autoplay?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/04\/google-audio-player-to-embed-mp3-audio-files\/#Which_audio_formats_work_in_browsers\" >Which audio formats work in browsers?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Embed_MP3_with_the_HTML5_audio_tag\"><\/span>Embed MP3 with the HTML5 audio tag<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<pre><code>&lt;audio controls preload=\"none\"&gt;\r\n  &lt;source src=\"https:\/\/example.com\/audio\/episode-1.mp3\" type=\"audio\/mpeg\"&gt;\r\n  Your browser does not support audio. &lt;a href=\"https:\/\/example.com\/audio\/episode-1.mp3\"&gt;Download the MP3&lt;\/a&gt;.\r\n&lt;\/audio&gt;<\/code><\/pre>\n<ul>\n<li><strong>controls<\/strong> shows the player buttons.<\/li>\n<li><strong>preload=&#8221;none&#8221;<\/strong> stops the browser downloading the file until someone presses play, which keeps your page fast.<\/li>\n<li>Add <strong>loop<\/strong> to repeat, or <strong>muted<\/strong>. Browsers block <strong>autoplay<\/strong> with sound, so do not rely on it.<\/li>\n<li>Make the player full width with CSS: <code>audio { width: 100%; }<\/code><\/li>\n<\/ul>\n<p>Full details are on MDN&#8217;s <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/audio\" target=\"_blank\" rel=\"noopener\">audio element<\/a> reference.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Embed_MP3_in_WordPress\"><\/span>Embed MP3 in WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Block_editor\"><\/span>Block editor<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>Click the plus icon and add an <strong>Audio<\/strong> block.<\/li>\n<li>Upload an MP3, pick one from the Media Library, or paste a URL.<\/li>\n<li>In the block settings, choose autoplay, loop and preload options.<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Classic_editor\"><\/span>Classic editor<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Click Add Media, upload the MP3 and insert it; WordPress adds the audio shortcode. You can also type it yourself:<\/p>\n<pre><code>[audio src=\"https:\/\/example.com\/audio\/episode-1.mp3\"]<\/code><\/pre>\n<p>WordPress shows a consistent, accessible player in every browser.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Where_to_host_your_MP3_files\"><\/span>Where to host your MP3 files<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>Your own site<\/strong> is fine for a few short clips. Large files use bandwidth and storage.<\/li>\n<li><strong>Podcast hosts<\/strong> like <a href=\"https:\/\/www.buzzsprout.com\/\" target=\"_blank\" rel=\"noopener\">Buzzsprout<\/a> or <a href=\"https:\/\/creators.spotify.com\/\" target=\"_blank\" rel=\"noopener\">Spotify for Creators<\/a> host episodes, give embed players and create the RSS feed.<\/li>\n<li><a href=\"https:\/\/soundcloud.com\/\" target=\"_blank\" rel=\"noopener\">SoundCloud<\/a> gives an embeddable player with waveform and sharing.<\/li>\n<li><strong>Cloud storage<\/strong> like Amazon S3 or a CDN works well for many files.<\/li>\n<\/ul>\n<p>Only embed audio you own or have permission to share.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tips_for_better_audio_embeds\"><\/span>Tips for better audio embeds<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>Export speech at 64 to 96 kbps mono MP3 to keep files small; use 128 to 192 kbps for music.<\/li>\n<li>Add a transcript or summary under the player for accessibility and SEO.<\/li>\n<li>Add a download link for listeners who prefer offline playback.<\/li>\n<li>Do not autoplay sound; it annoys visitors and is blocked anyway.<\/li>\n<li>Test the player on mobile, where most of your visitors will hear it.<\/li>\n<\/ul>\n<p>Hosting large media? Keep the rest of your page fast too; see <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2009\/06\/faster-sites-with-google-page-speed\/\">Google PageSpeed Insights<\/a>. And if you need to convert other audio formats to MP3 first, try our list of <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2009\/07\/free-file-format-conversion-online\/\">free online file converters<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"What_happened_to_the_Google_audio_player\"><\/span>What happened to the Google audio player?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>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.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Adding_a_playlist\"><\/span>Adding a playlist<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>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.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"FAQ\"><\/span>FAQ<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Can_I_embed_an_MP3_without_a_plugin\"><\/span>Can I embed an MP3 without a plugin?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes. The HTML5 audio tag works in all modern browsers and in WordPress without any plugin.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Why_will_my_audio_not_autoplay\"><\/span>Why will my audio not autoplay?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Browsers block autoplay with sound until the visitor interacts with the page. Let people press play.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Which_audio_formats_work_in_browsers\"><\/span>Which audio formats work in browsers?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>MP3 plays everywhere. AAC (M4A), Ogg and WAV are also widely supported.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How do you embed MP3 audio files in a web page? In 2011 the easiest trick was to borrow the&#8230;<\/p>\n","protected":false},"author":4,"featured_media":63454,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[],"class_list":["post-18185","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/18185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=18185"}],"version-history":[{"count":3,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/18185\/revisions"}],"predecessor-version":[{"id":65395,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/18185\/revisions\/65395"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/63454"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=18185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=18185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=18185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}