Sunday, December 19, 2010

Google's mp3-player with HTML5-fallback for your blogspot-site...

There are already a "dump truck"-load of snazzy mp3-players out there, with all of
the graphical bells-and-whistles plus the necessary (IMO, bloated) HTML-code
needed to copy-and-paste and embed a player on your website - I'm already well
aware of this fact!

But...
Less HTML-code on a site (in general) is always preferable, especially if one wants
to speed up the time it takes for her/his site's to load! Furthermore, Google now also
a site's loading speed as one of the factors in their search ranking algorithms:
http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

Based on my "meager knowledge" of these things and from what I can gather looking
around out on the net, the majority of the embeddable mp3-players out there are
SWF-based; but what if you want - say - iPad-users to listen to your musical output, too?

In this post, I'll show you, how to take an already online mp3-player that requires a
minimum of HTML to work AND add a HTML5-fallback for the iPad-/iPhone-users
out there - in two minutes flat...!

Regarding the mp3-player, we'll be using for this solution, has previously been offline
for some odd reason, but now it's BACK - Google actually has an online mp3-player,
which you can use for your blogspot-page etc., and requires a bare-ass minimum of
code to work - compared with some of the other mp3-player solutions out there, mind.

I'm not going to dissect the code below and write page up and down about it, but trust me:
all of the necessary code you'll be needing - and which you can copy-and-paste into your
own sites HTML-code - looks something like this:
<div>
<object data="http://reader.googleusercontent.com/reader/ui/3523697345-audio-player.swf" type="application/x-shockwave-flash" width="380" height="27">
<param name="src" value="http://reader.googleusercontent.com/reader/ui/3523697345-audio-player.swf" />
<param name="FlashVars" value="audioUrl=URL_PATH_TO_THE_MP3_FILE" />
<audio src=" URL_PATH_TO_THE_MP3_FILE " controls preload="none" style="width:380px;"></audio>
</object>
</div>


Which should generate something like this AFTER you've replaced the string
"PATH_TO_THE_MP3_FILE" with the full URL-address to your mp3-file:


And that's all that is need to embed a mp3-player on your page with a HTML5
fallback for iPad-/iPhone-users out there.

Thanks for reading this...
d.

