انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 45
دورة لغة HTML

المقاطع الصوتية في لغة HTMLHTML Audio

سوف تتعلم في هذا الدرس كيفية عرض المقاطع الصوتية داخل صفحة HTML، عن طريق استخدام عنصر <audio> كما ستتعرف أيضاً على جميع الخصائص التي تُكتب بداخله.
ابدأ التعلّم استكشف الأمثلة
THE BUILDING BLOCKS OF THE WEBHTML
index.html
1<h1>Hello, web.</h1>
وسم الفتحالمحتوىوسم الإغلاق
النتيجة في المتصفح Hello, web.
كل صفحة رائعة تبدأ بعنصر.
أقسام الدرس
3
الأمثلة
3
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
8,902
محتوى الدرس
في هذا الدرس 3تصفّح المواضيع

HTML audio المقاطع الصوتية في لغة HTML

عن طريق عنصر <audio> يمكن تشغيل ملفات صوتية بداخل صفحات الويب بلغة HTML.

  • عن طريق إضافة خاصية controls attribute إلى عنصر <audio> يظهر شريط أدوات خاص بالمقطع الصوتي للتحكم بتشغيله وإيقافه، وكتم أو تشغيل صوته.
  • يمكن تحديد المسار بسمة src على <audio> مباشرة، أو بعناصر <source> داخله لتوفير مصادر بديلة.
  • تستخدم خاصية src بداخل عنصر <source> لكتابة مسار الملف الصوتي.
  • النص الموجود داخل عنصر <audio> يظهر فقط على المتصفحات التي لا تدعم عنصر <audio>.
  • من صيغ وحاويات الصوت الشائعة MP3 وOgg وWAV. يعتمد التشغيل على دعم المتصفح للترميز والحاوية، وليس الامتداد وحده. نوع MIME المعتاد لملف MP3 هو audio/mpeg.
جرب الكود

HTML audio

يُستخدم عنصر <audio> لعرض ملفات صوتية داخل صفحة الويب.

HTML 
<audio controls>
  <source src="/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
جرّب بنفسك

HTML audio autoplay خاصية autoplay مع عنصر HTML audio

السمة autoplay تطلب بدء المقطع الصوتي عندما يصبح جاهزًا. قد يمنع المتصفح التشغيل قبل تفاعل المستخدم أو وفق إعداداته؛ وجود السمة لا يضمن أن يُسمع الصوت تلقائيًا. تبقى أدوات التحكم وسيلة لبدء التشغيل يدويًا.

جرب الكود

HTML audio autoplay

مثال يطلب التشغيل التلقائي دون كتم الصوت. إذا منعه المتصفح، اضغط زر التشغيل في أدوات التحكم. يوضح هذا الفرق بين طلب autoplay وقرار السماح به.

HTML 
<audio controls autoplay>
  <source src="/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
جرّب بنفسك

HTML audio muted خاصية muted مع عنصر HTML audio

السمة muted تكتم الصوت مبدئيًا، ويمكن استخدامها مع التشغيل التلقائي أو اليدوي. وهي سمة منطقية تُفعّل بوجودها؛ كتابة muted="false" لا تلغيها. لا يعني الكتم وحده ضمان التشغيل التلقائي في كل متصفح.

جرب الكود

HTML audio muted

يطلب المثال التشغيل التلقائي مع كتم الصوت. يمكن تشغيله يدويًا وتغيير الكتم من أدوات التحكم؛ تختلف نتيجة الطلب التلقائي بحسب سياسة المتصفح.

HTML 
<audio controls autoplay muted>
  <source src="/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات15

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 15 مفهومةأول بطاقة، أول خطوة
01 Audio صوتي
للمراجعة
02 Sounds صوتيات
للمراجعة
03 Element عنصر
للمراجعة
04 Attribute سمة
للمراجعة
05 Controls تحكم
للمراجعة
06 Play تشغيل
للمراجعة
07 Pause إيقاف مؤقت
للمراجعة
08 Volume مستوي الصوت
للمراجعة
09 Source مصدر
للمراجعة
10 Internal داخلي
للمراجعة
11 External خارجي
للمراجعة
12 Result نتيجة
للمراجعة
13 Autoplay تشغيل تلقائي
للمراجعة
14 Muted صامت
للمراجعة
15 Google Chrome موقع جوجل كروم
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات2

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 2 مفهومةأول بطاقة، أول خطوة
01 HTML HTML
Hypertext Markup Language
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
للمراجعة
02 Src Src
source
مصدر
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

1أسئلة 1أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي1 أسئلة تنتظرك
01

العنصر الذي يستخدم في اضافة مقطع صوتي هو ؟