شرح عنصر Audio
في هذا الدرس سوف نتعرف على عنصر Audio ، من خلال هذا العنصر يمكنك إدرج ملفات صوتية فى صفحة الويب بسهولة. كما يمكنك التحكم في إعدادات الملف الصوتى مثل كيف تجعله يشتغل تلقائيا عندما يقوم الزائر بفتح الصفحة مباشرة ، وكيف تقوم بإظهار خيارات الصوت مثل أزرار المشغل وغيره.
| العنصر | الوظيفة | يضاف ضمن |
|---|---|---|
| audio | لتعريف أن هذا العنصر خاص بالصوت | |
| src='#' | لتحديد مسار الملف الصوتى استبدل رمز # بمسار الملف | audio |
| controls | لإظهار المشغل الصوتى فى المتصفح | audio |
| autoplay | لتشغيل الملف الصوتي تلقائيا | audio |
| loop | تكرار الملف الصوتي | audio |
| muted | كتم الصوت تلقائيا | audio |
| preload='auto' | تحميل الملف الصوتي بالكامل عند بداية فتح الموقع | audio |
| preload='metadata' | تحميل بيانات الملف فقط | audio |
| preload='none' | وهو الوضع الافتراضى أى بعد الضغط على زر التشغيل تنتظر لحظات حتى يقوم بتجهيز الملف | audio |
الكود المستخدم
النتيجة
نلاحظ هنا ظهور المشغل لكن بدون أى صوت لأننا لم نقوم بإضافة مسار الملف الصوتي بعدمثال
<audio controls="" src="https://archive.org/download/way2sona_20160320_1800/11.Shokran.Ya.Masr.mp3"></audio>
النتيجة
في المثال التالى تم إضافة ملف صوتي اضغط على زر التشغيلتشغيل الملف تلقائيا مع ظهور المشغل
من خلال استخدام خاصية autoplay ضمن عنصر audio يمكننا جعل الملف الصوتي يشتغل تلقائيا عند فتح صفحة ما النتيجة
اضغط هنا لمشاهدة النتيجةكتم الصوت
من خلال استخدام خاصية muted ضمن عنصر audio يمكننا كتم صوت المشغل تلقائيا أى يكون الوضع الافتراضى للمشغل وعند الضغط على زر التشغيل ، يشتغل الملف بشكل طبيعى ولكن بدون صوت إذا أردت أن تستمع إلى الصوت قم بتحريك مؤشر الصوت. النتيجة
في المثال التالى تم إضافة ملف صوتي اضغط على زر التشغيلتكرار الملف إلى مالا نهاية
من خلال استخدام خاصية autoplay ضمن عنصر audio يمكننا جعل الملف الصوتي يشتغل تلقائيا عند فتح صفحة ما ثم استخدمنا خاصية loop لجعل المشغل يقوم بتكرار الملف إلى مالا نهاية النتيجة
اضغط هنا لمشاهدة النتيجةشكل أخر
في المثال التالى استخدمنا عنصر audio لتعريف أن هذا العنصر خاص بالصوت ثم عنصر controls لإظهار المشغل فى المتصفح ثم استخدمنا عنصر source src لتحديد مسار الملف الصوتي ومن خلال استخدام هذا الكود يمكن إضافة ملف صوتي بصيغة mp3 ثم استخدام نفس العناصر لإضافة نفس الملف ولكن بصيغة أخرى وهي ogg والميزة هنا أنه في حالة عدم العثور على الملف الأول يقوم المشغل بتشغيل الملف الثاني تلقائيا ، في الملف الأول أضفنا رقم 1 في نهاية الرابط فأصبح نهاية الرابط 1141 بدلا من 114 أى أصبح الآن الرابط غير موجود والمشغل يقوم حاليا بتشغيل الملف الثاني وهو نفس لأنه لم يجد الرابط الأول النتيجة
تمارين
- كيف يمكنك إدراج ملف صوتي فى صفحة ما؟ - كيف يتم تشغيل الملف الصوتي تلقائيا عند بداية تحميل الصفحة؟ - كيف يتم تكرار الملف الصوتي تلقائيا إلى ما لا نهاية؟ - كيف يتم تفعيل خاصية كتم الصوت للمشغل تلقائيا عند بداية تحميل الصفحة؟ - هل يمكنك إدراج ملف صوتي يعمل تلقائيا عند بداية تحميل الصفحة مع عدم ظهور المشغل فى الصفحة؟
