شرح عنصر 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 أى أصبح الآن الرابط غير موجود والمشغل يقوم حاليا بتشغيل الملف الثاني وهو نفس لأنه لم يجد الرابط الأول

النتيجة


تمارين

- كيف يمكنك إدراج ملف صوتي فى صفحة ما؟
- كيف يتم تشغيل الملف الصوتي تلقائيا عند بداية تحميل الصفحة؟
- كيف يتم تكرار الملف الصوتي تلقائيا إلى ما لا نهاية؟
- كيف يتم تفعيل خاصية كتم الصوت للمشغل تلقائيا عند بداية تحميل الصفحة؟
- هل يمكنك إدراج ملف صوتي يعمل تلقائيا عند بداية تحميل الصفحة مع عدم ظهور المشغل فى الصفحة؟