طريقة إضافة الملفات الصوتية في صفحات HTML باستخدام وسم
<audio>
مرحبًا بكم جميعًا، في هذا الدرس سنتعرف معًا على كيفية إدراج ملفات صوتية داخل صفحات HTML باستخدام الوسوم الخاصة بذلك، مع توضيح خصائص التحكم المختلفة، وطريقة دعم أكثر من صيغة لضمان توافق الملف الصوتي مع جميع المتصفحات.
أولًا: وسم <audio>
لإضافة ملف صوتي في صفحة HTML، نستخدم وسم
<audio>. هذا الوسم يتكون من وسم افتتاحي ووسم
إغلاق، ويجب أن يحتوي بداخله على ملف أو أكثر من ملفات الصوت باستخدام وسم
<source>.
مثال أساسي:
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
</audio>
-
controls: تُستخدم لإظهار عناصر التحكم مثل زر التشغيل، مستوى الصوت، مدة المقطع، وغيرها. -
<source>: يُستخدم لتحديد مصدر الملف الصوتي وصيغته باستخدام الخاصيةtype.
ثانيًا: تحديد أكثر من صيغة للصوت
بعض المتصفحات قد لا تدعم صيغة معينة مثل MP3 أو OGG، لذا يُفضل توفير أكثر من صيغة داخل نفس الوسم لضمان تشغيل الملف بشكل سليم.
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
<source src="sound.ogg" type="audio/ogg">
<source src="sound.wav" type="audio/wav">
المتصفح لا يدعم تشغيل الملفات الصوتية.
</audio>
إذا لم يتمكن المتصفح من تشغيل أي من هذه الصيغ، سيظهر النص الموجود داخل الوسم للمستخدم.
ثالثًا: خصائص وسم <audio>
1. controls
تُظهر واجهة التحكم بالصوت (زر التشغيل، التقديم، مستوى الصوت، إلخ).
2. muted
لتشغيل الصوت في وضع الصامت تلقائيًا:
<audio controls muted>
<source src="sound.mp3" type="audio/mpeg">
</audio>
3. loop
لإعادة تشغيل المقطع الصوتي تلقائيًا عند الانتهاء:
<audio controls loop>
<source src="sound.mp3" type="audio/mpeg">
</audio>
4. autoplay
لتشغيل الملف تلقائيًا بمجرد تحميل الصفحة:
<audio controls autoplay>
<source src="sound.mp3" type="audio/mpeg">
</audio>
ملاحظة: خاصية
autoplayقد لا تعمل في بعض المتصفحات الحديثة إذا لم يكن الصوت في وضع كتم (muted)، وذلك حفاظًا على تجربة المستخدم.
رابعًا: كيفية إدراج الملف الصوتي من نفس مجلد المشروع
إذا كان ملف الصوت محفوظًا داخل نفس مجلد ملف HTML (مثلًا بجوار ملف
index.html)، يكفي كتابة اسمه فقط في الخاصية
src:
<audio controls>
<source src="hors.mp3" type="audio/mpeg">
</audio>
أما إذا كان موجودًا على موقع خارجي، يجب كتابة الرابط الكامل الذي يبدأ بـ
https://.
خامسًا: رسالة بديلة في حالة عدم دعم المتصفح
من الأفضل كتابة رسالة تظهر للمستخدم إذا لم يكن المتصفح يدعم أي من الصيغ الصوتية التي أدرجتها، وذلك لتحسين تجربة المستخدم:
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
<source src="sound.ogg" type="audio/ogg">
<source src="sound.wav" type="audio/wav">
عذرًا، متصفحك لا يدعم تشغيل الملفات الصوتية.
</audio>
سادسًا: تجربة الصوت بعد الإضافة
بعد كتابة الكود وتجهيز الصيغ المختلفة، قم بحفظ الملف ثم افتحه في متصفحك. إذا ظهرت عناصر التحكم وكان بإمكانك تشغيل الصوت، فكل شيء يعمل كما يجب. في حالة لم يظهر الصوت، تأكد من:
-
وجود الملف الصوتي في نفس المجلد.
-
كتابة الاسم والصيغة بشكل صحيح.
-
دعم المتصفح للصيغة المستخدمة.
خاتمة
وبكده نكون اتعرفنا مع بعض على كيفية إضافة الملفات الصوتية داخل صفحات HTML
باستخدام وسم <audio>. شرحنا أيضًا كيفية إدراج
أكثر من صيغة صوتية، وإضافة خصائص مثل controls وmuted
وloop وautoplay، مع وضع رسالة
بديلة للمستخدم في حالة عدم دعم المتصفح.
لو عندك أي سؤال أو واجهتك مشكلة أثناء تطبيق الخطوات، اكتبها في التعليقات، وسأكون سعيد بالرد عليك.