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

النتيجة

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