X

أساسيات اتش.تي.إم.إل

١٢. بناء مشغل موسيقى باستخدام اتش.تي.ام.ال

ورشة عمل

في هذه الورشة، ستقوم ببناء مشغل موسيقى باستخدام HTML . وقد تم توفير الهيكل الأساسي (boilerplate) لملف اتش.تي.ام.ال لك.

الهيكل الأساسي Boilerplate


<!DOCTYPE html>
<html lang="ar" dir="rtl">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>العمل مع عنصر الصوت في HTML</title>
 </head>
 <body>

 </body>
</html>

الخطوات

الخطوة ١:

  • أنشئ عنصراً من النوع h1 واجعل النص بداخله مقطوعات التقنية العربية المفتوحة .

الخطوة ٢:

  • أسفل عنصر h1 ، أضف عنصر h2 يحتوي على النص لا يمكن البقاء في الأسفل ، فهذا هو عنوان الأغنية الأولى.

  • أسفل عنصر h2 ، أضف عنصر p يحتوي على النص: الفنان: كوينسي لارسون .

الخطوة ٣:

  • بعد ذلك، أنشئ عنصراً صوتياً audio أسفل عنصر الفقرة p . وخلال الخطوات القليلة التالية، ستضيف السمات اللازمة لتمكين العنصر الصوتي من تشغيل الموسيقى.

الخطوة ٤:

  • لتحديد مورد الوسائط الخاص بالصوت، ستحتاج إلى إضافة السمة src إلى عنصر الصوت audio .

  • أضف السمة src مع القيمة https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3 .

الخطوة ٥:

  • تُعيد السمة loop تشغيل المقطع الصوتي بمجرد انتهاء تشغيله، تخيّل مقطع "ميمي" (meme) على الإنترنت يتكرر تشغيله. أما عدم استخدام هذه السمة loop ، فسيؤدي إلى تشغيل المقطع الصوتي مرة واحدة فقط.

  • السمة loop هي سمة منطقية (boolean) ولا تتطلب قيمة.

  • أضف السمة loop إلى عنصر الصوت audio .

الخطوة ٦:

  • توفر السمة controls عناصر تحكم في التشغيل لعنصر الصوت، بما في ذلك إيقاف التشغيل مؤقتاً واستئنافه، والتنقل داخل المقطع الصوتي (التقديم والتأخير)، والتحكم في مستوى الصوت.

  • تُعد السمة controls سمة منطقية (boolean) ولا تتطلب قيمة.

  • أضف السمة controls إلى عنصر الصوت audio .

  • الآن، ينبغي أن ترى عنصر الصوت audio معروضاً على الصفحة.

الخطوة ٧:

  • أضف عنصر h2 جديداً أسفل عنصر الصوت audio ، بحيث يحتوي على النص في رحلةٍ بحثاً عن إلهامٍ وتأمل .

  • أسفل عنصر h2 ، أضف عنصر p يحتوي على النص: الفنان: كوينسي لارسون .

الخطوة ٨ :

  • أسفل عنصر p ، أضف عنصر audio ، وامنحه السمة src بقيمة https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3 ، بالإضافة إلى السمتين loop و controls .

الخطوة ٩ :

  • تحمل الأغنية الأخيرة عنوان ملامسة السطح ، والفنان هو كوينسي لارسون ، والملف المستخدم هو https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3 .

  • أضف الأغنية الأخيرة لإكمال مشغل الموسيقى، باتباع النمط نفسه الذي استخدمته للأغنيتين الأوليين.

الحل


<!DOCTYPE html>
<html lang="ar" dir="rtl">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>العمل مع عنصر الصوت في HTML</title>
 </head>
 <body>

  <h1>مقطوعات التقنية العربية المفتوحة</h1>

  <h2>لا يمكن البقاء في الأسفل</h2>
  <p>الفنان: كوينسي لارسون</p>
  <audio
   src="https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3"
   loop
   controls
  > 
  </audio>

  <h2>في رحلةٍ بحثاً عن إلهامٍ وتأمل</h2>
  <p>الفنان: كوينسي لارسون</p>
  <audio
   src="https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3"
   loop
   controls
  > 
  </audio>

  <h2>ملامسة السطح</h2>
  <p>الفنان: كوينسي لارسون</p>
  <audio
   src="https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3"
   loop
   controls
  > 
  </audio>

 </body>
</html>

التطبيق