يا هلا والله بالشباب! اليوم بنتكلم عن كيف نضيف صوتيات لمواقعنا باستخدام HTML بكل سهولة، ونتحكم فيها بعد.
العنصر الأساسي: <audio>
هذا هو بطل قصتنا اليوم. العنصر <audio> يسمح لك تضمين ملفات صوتية وتشغيلها مباشرة في صفحة الويب.
أبسط طريقة لإضافة صوت
تقدر تحط مسار الملف الصوتي مباشرة في السمة src بهذا الشكل:
<audio src="مسار-الصوت.mp3" controls>
المتصفح حقك ما يدعم تشغيل الصوت.
</audio>كلمة controls هنا مهمة، لأنها تضيف لك أزرار التحكم الافتراضية للمتصفح (تشغيل، إيقاف، مستوى الصوت).
سمات مفيدة للعنصر <audio>
src: مسار ملف الصوت.controls: لعرض أزرار التحكم (تشغيل/إيقاف مؤقت، مستوى الصوت، إلخ).autoplay: يشغل الصوت تلقائياً بمجرد تحميل الصفحة. (انتبه! بعض المتصفحات تحظر التشغيل التلقائي بدون تفاعل المستخدم).loop: يخلي الصوت يتعاد تشغيله من البداية لما يخلص.muted: يبدأ الصوت وهو مكتوم.preload: يحدد كيف المفروض المتصفح يحمل ملف الصوت. القيم ممكن تكونnone(ما يحمل شيء)،metadata(يحمل معلومات بسيطة زي المدة)، أوauto(يحمل الملف كله).
مثال شامل لـ <audio>
شوف كيف ممكن نستخدم أكثر من سمة مع بعض:
<audio controls autoplay loop muted preload="auto">
<source src="موسيقى-خلفية.mp3" type="audio/mpeg">
<source src="موسيقى-خلفية.ogg" type="audio/ogg">
المتصفح حقك ما يدعم تشغيل الصوت. يا ليت تحدثه!
</audio>أكثر من صيغة صوتية: <source>
مو كل المتصفحات تدعم نفس صيغ الصوت. عشان كذا، الأفضل إنك توفر أكثر من صيغة للملف الصوتي باستخدام العنصر <source> داخل <audio>. المتصفح راح يختار أول صيغة يدعمها.
السمة type مهمة عشان تقول للمتصفح نوع الملف.
ملاحظة سريعة: الصيغ الشائعة هي
MP3(type="audio/mpeg") وOGG(type="audio/ogg") وWAV(type="audio/wav"). حاول توفر على الأقل MP3 و OGG عشان تغطي أغلب المتصفحات.
لماذا لا يعمل الصوت؟ (نص احتياطي)
النص اللي تحطه بين وسمي <audio> و </audio> (زي "المتصفح حقك ما يدعم تشغيل الصوت.") راح يظهر بس لو المتصفح ما قدر يشغل الصوت. هذي حركة حلوة عشان ما يتوه المستخدم.
التحكم بالصوت عن طريق JavaScript
تقدر تتحكم بالصوت بشكل أقوى باستخدام JavaScript. مثلاً، تشغل الصوت، توقفه، تغير مستوى الصوت، أو حتى تتحكم في نقاط معينة من الصوت.
<audio id="myAudio" src="صوت-زر.mp3"></audio>
<button onclick="document.getElementById('myAudio').play()">شغل الصوت</button>
<button onclick="document.getElementById('myAudio').pause()">وقف الصوت</button>الأشياء هذي بتفتح لك أبواب كثيرة لإنشاء تجارب تفاعلية مع الصوت!
تخصيص شكل أزرار التحكم
لو ما عجبتك أزرار التحكم الافتراضية للمتصفح، تقدر تخفيها (بإنك ما تحط السمة controls) وتصمم أزرارك الخاصة باستخدام HTML و CSS، وتتحكم فيها بـ JavaScript.
نصيحة أخيرة: لا تبالغ في استخدام الأصوات اللي تشتغل تلقائيًا، لأنها ممكن تكون مزعجة للمستخدم. استخدمها بحكمة!
وبكذا نكون غطينا أساسيات إضافة الصوتيات في HTML. الموضوع بسيط وممتع، والتحكم فيه بـ JavaScript يفتح لك آفاق واسعة. بالتوفيق!