إعلان
دورة تطوير التطبيقات باستخدام لغة JavaScript في هذه الدورة ستتعلم لغة جافا سكريبت, استخدام مكتبة React.js, بناء API الموقع بواسطة Node.js, تطوير تطبيق جوال باستخدام React Native, و في نهاية الدورة ستتعلم تطوير تطبيق محادثة شبيه بتطبيق WhatsApp. تعلم الآن
دورة تطوير واجهات المستخدم في هذه الدورة ستتعلم لغة HTML و لغة CSS و لغة JavaScript. من ناحية التطبيق العملي ستتعلم طريقة بناء واجهة متجر إلكتروني مكون من ست صفحات, تحويل خمسة تصاميم PSD إلى صفحات ويب, بناء واجهة مستخدم تشبه موقع يوتيوب, بناء لوحة تحكم إحترافية. تعلم الآن
تطوير تطبيقات باستخدام لغة بايثون في هذه الدورة ستتعلم أساسيات البرمجة بلغة بايثون وصولاً إلى التعامل مع أشهر أطر العمل (Flask و Django) و ستتعلم كيف تبني متجر إلكتروني يمكن للمستخدمين البيع و الشراء من خلاله. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة PHP في هذه الدورة ستتعلم لغة PHP من الصفر, استخدام إطار العمل Laravel بشرح مفصّل و عملي, كيفية تطوير شبكة اجتماعية تشبه Instagram, بناء API لتطبيق جوال وفق أسلوب RESTful, تطوير موقع إعلانات مبوبة, تطوير نظام إدارة محتوى CMS كامل. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة Ruby في هذه الدورة ستتعلم البرمجة بلغة Ruby إنطلاقاً من أبسط المفاهيم وحتى بناء تطبيق حقيقي, إستخدام إطار العمل Ruby on Rails بشرح مفصّل و عملي, بناء تطبيق حقيقي عبارة عن شبكة اجتماعية تشبه تويتر, تطوير مجتمع الكتروني يشبه حسوب I/O. تعلم الآن
دورة علوم الحاسوب هذه الدورة معدة لتكون مدخل لعلوم الحاسوب و لغات البرمجة حيث ستتعرف فيها على أنظمة التشغيل و ستتعمق في نظام لينكس و في كيفية التعامل معه من خلال موجه الأوامر, بالإضافة إلى قواعد البيانات و أساسيات الشبكات و الخوادم و مبادئ الحماية والأمان في الويب. تعلم الآن

    HTML الوسم <audio>

    تعريفه

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

    هناك خصائص عديدة يمكن إضافتها لهذين الوسمين و لكن الخصائص التالية هي الأهم و التي لا بد من إضافتها:

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

    معلومة تقنية

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

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

    الجدول التالي يظهر المتصفحات التي تدعم الوسم <audio>.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    مدعوم 12 3.5 10.5 3.1 3 18 4 مدعوم مدعوم 1.0

    خصائصه

    نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.


    الخاصية autoplay

    يمكن إضافتها للوسم لتحديد ما إن كان سيتم تشغيل الملف الصوتي بشكل تلقائي أم لا.
    في حال تم تمرير القيمة true لها فهذا يعني أنه سيتم تشيغل الملف بشكل تلقائي, و في حال تم تمرير القيمة false لها فهذا يعني أنه لن يتم ذلك.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    مدعوم 12 3.5 10.5 3.1 3 18 4 مدعوم مدعوم 1.0


    الخاصية controls

    يمكن إضافتها للوسم لتحديد ما إن كان سيتم إظهار تحكم بالملف الصوتي كتشغيله, إيقافه و تسريعه إلخ.. أم لا.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    3 12 3.5 10.5 3.1 3 18 14 مدعوم مدعوم 1.0


    الخاصية loop

    يمكن إضافتها للوسم لتحديد ما إن كان الملف الصوتي سيعاد تشغيله بشكل تلقائي كلما وصل إلى النهاية أم لا.
    في حال تم تمرير القيمة true لها فهذا يعني أنه سيتم إعادة تشغيله بشكل تلقائي حين يصل للنهاية, و في حال تم تمرير القيمة false لها فهذا يعني أنه لن يتم ذلك.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    3 12 11 10.5 3.1 3 18 14 مدعوم مدعوم 1.0


    الخاصية muted

    يمكن إضافتها للوسم لجعل الملف الصوتي مقطوع الصوت ( Muted ) بمعنى أنه حتى و لو كان شغال فلن يكون الصوت مسموع إلى أنه يتم رفعه بشكل يدوي.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    ؟ ≤18 11 ؟ ؟ ؟ ؟ 14 ؟ ؟ ؟


    الخاصية preload

    يمكن إضافتها للوسم لتحديد ما إن كان يجب أن يقوم المتصفح بتحميل الملف الصوتي بشكل تلقائي بمجرد أن تفتح الصفحة حتى و إن لم يرد المستخدم تشغيله أم لا.

    • في حال تم تمرير القيمة none لها فهذا يعني أنه لا يجب أن يتم تحميل الملف الصوتي بشكل تلقائي.
    • في حال تم تمرير القيمة metadata لها فهذا يعني أنه سيتم تحميل المعلومات الوصفية للملف الصوتي ( Metadata ) مثل مدته.
    • في حال تم تمرير القيمة auto لها فهذا يعني أنه قد يتم تحميل الملف الصوتي حتى و إن لم يقم المستخدم بتشغيله.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    3 12 4 15 3.1 3 18 4 14 مدعوم 1.0


    الخاصية src

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

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    3 12 3.5 10.5 3.1 3 18 4 مدعوم مدعوم 1.0

    إستخدامه

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

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

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

    مثال

    <audio controls>
        <source src="like-ras.mp3" type="audio/mpeg">
        <source src="like-ras.ogg" type="audio/ogg">
        Your browser does not support the audio tag!
    </audio>
    		

    جرب الكود

    تصميمه الإفتراضي

    لا يوجد تصميم إفتراضي له.

    نصائح و ملاحظات

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

    إعلان

    Eqla3Tech.com

    شروحات مكتوبة حول لغات البرمجة و تقنية المعلومات باللغة العربية مقدمة من إقلاع تك.

    لغة جافا لغة ++C قواعد البيانات نظام ويندوز نظام لينكس الشبكات تقنية المعلومات

    الدورات

    أدوات مساعدة

    الأقسام

    دورات
    مقالات أسئلة مشاريع كتب