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.
thx!
ReplyDeleteThis 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!
ReplyDeleteWhen 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@technolux: Google's mp3-player is SWF-based, which might explain why it bombs on your iPhone! ;-)
ReplyDeleteHowever, 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!
Hey Don,
ReplyDeletesorry 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!!
Hi Dee,
ReplyDeleteThis 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
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.
ReplyDeleteMost 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?
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.
ReplyDeleteHiya Simon!
ReplyDeleteBased 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.
Very much helpful topic sir,i like that and i want to say that i am totally agree with you.
ReplyDeleteThank 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
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!
ReplyDeleteThis 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.
ReplyDeleteHTML5 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
ReplyDeletecan you make it autostarting and loop so i can use as background sound?
ReplyDeletethanks
awesome thanks!
ReplyDeleteWhat's up to every one, the contents existing at this site are genuinely awesome for people experience, well, keep up the nice work fellows.
ReplyDeletewebsite design
A wonderful and amazing blog read thanks for sharing!
ReplyDeleteFree Ad Posting