Есть ли способ добавить MP3-плеер на мой сайт, чтобы пользователи iPhone и iPad могли его использовать?

Question

У меня есть сайт www.askvioletnow.com. Я добавил флэш-mp3-плеер, который воспроизводит аудиоклип при переходе на страницу.

Я знаю, что Flash не работает на iPhone OS, но есть ли способ заставить этот тип mp3-плеера работать на iPhone? Я думаю, может быть, mp3-плеер на JavaScript.

В конечном итоге я хотел бы заменить мой флэш-mp3-плеер другим mp3-плеером, чтобы он был доступен на компьютерах под управлением Windows и Mac, а также на устройствах iPhone.

Спасибо заранее.

Answer 1

Вам нужно будет использовать тег <audio> в HTML5 ... также вам нужно изменить тип документа, чтобы он соответствовал.Таким образом, вы можете использовать javascript для распознавания устройств типа Apple и при необходимости переключаться на звуковую метку.

Оберните код для вставки в <div> и присвойте ему идентификатор, скажем mp3, например

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

Затем добавьте JavaScript после div, чтобы позаботиться об Iphone и 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>

Отредактировано : не уверен, работает ли обнаружение iPad, но я добавил его для полноты.

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

Answer 2

Конечно, вы не сможете использовать вспышку. Одним из вариантов является использование HTML5. Вот один из готовых аудиоплееров на базе html5: http://www.happyworm.com/jquery/jplayer/

Вы также можете посмотреть html5 audio tag.

Answer 3

Это простое решение, которое работает для меня. Это JavaScript, который отображает встроенный MP3-плеер HTML5, который нельзя настроить так, чтобы он выглядел для пользователей IOS.

Он отображает флэш-MP3-плеер для всех, кто не является пользователем IOS. Я использовал Google Player, который был прекращен. Вы можете использовать любой MP3-плеер, который вы хотите.

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