دليل سريع لتنفيذ علامة صوت HTML5

Ernest Delgado
Ernest Delgado
X

الخطوة 1: لفّ عنصر Flash بعلامة الصوت

أما المتصفحات التي لا تتعرّف على علامة الصوت، فستحمّل محتوى 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: إضافة عنصر احتياطي إلى Flash

لضمان أمان المحتوى، يجب إضافة عنصر احتياطي لمشغل صوت Flash، في حال عدم توافق المتصفّح مع أي من التنسيقات التي حدّدناها. على سبيل المثال، لا يتيح Firefox 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 لإدراج مشغّل Flash من خلال JavaScript. لتضمين المكتبة، يمكنك ببساطة استخدام 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>

بدلاً من ذلك، يمكنك إنشاء مشغّل خاص بك باستخدام JavaScript و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>