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 iPho开发者_运维知识库ne 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.

---

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))

---

Certainly you will not be able to use flash. One option is to use HTML5. Here is one of the ready-to-use html5-based audio players: http://www.happyworm.com/jquery/jplayer/

You can also look at html5 audio tag.

---

This is a simple solution that works for me. It is a JavaScript that displays the built in HTML5 MP3 player, which can't be configured to look nice, to IOS users.

It displays a flash MP3 player to everyone who is not an IOS user. I used Google Player, which was discontinued. You can use any MP3 player you want.

<div align="center">

<script type="text/javascript">
<!-- Begin
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)))
{
document.write("<div align=\"center\">");
document.write("<audio controls>");
document.write("<source src=\"http://www.YourDomain.com/MP3/YourFileName.mp3\" type=\"audio/mpeg\">");
document.write("</audio>");
} else {
document.write("<embed type=\"application/x-shockwave-flash\" flashvars=\"audioUrl=http://www.YourDomain.com/MP3/YourFileName.mp3\" src=\"http://www.YourDomain.com/PlayerFolder/3523697345-audio-player.swf\" width=\"300\" height=\"27\" quality=\"best\"></embed>");
} 

//-->
</script>