<audio>
وسم الصوت <audio>
وسم audio يشغّل الملفات الصوتية في المتصفح — بودكاست، تلاوات، مؤثرات — مع controls للتحكم.
الشقيق الصوتي لـ video بنفس الفلسفة والخصائص تقريبًا: src أو وسوم source داخلية، وcontrols لواجهة التشغيل، ونفس قاعدة autoplay المشروط بالكتم (وما فائدة صوت مكتوم؟ — لذلك انسَ التشغيل التلقائي للصوت عمليًّا).
صيغة mp3 مدعومة في كل مكان وتكفي وحدها لأغلب الاستخدامات.
الصياغة
<audio src="episode.mp3" controls></audio>
⚡ جرّب بنفسك
عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.
🎨 محرّر HTML/CSS
<p>مقطع تجريبي:</p> <audio controls style="width:100%"> <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mpeg"> متصفحك لا يدعم الصوت. </audio>
النتيجة المباشرة:
أهم الخصائص
| الخاصية | الوظيفة |
|---|---|
| controls | واجهة التشغيل المدمجة — عمليًّا إلزامية للصوت |
| loop | إعادة التشغيل تلقائيًّا — للمؤثرات والخلفيات |
| preload | none / metadata / auto — وفّر بيانات زوارك بـ metadata |
💡 نصائح عملية
- صفحة فيها عدة مقاطع؟ preload="metadata" يجلب المدة فقط دون تنزيل الملفات
- للتحكم البرمجي: play() وpause() من الجافاسكريبت
⚠️ أخطاء شائعة
- صوت خلفية يعمل تلقائيًّا — أسرع طريقة لهروب الزائر، والمتصفحات تمنعه أصلًا
- نسيان controls فلا يظهر للمقطع أي أثر مرئي
وسوم ذات صلة
🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.
📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs