Using google Mp3 player to play music on your blog/site

Jotted by brajesh on April 23, 2009

Well,there are times when you want to play audio on your blog/website.Recently in one of my project I had to do the same.The client was insisting on using google mp3 player to play mp3 audio on their blog.

well,it was easy and if you have not worked with google mp3 player, you can use the following syntax to play audio files.

<object width="289" height="28" data="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=YOUR_MP3_URL" type="application/x-shockwave-flash">
 
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="playerMode=embedded" />
<param name="src" value="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=YOUR_MP3_URL" />
<param name="wmode" value="window" />
<param name="quality" value="best" />
</object>

You will need to replace YOUR_MP3_URL with the url of your audio mp3 file.
It will make a tiny ,little and cute mp3 player which looks like the following image,available on your site.
Google Mp3 player

Now every thing goes well,until you check your site in IE.It works in firefox,safari,netscape and other browsers but not in IE.When you click on the play button in IE ,IE will show a download dialog for the MP3 file.well,that’s not something we will like to have as we have to keep our self fighting with IE’s quirks.
So,I looked all over the internet to find a solution,instead of finding a solution,I found that almost all web based audio player had same behavior in IE.
After a long battle with the IE ,I finally figured out(well,that was just presence of mind,nothing technical),how to make it work with IE(and the same applies for all other web based audio players to make work in IE).

In order to make the audio player work in IE, you need to rename your mp3 file to some file without extension.For example my-wonderfull-music.mp3 to “my-wonderful-music” [without any extension].Now use the new file url(the file without the extension as the value of audioURL) and it works like a charm.Oh! yes,In IE too.

here is a sample,click play and test in IE too.It will work.You may apply the same rule for other mp3 players too.
A Test music from http://www.sounddogs.com/[well I found it tiny enough to upload here]

So why It worked In IE and what was the reason btw?

IE thinks mp3 extension as something downloadable,so it starts downloading the file and shows file download dialog.To fool Ie ,we have renamed the file and made it with no extension,so now IE does not understands it and lets the player play the audio.that’s it
[blinklist] [Bloglines] [del.icio.us] [Digg] [dzone] [Facebook] [Ma.gnolia] [Mister Wong] [Reddit] [Sphere] [Sphinn] [StumbleUpon] [Technorati] [Email]
If you enjoyed this post, make sure you subscribe to my RSS feed!
Grab my other free plugins here at wordpress Plugins repository.
We will keep coming with more informative tips,tricks,tutorials to keep you updated with wordpress/buddypress/wordpress mu regularly.If you want to help us,You can ,by spreading the words.We provide free and premium plugins/support for wordpress Mu,buddypress at a very low cost (starting with $30 for 3 months membership).If you or anyone you know,needs some real good plugins/themes for their wordpress Mu/buddypress powered site, Please refer them to http://BuddyDev.com.We will highly appreciate your support and keep coming with more useful and free stuffs.

Tags:
Posted in Tutorials, Uncategorized | 14 Comments »


14 Responses to “Using google Mp3 player to play music on your blog/site”

  1. Ruchi says:
    April 23, 2009 at 9:16 pm

    Great Tip ! Specially that renaming file for IE.
    I will definitely give it a try.

    Reply
  2. brajesh says:
    April 24, 2009 at 11:13 am

    hi Ruchi
    Thanks for the comment.Hope you will enjoy the player :)

    Reply
  3. MP3 Music Itunes - Tom Gurney says:
    June 14, 2009 at 9:24 pm

    Its a shame we can’t rely on IE to make things easy!
    I love the idea thoug, and would be perfect for my MP3 site. Thanks, i shall give it a go!

    Reply
  4. maija says:
    June 30, 2009 at 3:19 am

    Thank you for Mp3 player.

    Reply
  5. Annabelle says:
    July 28, 2009 at 9:25 am

    music on my blogg, amazing!!!!!!!!!!

    Reply
  6. Deb Perugi says:
    August 31, 2009 at 8:04 pm

    Your code definitely improved the page. The player shows up on Safari, Firefox (PC) and IE, but the player doesn’t work in IE. Previous to this try, on the pc, I checked the “connect to the internet” from tools/options on the Windows Media player. WIsh I could just place a big sign….do not use IE!

    Reply
    • brajesh says:
      September 1, 2009 at 12:59 pm

      hi Deb,We all developer wish only one thing,IE should Go away,but the fact is,it will remain in use and we can not force users ,so we have to bear with it.
      Can you point me to the site where you used google player,may be I can help.

      Thanks
      Brajesh

      Reply
  7. R Vang says:
    September 9, 2009 at 1:10 am

    Thanks for all the info, it seemed to fix the player,
    but using IE the mp3 still wont play for me =[

    Reply
  8. KE-notes says:
    January 24, 2010 at 10:50 am

    I had the google player previously. However when I opened the media page with IE it came up with the Windows Media Player plugin which didn’t allow to control the player.
    However after seeing this article I added the parts to my code and now it works perfectly, also in IE!

    p.s. the rename without extension didn’t work for me.. but the object part did!

    Reply
  9. Carmen says:
    February 17, 2010 at 2:47 pm

    You are a lifesaver, thank you so much for posting this. I hate IE with a passion, they make things so difficult. I did exactly want you prescribed and it worked perfectly, I had been combing the web for the solution, couldn’t find anything, and as well posted and read many boards. I use Joomla not WordPress, but they both work similar. Many folk have had many a sleepness nights over this. I just had to post my BIG THANKS!!!!! Keep up the Good Work!!!

    Reply
  10. Jacob says:
    February 22, 2010 at 5:19 pm

    Great tip, thank you so much!
    I’ve tested in on 6 browsers – IE, Firefox, Chrome, Opera, Safari and Maxthon (all in Vista), and all work perfectly!

    Reply

Leave a Reply



Get Adobe Flash playerPlugin by wpburn.com wordpress themes