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

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

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

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

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

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

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

 <audio>
  <source src="test.mp3" type="audio/mpeg" />
  <source src="test.ogg" type="audio/ogg" />

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

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

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

<audio>
  <source src="test.mp3" type="audio/mpeg" />
  <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>

<div id="player_fallback"></div>
<script type="application/javascript">
  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>

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

<script src="http://www.google.com/jsapi" type="application/javascript"></script>
<script type="application/javascript">google.load("swfobject", "2.2");</script>

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

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

<audio id="audio_with_controls" controls="controls">
  <source src="test.mp3" type="audio/mpeg" />
  <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>

<div id="player_fallback"></div>
<script type="application/javascript">
  if (document.createElement('audio').canPlayType) {
    if (!document.createElement('audio').canPlayType('audio/mpeg')) {
      ... SWFObject script line here ...
      document.getElementsById('audio_with_controls').style.display = 'none';
    }
  }
</script>

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

<audio id="audio">
  <source src="test.mp3" type="audio/mpeg" />
  <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>

<div id="player_fallback"></div>
<div id="player" style="display: none">
  <button onClick="document.getElementById('audio').play()">Play</button>
  <button onClick="document.getElementById('audio').pause()">Pause</button>
</div>

<script type="application/javascript">
  if (document.createElement('audio').canPlayType) {
    if (!document.createElement('audio').canPlayType('audio/mpeg')) {
      ... SWFObject script lines here ...
    } else { // HTML5 audio + mp3 support
      document.getElementById('player').style.display = 'block';
    }
  }
</script>