العنصر <audio>
يُستعمَل العنصر <audio> لتضمين المحتوى الصوتي في المستندات، وقد يحتوي على ملف مصدري واحد أو أكثر التي تُمثَّل باستخدام الخاصية src أو عبر العنصر <source>، وسيختار المتصفح أنسب الملفات الصوتية لتشغيلها.
المثال الآتي يستخدم العنصر <audio> مع الخاصية autoplay لتشغيل الصوت تلقائيًا مع تحديد رابط URL للملف المصدري عبر الخاصية src:
<audio src="khamsat.mp3" autoplay>
لا يدعم متصفحك العنصر <code>audio</code>.
</audio>
أما المثال الآتي ففيه العنصر <audio> مع استخدام خاصية controls لإضافة أزرار للتحكم بالمقطع، وسيُحدَّد رابط URL للمقطع عبر العنصر <source>:
<audio controls="controls">
<source src="khamsat.ogg" type="audio/ogg">
<source src="khamsat.mp3" type="audio/mpeg">
لا يدعم متصفحك العنصر <code>audio</code>.
</audio>
بطاقة العنصر
| تصنيفات المحتوى | عنصر تنظيمي أو عنصر عادي أو عنصر يحتوي وسائط مضمّنة أو عنصر تفاعلي. |
|---|---|
| المحتوى المسموح | إذا كان للعنصر الخاصية src، فيمكن أن يحتوي على عنصر <track> واحد أو أكثر يتبعه محتوى عادي لا يتضمن العنصرين <audio> و <video>.
أما إذا لم يكن له الخاصية |
| الوسم المختصر | لا يمكن حذف أيّ من وسمَي البداية أو النهاية. |
| العناصر الأب | أي عنصر يقبل العناصر التضمينية. |
| واجهة DOM | HTMLAudioElement
|
دعم المتصفحات
| Chrome | Firefox | Edge | Safari | Opera |
|---|---|---|---|---|
| مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
بعض الخاصيات المُضافة حديثًا في HTML5 لا تعمل في جميع المتصفحات.
الخاصيات
يمكن استخدام الخاصيات العامة في هذا العنصر.
autoplay
هذه الخاصية منطقية (Boolean) وإذا اُستعملت (حتى لو كانت قيمتها "false"!) فسيبدأ تشغيل المقطع الصوتي في أسرع وقت ممكن، دون الانتظار حتى يكتمل تنزيل الملف الصوتي كله.
لاحظ أنَّ المواقع التي تُشغِّل الصوت تلقائيًا (أو تُشغِّل مقاطع الفيديو التي لها صوت) يمكن أن تزعج المستخدمي، لذا يجب تفادي استخدام هذه الخاصية إلا عند الضرورة، وإذا كان لا بُدّ فيجب أن تجعل هذه الميزة اختيارية وتطلب من المستخدم تفعيله. لكن قد تستفيد من هذه الميزة لو كان الغرض الرئيسي من الصفحة هو تشغيل مقطع صوتي معيّن.
buffered
خاصية قابلة للقراءة لتحديد ما هي المجالات التي نُزِّلَت من المقطع الصوتي، إذ تحتوي هذه الخاصية على كائن TimeRanges.
controls
إذا كان هذه الخاصية موجودة، فسيوفر المتصفح عناصر تحكم ليسمح عبرها للمستخدم بالتحكم بتشغيل الصوت، بما في ذلك مستوى الصوت والانتقال إلى مواضع مختلفة في المقطع الصوتي والإيقاف المؤقت والتشغيل...
loop
هذه الخاصية منطقية (Boolean)، فإن كانت موجودةً فسيُعاد تشغيل المقطع من البداية بعد الوصول إلى نهايته.
المثال الآتي يستخدم العنصر <audio> مع الخاصية loop لإعادة تشغيل المقطع بعد انتهائه:
<audio src="khamsat.mp3" controls="controls" loop="loop">
لا يدعم متصفحك العنصر <code>audio</code>.
</audio>
muted
هذه الخاصية منطقية (Boolean) تُشير إذا ما كان المقطع مكتوم الصوت بادئ الأمر. القيمة الافتراضية هي false.
المثال الآتي يستخدم العنصر <audio> مع الخاصية mute لكتم الصوت تلقائيًا:
<audio src="khamsat.mp3" controls="controls" muted="muted">
لا يدعم متصفحك العنصر <code>audio</code>.
</audio>
played
هذه الخاصية قابلة للقراءة وتحتوي على كائن TimeRanges الذي يُشير إلى المجالات التي شغّلها المستخدم من المقطع الصوتي.
preload
الغرض من هذه الخاصية هو إعطاء المتصفح فكرة عمّا يظنه مطور الصفحة أفضل لتجربة المستخدم، وتأخذ إحدى القيم الآتية:
none: يجب ألّا يُحمَّل المقطع الصوتي مسبقًا.metadata: يجب أن تُحمَّل البيانات الوصفية (مثل طول المقطع) فقط.auto: تُشير إلى أنَّ المقطع الصوتي يمكن أن يُحمَّل حتى لو كان من المتوقع ألّا يشغله المستخدم.- إذا كانت القيمة هي سلسلة نصية فارغة فهي تكافئ الخاصية auto.
إذا لم تُضبَط قيمة هذه الخاصية، فستؤخذ القيمة الافتراضية من المتصفح (ولكل متصفح قيمة افتراضية خاصة به)، لكن تنصح المواصفة المتصفحات أن تكون القيمة الافتراضية هي metadata.
لاحظ أنَّ الخاصية autoplay لها أولوية على الخاصية preload، فلو حُدِّدَت الخاصية autoplay فمن المنطقي أن يبدأ المتصفح تنزيل المقطع الصوتي مباشرةً.
يجدر بالذكر أنَّ المواصفة لم تُجبِر المتصفح على اتباع قيمة هذه الخاصية، فهي مجرد تلميحة عمّا يريده مطوِّر الصفحة.
المثال الآتي يستخدم العنصر <audio> مع الخاصية preload للطلب من المتصفح ألّا يحمّل المقطع الصوتي عند تحميل الصفحة:
<audio src="example.ogg" preload="none">
Your browser does not support the <code>audio</code> element.
</audio>
src
تحتوي هذه الخاصية على رابط URL للملف الصوتي الذي سيُحمَّل، وهذه الخاصية اختيارية، ويمكنك استخدام العنصر <source> داخل العنصر <audio> لتحديد رابط URL للمقطع (أو المقاطع) الصوتية التي ترغب في تضمينها.
volume
مستوى الصوت التي سيُشغَّل فيه المقطع، ويتراوح بين 0.0 (صامت) إلى 1.0 (أعلى مستوى).
ملاحظات الاستخدام
يمكن إضافة المحتوى البديل للمتصفحات التي لا تدعم العنصر <audio> بين وسم البداية <audio> ووسم الإغلاق </audio>.
أبسط طريقة لإضافة عناصر التحكم هي باستخدام خاصية controls (انظر قسم الأمثلة)؛ ولإضافة عناصر تحكم متقدمة، فيمكن ذلك عبر Medial API.
يمكنك أيضًا استخدام Web Audio API لتوليد الصوت أو تعديله عبر JavaScript.
وصحيحٌ أنَّ بإمكان عنصر <video> عرض الترجمات المُصاحبة للمقطع (subtitles) عبر العنصر <track>، لكن عناصر <audio> لا تستطيع فعل ذلك، وسيتم تجاهل أيّ عنصر <track> ضمن وسم البداية <audio> ووسم الإغلاق </audio>.
مصادر ومواصفات
- معيار HTML Living Standard.
- مواصفة HTML5.