الصوت في HTML
علّمتك جلسة video استضافة الصور المتحركة. الصوت هو ابن العمّ بلا صورة: بودكاست وملاحظات صوتية ومقدمات درس وتأثيرات قصيرة. العنصر هو audio. ابدأ بـ controls ليضغط الزائر تشغيلًا بنفسه — نفس أدب video — بلا إطار poster أو صندوق فيديو محجوز. شريط تحكم نحيف يجلب ملفًا من مجلد media ويبقي التخطيط أهدأ من مقطع كامل.
ماذا يفعل audio؟
يطلب audio من المتصفح جلب ملف صوت وعرض مشغّل مضغوط. يمكنك تعيين ملف واحد بـ src أو سرد عدة أبناء <source> ليختار المتصفح تنسيقًا يفهمه. لا توجد لوحة مرئية مثل video؛ الواجهة عادة شريط تحكم عند وجود controls. الخط الزمني وكتم الصوت ومستوى الصوت ما زالت مهمة لأن الصوت يقطع غرفة هادئة بقوة الفيديو الصاخب. عامل المشغّل أداة يشغّلها الزائر لا خلفية تبدأ وحدها.
إجابة مباشرة
اكتب <audio controls src="sound.mp3"> أو ضمّن عدة وسوم <source> لتنسيقات مثل MP3 وOgg. أدرج نصًا احتياطيًا قصيرًا (وربما رابط تنزيل) داخل العنصر. فضّل ملفات مضغوطة مناسبة للويب. تجنّب التشغيل التلقائي المفاجئ بالصوت. عندما يعلّم المقطع بالكلام، خطّط لنص مكتوب أو ملاحظات واضحة بجانب المشغّل.
تنسيقات يراها المبتدئ
لا تفضّل كل المتصفحات نفس الترميز. يبدأ المبتدئون عادة بـ MP3 ثم يضيفون Ogg مرشحًا ثانيًا. ملفات WAV جيدة للتحرير محليًا لكنها غالبًا كبيرة كنسخة ويب وحيدة. الجدول أدناه خريطة عملية للبداية — لا موسوعة ترميز كاملة.
📊 أنواع صوت شائعة
| Type hint | Typical file | Beginner note |
|---|---|---|
| audio/mpeg | .mp3 | تنسيق بداية واسع الفائدة |
| audio/ogg | .ogg | مصدر ثانٍ مفيد لتغطية أوسع |
| audio/wav | .wav | غالبًا كبير؛ اضغط للويب متى أمكن |
صوت بسيط مع controls
ملف MP3 قصير مع controls يكفي لصفحات تمرين كثيرة. ضع الملف تحت مجلد متوقع مثل media/ وتحقق من المسار كما تتحقق من روابط الصور. إذا ظهر الشريط ولم يعمل التشغيل، افتح أدوات المطوّر أو جرّب عنوان الملف مباشرة — المسارات المعطوبة تفشل بصمت.
Simple audio
html<audio controls src="media/hello.mp3">
Your browser does not support audio.
</audio>قراءة العينة البسيطة
controlsيعرض التشغيل والإيقاف والبحث وغالبًا مستوى الصوتsrcيشير إلى ملف الصوت نسبةً للصفحة (هنا تحتmedia/)- النص الداخلي احتياطي عندما لا يعمل العنصر
- لا يوجد
posterهنا — ذلك لـvideo - لا تحتاج عادةً
widthلشريط صوت بسيط كما في الفيديو
مصادر متعددة ورابط تنزيل
سرد Ogg وMP3 مع قيم MIME في type يزيد فرصة إيجاد مرشح قابل للتشغيل. الترتيب مهم: يمشي المتصفح القائمة حتى يجد ما يفكّه. رابط التنزيل يساعد عند فشل التشغيل أو عند الرغبة بالحفظ. أبقِ نفس محتوى الدرس في كل ملف عند تصدير تنسيقين.
Multiple audio sources
html<audio controls>
<source src="media/hello.ogg" type="audio/ogg">
<source src="media/hello.mp3" type="audio/mpeg">
Download <a href="media/hello.mp3">hello.mp3</a>
</audio>قراءة عينة المصادر المتعددة
- تُجرَّب المصادر بالترتيب حتى يجد المتصفح ما يشغّله
typeيساعد على تخطي التنسيقات غير المدعومة بسرعة- رابط التنزيل محتوى احتياطي بشري داخل
audio - أبقِ الأسماء والمجلدات دقيقة — خطأ إملائي في
srcيبدو كمشغّل معطوب - ما زال بإمكانك نسخة
srcواحدة لعروض صغيرة؛ المصادر المتعددة ترقية ثبات
احترام الآذان وعرض النطاق
التشغيل التلقائي للصوت بلا فعل واضح من المستخدم غالبًا يُحظر وعادةً غير مهذب. غياب controls يترك الزائر بلا إيقاف محترم. ملف WAV غير مضغوط لدقائق يهدر بيانات الجوال عندما يكفي MP3 مضغوط. صدّر صوتًا بحجم الويب كما تصدّر فيديو الويب. موسيقى الخلفية لاحقًا قرار تصميم منفصل بالموافقة وكتم الصوت — لا الافتراضي لدرس مبتدئ.
النص المكتوب عندما يعلّم الكلام
إذا شرح المقطع مفهومًا بالكلمات، خطّط لنص أو ملاحظات واضحة في الصفحة. audio لا يستخدم alt كما يفعل img. إمكانية الوصول للكلام تعني بدائل نصية وعناوين واضحة بجانب المشغّل وتحكم المستخدم — لا صورة poster. حتى فقرة قصيرة تعيد صياغة التلميح المنطوق تساعد من لا يستطيع الاستماع الآن.
الصوت مقابل video مقابل التضمين
- ملف صوت مستضاف ذاتيًا →
audio - مقطع مستضاف ذاتيًا بصورة →
video - صفحة مشغّل من موقع آخر → غالبًا
iframe(درس لاحق لتضمينات مثل YouTube)
لا تضع بودكاست داخلvideoلأنك رأيت التحكم هناك أولًا. لا تلف MP3 محليًا في iframe عندما يكفيaudio. طابق العنصر بنوع الوسائط.
تمرين في المحرر
- أضف
.mp3قصيرًا تحتmedia/(عشر إلى ثلاثين ثانية كافية). - ضمّنه بـ
audio controlsومسار نسبي صحيح. - شغّل وأوقف وابحث وعدّل الصوت بواجهة المتصفح.
- اختياريًا أضف نوع
sourceثانيًا ورابط تنزيل. - اكتب جملة نص أو ملاحظات درس بجانب المشغّل إن تكلّم المقطع.
- تأكد أن الصفحة ما زالت مفهومة إن لم يضغط أحد تشغيلًا.
أخطاء سهلة
- تشغيل تلقائي للصوت بلا فعل واضح
- غياب
controls - ربط WAV ضخم غير مضغوط بينما يكفي MP3
- توقع
posterعلىaudio - نسيان نص احتياطي أو مسار تنزيل
- خلط تضمينات
iframeبملفاتaudioالمستضافة ذاتيًا - محتوى منطوق مختلف في كل
sourceأثناء الاختبار - مسار
media/معطوب ولوم المتصفح
ملخص
audioيضمّن ملفات صوت تستضيفها- استخدم
controlsلتشغيل وإيقاف وبحث الزائر - عدة تنسيقات
sourceمعtypeتحسّن الدعم - فضّل الملفات المضغوطة والتشغيل الذي يبدأه المستخدم
- خطّط لنص مكتوب عندما يحمل الكلام الدرس
- الصوت للصوت والفيديو للصورة+صوت وiframe للمشغّلات الخارجية
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى