HTML/audio

يُستعمَل العنصر <audio> لتضمين المحتوى الصوتي في المستندات، وقد يحتوي على ملف مصدري واحد أو أكثر التي تُمثَّل باستخدام الخاصية src أو عبر العنصر <source>، وسيختار المتصفح أنسب الملفات الصوتية لتشغيلها.

المثال الآتي يستخدم العنصر <audio> مع الخاصية autoplay لتشغيل الصوت تلقائيًا مع تحديد رابط URL للملف المصدري عبر الخاصية src:

<audio src="example.ogg" autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>

أما المثال الآتي ففيه العنصر <audio> مع استخدام خاصية controls لإضافة أزرار للتحكم بالمقطع، وسيُحدَّد رابط URL للمقطع عبر العنصر <source>:

<audio controls="controls">
  Your browser does not support the <code>audio</code> element.
  <source src="example.wav" type="audio/wav">
</audio>

تصنيفات المحتوى	عنصر تنظيمي أو عنصر عادي أو عنصر يحتوي وسائط مضمّنة أو عنصر تفاعلي.
المحتوى المسموح	إذا كان للعنصر الخاصية src فيمكن أن يحتوي على عنصر <track> واحد أو أكثر يتبعه محتوى عادي لا يتضمن العنصرين <audio> و <video>. أما إذا كان له الخاصية src فيمكن أن يحتوي على عنصر <source> واحد أو أكثر، يتبعه عنصر <track> واحد أو أكثر ويتبعه محتوى عادي لا يتضمن العنصر <audio> و <video>.
الوسم المختصر	لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب	أي عنصر يقبل العناصر التضمينية.
واجهة DOM	HTMLAudioElement

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

بعض الخاصيات المُضافة حديثًا في HTML5 لا تعمل في جميع المتصفحات.

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

autoplay

هذه الخاصية منطقية (Boolean) وإذا اُستعملت (حتى لو كانت قيمتها "false"!) فسيبدأ تشغيل المقطع الصوتي في أسرع وقت ممكن، دون الانتظار حتى يكتمل تنزيل الملف الصوتي كله.

لاحظ أنَّ المواقع التي تُشغِّل الصوت تلقائيًا (أو تُشغِّل مقاطع الفيديو التي لها صوت) يمكن أن تزعج المستخدمي، لذا يجب تفادي استخدام هذه الخاصية إلا عند الضرورة، وإذا كان لا بُدّ فيجب أن تجعل هذه الميزة اختيارية وتطلب من المستخدم تفعيله. لكن قد تستفيد من هذه الميزة لو كان الغرض الرئيسي من الصفحة هو تشغيل مقطع صوتي معيّن.

buffered

خاصية قابلة للقراءة لتحديد ما هي المجالات التي نُزِّلَت من المقطع الصوتي، إذ تحتوي هذه الخاصية على كائن TimeRanges.

controls

إذا كان هذه الخاصية موجودة، فسيوفر المتصفح عناصر تحكم ليسمح عبرها للمستخدم بالتحكم بتشغيل الصوت، بما في ذلك مستوى الصوت والانتقال إلى مواضع مختلفة في المقطع الصوتي والإيقاف المؤقت والتشغيل...

loop

هذه الخاصية منطقية (Boolean)، فإن كانت موجودةً فسيُعاد تشغيل المقطع من البداية بعد الوصول إلى نهايته.

مثال

المثال الآتي يستخدم العنصر <audio> مع الخاصية loop لإعادة تشغيل المقطع بعد انتهائه:

<audio src="example.ogg" loop>
  Your browser does not support the <code>audio</code> element.
</audio>

muted

هذه الخاصية منطقية (Boolean) تُشير إذا ما كان المقطع مكتوم الصوت بادئ الأمر. القيمة الافتراضية هي false.

مثال

المثال الآتي يستخدم العنصر <audio> مع الخاصية mute لكتم الصوت تلقائيًا:

<audio src="example.ogg" muted>
  Your browser does not support the <code>audio</code> element.
</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.