HTML / الصوتيات

الناشر :كودا فوكس -

HTML / الصوتيات

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

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

HTML / الصوتيات


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

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

الأنواع الثلاثة .mp3 و .wav و .ogg تعمل على أغلب المتصفحات، حيث أن المتصفحات مهيأة للتعامل مع هذه الأنواع بدون الحاجة لأي إضافات. من المهم التأكد من أن الملف الصوتي الذي تختاره يكون ضمن هذه الأنواع لضمان التشغيل السلس على مختلف الأجهزة.

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

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

بالنسبة للوسم <source>، نضيف:

  • src: لتحديد مسار الملف الصوتي الذي سيتم تشغيله.
  • type: لتحديد نوع الملف الصوتي الذي سيتم تشغيله.

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

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

في المثال التالي، قمنا بإضافة ملف صوتي في الصفحة:

📋 

<!DOCTYPE html>
<html>
    <body>
        <p><b>Like Ras</b> (CodaFox)</p>
		
        <!-- لإعلام المتصفح أننا سنعرض ملف صوتي بالإضافة لإظهار أزرار التحكم به <audio> قمنا بإضافة الوسم 
        موضوع قمنا فيه بتحديد مسار و نوع الملف الصوتي الذي سيتم تشغيله <source> كل وسم
        في حال لم يستطع المتصفح تشغيل النوع الأول سيحاول تشغيل النوع الثاني -->
        <audio controls>
            <source src="https://alnajm1.github.io/CodaFox/codafox.mp3" type="audio/mpeg">
            <source src="https://alnajm1.github.io/CodaFox/codafox.ogg" type="audio/ogg">
            Your browser does not support the audio tag.
        </audio>
    </body>
</html>

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

ملاحظة: تأكد دائمًا من أن الملفات الصوتية التي تستخدمها هي مرخصة ومسموح بها للاستخدام، لتجنب انتهاك حقوق الملكية الفكرية.
التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال