خاصية <audio> في لغة HTML تُستخدم لإضافة ملفات صوتية إلى صفحات الويب. هذه الخاصية تسمح للمتصفحات بعرض وتشغيل مجموعة متنوعة من صيغ الصوت. إليك شرح مُفصّل لكيفية استخدامها:

العنصر الأساسي:

العنصر الأساسي لإضافة الصوت هو <audio>. يوضع هذا الوسم بين وسمي الفتح والإغلاق </audio>.

الخصائص الهامة:

  • src: تُستخدم هذه الخاصية داخل الوسم <source> لتحديد مسار ملف الصوت. يمكنك تحديد مسار الملف بشكل مُطلق (مثل: https://www.example.com/audio.mp3) أو بشكل نسبي (مثل: audio.mp3 إذا كان الملف الصوتي في نفس مجلد ملف HTML).
  • controls: تُضيف هذه الخاصية أزرار تحكم افتراضية للتشغيل والإيقاف والتحكم في مستوى الصوت وغيرها. من الضروري إضافتها ليتمكن المستخدم من التحكم في الصوت.
  • autoplay: تُشغّل هذه الخاصية الصوت تلقائيًا بمجرد تحميل الصفحة. يجب استخدامها بحذر لأنها قد تُزعج بعض المستخدمين.
  • loop: تُعيد هذه الخاصية تشغيل الصوت بشكل مُستمر عند انتهائه.
  • muted: تُكتم الصوت افتراضيًا عند تحميل الصفحة. غالبًا ما تُستخدم مع autoplay لتجنب تشغيل الصوت بشكل مُفاجئ.
  • preload: تُحدد هذه الخاصية ما إذا كان يجب تحميل الصوت مُسبقًا أم لا. تأخذ القيم التالية:
    • auto: يُحمّل الصوت بالكامل مُسبقًا إذا سمح المتصفح بذلك.
    • metadata: تُحمّل بيانات الصوت فقط (مثل المدة).
    • none: لا يُحمّل الصوت مُسبقًا.

الوسم <source>:

يُستخدم الوسم <source> داخل الوسم <audio> لتحديد مصادر متعددة للملف الصوتي. هذا مفيد لتوفير صيغ مختلفة للصوت لضمان توافقها مع مُختلف المتصفحات.

مثال:

HTML
<audio controls preload="auto">
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  متصفحك لا يدعم تشغيل الصوت.
</audio>

في هذا المثال:

  • تم استخدام الخاصية controls لإظهار أزرار التحكم.
  • تم استخدام preload="auto" لتحميل الصوت مُسبقًا.
  • تم استخدام الوسمين <source> لتوفير ملفين صوتيين بصيغتي MP3 و OGG.
  • النص "متصفحك لا يدعم تشغيل الصوت." سيظهر في حالة عدم قدرة المتصفح على تشغيل أي من الصيغ المُقدمة.

أنواع الملفات الصوتية المدعومة:

تختلف أنواع الملفات الصوتية المدعومة بين المتصفحات، ولكن الصيغ الأكثر شيوعًا هي:

  • MP3: مدعومة على نطاق واسع.
  • OGG: مدعومة من قِبل مُعظم المتصفحات الحديثة.
  • WAV: مدعومة بشكل جيد، ولكن حجم ملفاتها عادةً ما يكون كبيرًا.

ملاحظات إضافية:

  • من المهم توفير أكثر من صيغة صوتية باستخدام الوسم <source> لضمان توافق الصوت مع مُختلف المتصفحات.
  • يُفضل وضع رسالة نصية داخل الوسم <audio> ليتم عرضها في حالة عدم دعم المتصفح لتشغيل الصوت.

باستخدام هذه المعلومات، يُمكنك الآن إضافة ملفات صوتية إلى صفحات الويب الخاصة بك بسهولة.