How to Embed MP3 Audio Files into Websites & Blogs

If you have an MP3 audio file ( it can be a podcast, a song or a lecture) and you want to share it with the visitors of your site, then we can  just put a link to the MP3. This will allow to people download it easily. However most people want to preview the audio and not wait until it downloads completely. So the best idea to spread the audio content is to embed it in the websites and blogs.

Here are the two ways to embed mp3 audio files in web pages or blog posts.

1. Google Reader MP3 Player

The first way is to use Google Reader MP3 player. This flash based MP3 player offers volume control and minimal branding from Google.

Copy the below code to your web pages or blog posts:

<embed type="application/x-shockwave-flash" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" quality="best" flashvars="audioUrl=MP3link" width="600" height="27"></embed>

You can change the width of the Google audio player to fit your content width and increase the height to 27px. Remember to change MP3link with the link to your mp3 file url. This means the mp3 is hosted on your site or on some mp3 hosting services.

Play the embedded mp3 below. You can also vary the volume!

2. Yahoo! Media Player

Yahoo! Media Player also offering a similar solution. You  have to add a code on your website or blog and then directly post the MP3 links in your articles which when clicked will automatically detect the Yahoo Player Script and display a MP3 Player on your web page which is quite fancy in looks.

Copy the below code to your website or blogs:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

For sites which publishes audio files like songs or podcasts, I would therefore recommend using the Yahoo! Media Player that auto-detects links to MP3 files otherwise Google reader MP3 Player is the best option

1 Response

  1. henry says:

    I agree! But I do consider HTML5 to be more than just the spec that the W3C validator checks your document against. Part of html5 media player involves standards for bolt on technology including web workers, CSS3, server sent events, etc. that are going to (I hope) revolutionize the web and do away with the need for 3rd party browser plugins

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>