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

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

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

وبدلاً من ذلك، يمكنك إنشاء مشغّل خاص بك باستخدام JavaScript وCSS.

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