Is there a way to add an MP3 player to my website so that iPhone & iPad users can use it

I have a website www.askvioletnow.com. I added a flash mp3 player that plays a sound clip when you go to the page.

I know Flash doesn't work on the iPhone OS, but is there a way to get this type of mp3 player to work on an iPhone? I'm thinking maybe a javascript mp3 player.

What I would ultimately want is to replace my flash mp3 player with a different mp3 player and have it so the player is available on Windows and Mac computers as well as iPhone devices.

Thanks in advance.

Solution

You will need to use the <audio> tag in HTML5... also you need to change your doctype to match. So you can use javascript to recognize for Apple type devices and switch to the audio tag when necessary.

Wrap your embed in a <div> and give it an id say mp3 like this

<div id="mp3">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','550','height','400','title','Mp3 Player','src','file:///Macintosh HD/Users/phwd/Desktop/mp3player','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','file:///Macintosh HD/Users/phwd/Desktop/mp3player' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="550" height="400" title="Mp3 Player">
    <param name="movie" value="file:///Macintosh HD/Users/phwd/Desktop/mp3player.swf" />
    <param name="quality" value="high" />
    <embed src="file:///Macintosh HD/Users/phwd/Desktop/mp3player.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="550" height="400"></embed>
  </object></noscript>
</div>

Then add some javascript after the div to take care of Iphone and ipods

<p><script type="text/javascript" language="javascript">
<!--
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)))
{
     document.getElementById("mp3").innerHTML = "<audio autoplay=\"autoplay\" controls=\"controls\"><source src=\"mp3player.mp3\" /></audio>";
}
-->
</script></p>

Edited:not sure if the iPad detection works but I added it for completeness.

(navigator.userAgent.match(/iPad/i))