HTMLالوسم <audio>

تعريفه

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

هناك خصائص عديدة يمكن إضافتها لهذين الوسمين و لكن الخصائص التالية هي الأهم و التي لا بد من إضافتها:

• بالنسبة للوسم <audio> نضيف الخاصية controls لإظهار أزرار تحكم في نافذة الملف الصوتي.
• بالنسبة للوسم <source> نضيف الخاصية src لتحديد مسار الملف الصوتي الذي سيتم تشغيله, و الخاصية type لتحديد نوع الملف الصوتي الذي سيتم تشغيله.

معلومة تقنية

أنواع الملفات الصوتية التي يمكن تشغيلها في أغلب المتصفحات هي .mp3 و .wav و .ogg.
نقصد بذلك أن المتصفحات مهيئة للتعامل مع هذه الأنواع بدون الحاجة لأي إضافات.
و في العادة نقوم بوضع أكثر من وسم <source> لوضع نفس الملف الصوتي بأكثر من صيغة لجعل المتصفح يختار أي ملف قادر على تشغيله منهم.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <audio>.

خصائصه

نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.

الخاصية autoplay

يمكن إضافتها للوسم لتحديد ما إن كان سيتم تشغيل الملف الصوتي بشكل تلقائي أم لا.
في حال تم تمرير القيمة true لها فهذا يعني أنه سيتم تشيغل الملف بشكل تلقائي, و في حال تم تمرير القيمة false لها فهذا يعني أنه لن يتم ذلك.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية controls

يمكن إضافتها للوسم لتحديد ما إن كان سيتم إظهار تحكم بالملف الصوتي كتشغيله, إيقافه و تسريعه إلخ.. أم لا.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية loop

يمكن إضافتها للوسم لتحديد ما إن كان الملف الصوتي سيعاد تشغيله بشكل تلقائي كلما وصل إلى النهاية أم لا.
في حال تم تمرير القيمة true لها فهذا يعني أنه سيتم إعادة تشغيله بشكل تلقائي حين يصل للنهاية, و في حال تم تمرير القيمة false لها فهذا يعني أنه لن يتم ذلك.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية muted

يمكن إضافتها للوسم لجعل الملف الصوتي مقطوع الصوت ( Muted ) بمعنى أنه حتى و لو كان شغال فلن يكون الصوت مسموع إلى أنه يتم رفعه بشكل يدوي.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية preload

يمكن إضافتها للوسم لتحديد ما إن كان يجب أن يقوم المتصفح بتحميل الملف الصوتي بشكل تلقائي بمجرد أن تفتح الصفحة حتى و إن لم يرد المستخدم تشغيله أم لا.

• في حال تم تمرير القيمة none لها فهذا يعني أنه لا يجب أن يتم تحميل الملف الصوتي بشكل تلقائي.
• في حال تم تمرير القيمة metadata لها فهذا يعني أنه سيتم تحميل المعلومات الوصفية للملف الصوتي ( Metadata ) مثل مدته.
• في حال تم تمرير القيمة auto لها فهذا يعني أنه قد يتم تحميل الملف الصوتي حتى و إن لم يقم المستخدم بتشغيله.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية src

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

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

إستخدامه

في المثال التالي قمنا بإضافة ملف صوتي في الصفحة مع إظهار أزرار التحكم به.

سبب إضافة وسمين <source> هو أننا قمنا بتجهيز نسختين من نفس الملف الصوتي, الأولى نوعها .mp3 و الثانية نوعها .ogg بهدف جعل المتصفح يحاول تشغيل أول ملف صوتي موضوع, و إن لم ينجح سيحاول تشغيل الملف الصوتي الثاني.

النص Your browser does not support the audio tag! يتم عرضه في الصفحة في حال كان متصفح المستخدم لا يدعم تشغيل الملف الصوتي من الأساس.

جرب الكود

تصميمه الإفتراضي

لا يوجد تصميم إفتراضي له.

نصائح و ملاحظات

يفضل وضع الملف الصوتي بأكثر من صيغة بواسطة الوسم <source> لضمان عمل الملف الصوتي عند المستخدم مهما كان نوع و إصدار المتصفج الذي يستخدمه.