راهنمای سریع پیاده سازی تگ صوتی HTML5

ارنست دلگادو
Ernest Delgado
X

مرحله 1: شی فلش خود را با تگ صوتی بپیچید

آن دسته از مرورگرهایی که تگ صوتی را نمی شناسند، در عوض محتوای Flash را بارگیری می کنند.

<audio>
</span><span class="old">
    <object class="playerpreview" type="application/x-shockwave-flash"
            data="player_mp3_mini.swf" width="200" height="20">
      <param name="movie" value="player_mp3_mini.swf" />
      <param name="bgcolor" value="#085c68" />
      <param name="FlashVars" value="mp3=test.mp3" />
      <embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
             height="20" name="movie" align=""
             type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
      </embed>
    </object>
</span><span class="new">
</audio>

مرحله 2: منبع منبع را اضافه کنید

ما می‌توانیم به تعداد دلخواه خط‌ها و قالب‌های «منبع» اضافه کنیم. اگر مرورگر از یک فرمت خاص پشتیبانی نکند، به فرمت بعدی و غیره بازگردانده می شود.

<span class="old"><audio></span>
  <span class="new"><source src="test.mp3" type="audio/mpeg" />
  <source src="test.ogg" type="audio/ogg" /></span><span class="old">

  <object class="playerpreview" type="application/x-shockwave-flash"
          data="player_mp3_mini.swf" width="200" height="20">
    <param name="movie" value="player_mp3_mini.swf" />
    <param name="bgcolor" value="#085c68" />
    <param name="FlashVars" value="mp3=test.mp3" />
    <embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
           height="20" name="movie" align=""
           type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
    </embed>
  </object>

</audio></span>

مرحله 3: بازگشت به فلش را اضافه کنید

برای ایمن بودن، باید نسخه بازگشتی را به یک پخش کننده صوتی فلش اضافه کنیم، در صورتی که مرورگر از هیچ یک از فرمت هایی که ما مشخص کردیم پشتیبانی نمی کند. به عنوان مثال، فایرفاکس 3.5 تنها از تگ صوتی با فرمت Ogg پشتیبانی می کند، اما ممکن است فقط فایل mp3 در دسترس باشد.

<span class="old"><audio></span>
<span class="new"><source src="test.mp3" type="audio/mpeg" /></span><span class="old">

<object class="playerpreview" type="application/x-shockwave-flash"
        data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
        height="20" name="movie" align=""
        type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>

</audio>
</span><span class="new">
<div id="player_fallback"></div>
<script>
if (document.createElement('audio').canPlayType) {
if (!document.createElement('audio').canPlayType('audio/mpeg')) {
    swfobject.embedSWF(
    "player_mp3_mini.swf",
    "player_fallback",
    "200",
    "20",
    "9.0.0",
    "",
    {"mp3":"test.mp3"},
    {"bgcolor":"#085c68"});
}
}
</script></span>

برای آسان‌تر کردن کار، از کتابخانه SWFObject برای درج فلش پلیر از طریق جاوا اسکریپت استفاده می‌کنیم. برای گنجاندن کتابخانه، می‌توانید به سادگی از Google AJAX Libraries API استفاده کنید و این دو خط را در هدر خود وارد کنید:

<span class="new"><script src="https://www.google.com/jsapi"></script>
<script>google.load("swfobject", "2.2");</script></span></pre>

مرحله 4: کنترل های پیش فرض را برای نمایش پخش کننده اضافه کنید

این کنترل ها قابل تنظیم نیستند (نمونه ها را در پایان ببینید). از آنجایی که این کنترل‌های پیش‌فرض بدون توجه به فرمت پشتیبانی‌شده نشان داده می‌شوند، باید نمایان بودن آن را با شرطی که قبلا ایجاد کرده‌ایم مدیریت کنیم.

// TODO: DevSite - Code sample removed as it used inline event handlers

از طرف دیگر، می توانید با استفاده از جاوا اسکریپت و CSS پخش کننده خود را ایجاد کنید.

// TODO: DevSite - Code sample removed as it used inline event handlers