I was looking at my website on my tablet, Andy. Andy is an
Android tablet, and didn't play the jukebox on my home page. I took a look at my
blog pages too see if any of them didn't display correctly. The jukebox on my
html5 audio blog played the moment it loaded! So, Andy can play html5 audio.
...and, Andy now plays the jukebox on my home page, but now I have to redesign
my home page, again.
My first stab at letting Andy play the jukebox was to wrap my html5 jukebox in a <div id="nonIE">...<div> and test for Android onload. That code is currently wrapped in <!--[if gt IE 8]>...<![endif]--> so I had to change it to <!--[if (gt IE 8)|(!IE)]>...<![endif]--> and in my onload test if I find a non-Android OS and I don't see 'MSIE' in the test, change the code between the <div> tags to embed Realplayer.
Unfortunately, my idea in the last paragraph didn't work. My original code had <!IE>...<![endif]--> tags with code between them to embed Realplayer. I copied my html5 audio code and replaced the Realplayer code with it. Next, I wrapped the code in <div id="nonIE">...</div> tags and created onload code to change the code between the <div> tags back to Realplayer code, unless it found an Android OS. Take a look at the source code behind index.html too see what I did; without looking at the source code, my description of what I did isn't all that clear.
After you look at my source code you'll see why I need to redesign my home page. I had too replicate my html5 code in two sections. This means that if I add a new song to my juke box I have too add the same code in two places; unacceptable. I'm going to redesign my home page so I don't have too have duplicated code in it, but I was willing to do so in the meantime so I can hear my home page jukebox on Andy (physically it was a really simple process; copy and paste).