Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing

HTMLالصوتيات

  • وسوم و خصائص الصوتيات
  • إضافة ملف صوتي في الصفحة

وسوم و خصائص الصوتيات

بشكل عام نستخدم الوسم <audio> لإعلام المتصفح أننا نريد عرض ملف صوتي في الصفحة.
لتحديد الملف الصوتي الذي نريد تشغيله فيه نستخدم الوسم <source>.


أنواع الملفات الصوتية التي يمكن تشغيلها

الأنواع الثلاثة .mp3 و .wav و .ogg تعمل على أغلب المتصفحات و نقصد بذلك أن المتصفحات مهيئة للتعامل مع هذه الأنواع بدون الحاجة لأي إضافات.


خصائص الملف الصوتي

  • بالنسبة للوسم <audio> نضيف الخاصية controls لإظهار أزرار تحكم في نافذة الملف الصوتي.
  • بالنسبة للوسم <source> نضيف src لتحديد مسار الملف الصوتي الذي سيتم تشغيله, و الخاصية type لتحديد نوع الملف الصوتي الذي سيتم تشغيله.

إضافة ملف صوتي في الصفحة

في المثال التالي قمنا بإضافة ملف صوتي في الصفحة مع إظهار أزرار التحكم به.

سبب إضافة وسمين <source> هو أننا قمنا بتجهيز نسختين من نفس الملف الصوتي, الأولى نوعها .mp3 و الثانية نوعها .ogg بهدف جعل المتصفح يحاول تشغيل أول ملف صوتي موضوع, و إن لم ينجح سيحاول تشغيل الملف الصوتي الثاني.

النص Your browser does not support the audio tag! يتم عرضه في الصفحة في حال كان متصفح المستخدم لا يدعم تشغيل الملف الصوتي من الأساس.

مثال

<audio controls>
<source src="https://harmash.com/tutorials/html/audios/like-ras.mp3" type="audio/mpeg">
<source src="https://harmash.com/tutorials/html/audios/like-ras.ogg" type="audio/ogg">
Your browser does not support the audio tag!
</audio>
<audio controls> <source src="https://harmash.com/tutorials/html/audios/like-ras.mp3" type="audio/mpeg"> <source src="https://harmash.com/tutorials/html/audios/like-ras.ogg" type="audio/ogg"> Your browser does not support the audio tag! </audio>

جرب الكود