23 comments:

  1. This is interesting. I wonder if one can include conditional tags for the player and page type and hence show users on an iPhone only Google's mp3 player and users on a desktop only the flash player. Will have to play around with this for a while. Thanks for the info!

    ReplyDelete
  2. When I check this post on my iPhone I don't get the mp3 player but simply a grey long box with a small play icon on it. When I click that icon a new tab opens and the track begins to play. The original mp3 player however does not have any other function. Is there a way to get it working when browsing with an iPhone? I am sure there is but why is Google's mp3 player not working on the iPhone?

    ReplyDelete
  3. @technolux: Google's mp3-player is SWF-based, which might explain why it bombs on your iPhone! ;-)
    However, it should fall back to your iPhones native-player due to the audio-tags placed and used in between the last param-tag and the object-end tag!
    You're more than welcome to hit me up with a proper email-address and we can continue all correspondence there!

    ReplyDelete
  4. Hey Don,
    sorry to get back to you this late, just seen your reply.

    Yes in the meantime I have found out the reason for this being the iOS version of my iPhone being 3.1.3. HTML5 is only supported from 3.2 onwards hence it would not work. However the native player also did not open for some strange reason from the code you have given. This really is strange as in the meantime I have tested this and written two entries about how to get things to run on iDevices under iOS 3.2, specifically for Mix- and Soundcloud. If the direct link to an mp3 is posted somewhere even the older iDevices will play it with Quicktime in Mobile Safari. Tested it on my old iPhone and it does work. Perhaps it did not take the direct link to the mp3 in your code as it is wrapped in the HTML5 structure? Not sure?? Just thought to kind of contribute and help people wanting to use Mix- and Soundcloud on those older iDevices. Anyways, yes an email address would be good, will take care of that in the days to come, hate spam and so far it seems to not many people need to get in touch with me about the stuff I write about, nevertheless I continue as my stats tell me there IS interest, hehe.

    Also Disqus messed up my blog and the "Edit Posts" section inside Blogger pretty badly, would show me double and tripple comments where there were none, wrote to Disqus about it and still waiting for a reply, lost all my followers as I deleted the blog and started over to remove the ghost comments, removed the followers widget as it takes ages to load, but there is still the option to follow in the navbar as well as rss and email updates, but who am I telling this, I wonder??

    Thanks indeed for your reply. Speak soon!!

    ReplyDelete
  5. Hi Dee,

    This post is the answer to all my problems. However I have a problem I can get it to work?

    I have added the explained html and am unable to get it to work on my blog. Is it the template of the blog. A gadget Ive add?

    Please help as this would open up my work to everyone with ipads and iphones.

    How do I make this work. Please please help.

    molmacha@hotmail.co.uk

    http://molmacha.blogspot.com

    Ive added the code to the post below:

    http://molmacha.blogspot.com/2011/04/animals-of-treethorn.html

    ReplyDelete
  6. I add the code to several other post and one or two of the posts loaded the player and started streaming the audio. Which is awesome because I know it will work. However.

    Most came up with the error. ' This movie could not be played'. Thought the problem could be the HTML in my post or the mp3 itself?

    ReplyDelete
  7. Found AudioBoo to be a good alternative to my terrible html skills. However this is a great bit of coding and did work on another blog that I have. Think some of the html in the website I was trying to add it on was corrupt and hindered the code.

    ReplyDelete
  8. Hiya Simon!
    Based your latest comment, I'm assuming that you've figured it all out on your own and are now squared away regarding all or your previous comments! :-D
    If so - GREAT - otherwise, keep posting! :-)
    d.

    ReplyDelete
  9. Very much helpful topic sir,i like that and i want to say that i am totally agree with you.
    Thank you for hosting such a creative weblog.Our selection of MP3 devices will let you take your music wherever you go.Your website happens to be not only informative but also very inventive too

    ReplyDelete
  10. I like the new look of the html5 player. is faster is better and my slow computer with crappy video card will not got slow anymore, nice job you guys!

    ReplyDelete
  11. Excellent pieces. Keep posting such kind of information on your blog. I really impressed by your blog.
    html5 audio player| html5 audio player

    ReplyDelete
  12. This is fantastic and works great however I want to use it in reverse. In other words I want the HTML5 player to show first and then if the browser doesn't support it (Firefox) I want it to fallback to flash. How do I get this done? Thanks.

    ReplyDelete
  13. Interesting one. Keep posting such kind of information on your blog. I bookmarked it for continuous visit.
    html5 audio player| html5 audio player

    ReplyDelete
  14. Thank you for the thoughtful review. The main advantage of youtube html5 playerseems to be for embedding rich media such as audio and video in modern browsers. Although, the structure elements seem to be useful. CSS3 seems to be headed in the right direction, leaving many possibilities for implementation and creativity,

    ReplyDelete
  15. HTML5 and Flash are in two different categories though they share a commonality of enhancing the impact of webpages and/or web apps especially the former. Some of their respective capability may overlap but designers/developers don’t have to know both to be productiveswf to html5 converter

    ReplyDelete
  16. cool demonstration! eventhough HTML5 audio player might not pack all of the features it works well.. it let’s iOS folk hear the mp3, tho the player will launch in a new webpage; and to return to your original page, html5 player

    ReplyDelete
  17. cool demonstration! eventhough HTML5 audio player might not pack all of the features it works well.. it let’s iOS folk hear the mp3, tho the player will launch in a new webpage; and to return to your original page, html5 music player

    ReplyDelete
  18. can you make it autostarting and loop so i can use as background sound?
    thanks

    ReplyDelete
  19. wonderful information, I had come to know about your blog from my friend nandu , hyderabad,i have read atleast 7 posts of yours by now, and let me tell you, your website gives the best and the most interesting information. This is just the kind of information that i had been looking for, i'm already your rss reader now and i would regularly watch out for the new posts, once again hats off to you! Thanks a ton once again, Regards, Html5 online trainingamong the Html5 in Hyderabad. Classroom Training in Hyderabad India

    ReplyDelete
  20. What's up to every one, the contents existing at this site are genuinely awesome for people experience, well, keep up the nice work fellows.
    website design

    ReplyDelete
  21. A wonderful and amazing blog read thanks for sharing!
    Free Ad Posting

    ReplyDelete