السلام عليكم، سنرى في هذا الدرس طرق إقحام الأوديوهات في ملف HTML، لكن قبل ذلك، سنسلط الضوء على تنسيقات الأوديو المدعومة من طرف متصفحات الإنترنت الأكثر تداولاً من طرف مستعملي الويب.
تنسيقات الأوديو المدعومة من أكبر متصفحات الإنترنت
تنسيقات الأوديو المستعملة في HTML5 هم سبعة : FLAC ، WebM ، MP4 ، OGG ، WAV ، MP3 و ADTS.
يمكنكم الإعتماد على الجدول الذي في هذه الصفحة في معرفة تنسيقات الأوديو المدعومة من طرف أكبر متصفحات الإنترنت، و هي صفحة من ويكيبيديا، و معترف بها حيث يمكنكم تفقد الترخيص أسفل الصفحة، إضافة إلى أن آخر تعديل طُبِّق فيها كان بتاريخ 17 فبراير 2019، أي تحتوي على معلومات تخص أحدث ما يروج في عالم برمجة الأوديوهات على الويب (شرح الجدول يوجد في الفيديو التوضيحي للدرس).
الفيديو التوضيحي للدرس
طريقة إقحام الأوديوهات في ملف HTML
العنصر المسؤول عن إقحام الأوديوهات هو عنصر من نوع Block بإسم 'AUDIO' نسبة إلى كلمة Audio الإنجليزية التي تعني أوديو، و هو عنصر ثنائي الأوسمة، و يقحم داخله عنصر إسمه 'SOURCE' و فقرة نصية.
Attributs العنصر 'AUDIO'
- 'CONTROLS' : هي Attribut عديمة القيمة و ضرورية لعنصر 'AUDIO' حيث هي المسؤولة عن ظهور شريط أدوات التحكم بالأوديو، و بالتالي ظهور الأوديو في الصفحة التي تحتويه.
- 'AUTOPLAY' : هي Attribut عديمة القيمة أيضاً و مسؤولة عن الإشتغال التلقائي للأوديو بعد تحميل الصفحة المحتوية له من قبل متصفح الإنترنت.
- 'LOOP' : هي Attribut عديمة القيمة كذلك و مسؤولة عن إعادة اشتغال الأوديو تلقائياً بعد انتهائه.
- 'MUTED' : هي Attribut عديمة القيمة و مسؤولة عن اشتغال الأوديو بلا صوت، حيث بالإمكان تشغيل صوت الأوديو عبر شريط أدوات التحكم بالأوديو.
- 'TITLE' : هي Attribut مسؤولة عن إعطاء للأوديو عنوان عبر قيمتها حيث إذا وُضِع مؤشر الفأرة فوق الأوديو سيظهر العنوان بخلفية صفراء.
- 'HIDDEN' : هي Attribut عديمة القيمة و مسؤولة عن إخفاء الأوديو من الصفحة التي تحتويه.
العنصر 'SOURCE'
يعتبر العنصر 'SOURCE' عنصراً مهماً في عنصر 'AUDIO' (تطرقنا له في درس الفيديوهات) فهو المسؤول عن تحديد مسار و نوع الأوديو المراد إقحامه، و يتوفر على 2 Attributs إجباريتين وهما :
- 'SRC' : هي المسؤولة عن تحديد مسار الأوديو المراد إقحامه (تطرقنا لهذه الـAttribut في درس الصور حيث يكتب في قيمتها مسار الصورة المراد إقحامها نسبة إلى الملف المحتوي لعنصر إقحامها، كذلك و مثال الفيديوهات و الأوديوهات، و لمن لا يعرف كيفية تحديد المسارات في 'SRC' من المخدِّم الخاص يمكنه الإطلاع على قاعدة المسارات بتفقد أو مراجعة درس الصور في HTML).
- 'TYPE' : هي المسؤولة عن تحديد نوع الأوديو عبر قيمتها، حيث يقحم MIME Type لتنسيق الأوديو (بإمكانكم الإستناد بجدول صفحة ويكيبيديا المذكور أعلاه).
يحبذ إنشاء الأوديو المراد إقحامه بالتنسيقات الأكثر دعماً من متصفحات الإنترنت، ثم إقحام كل تنسيق في عنصر 'SOURCE' خاص به داخل عنصر 'AUDIO' المخصص لإقحامه، و ذلك لدعمه من طرف جميع المتصفحات الكبرى، و بالتالي ضمان سماع الأوديو من جميع الزوار.
الفقرة النصية
يكتب داخل عنصر 'AUDIO' أي بين وسم فتحه و وسم إغلاقه فقرة نصية تظهر مكان الأوديو للزوار الذين يتصفحون بمتصفح إنترنت لا يدعم تقنية الأوديو.
الأكواد المستعملة في هذا الدرس
أتمنى أن تستفيدوا من الدرس