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

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

في هذا الدرس سنتعرف على الوسم المخصص لإضافة ملف صوتي في الصفحة بالإضافة إلى الخصائص التي يمكن وضعها للملف الصوتي.

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

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

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

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

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

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

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

<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>