عنصر الصوت <audio>:
يُستخدم هذا العنصر لتشغيل ملف صوتي على صفحة الويب. إليك كيفية استخدامه:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
كيفية عمل عنصر الصوت :
عناصر التحكم:
- الخاصية
controlsتُضيف عناصر التحكم بالصوت مثل التشغيل والإيقاف المؤقت والصوت.
المصادر البديلة:
- عنصر
<source>يسمح لك بتحديد ملفات صوتية بديلة يمكن للمتصفح الاختيار منها. سيستخدم المتصفح أول تنسيق يمكنه التعرف عليه.
المحتوى البديل:
- النص الموجود بين علامتي
<audio>و</audio>سيظهر فقط في المتصفحات التي لا تدعم عنصر الصوت.
ملخص:
- استخدم عنصر
<audio>لتحديد مكان عرض المشغل الصوتي. - استخدم عنصر
<source>لتحديد ملفات الصوت مع تحديد نوع التنسيق لكل ملف. - أضف الخاصية
controlsلعرض عناصر التحكم بالصوت.
لبدء تشغيل ملف صوتي تلقائيًا
استخدم الخاصية autoplay في عنصر الصوت.
مثال:
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
ملاحظة هامة: لا تسمح متصفحات Chromium (مثل Chrome و Edge) بالتشغيل التلقائي في معظم الحالات. ومع ذلك، يُسمح دائمًا بالتشغيل التلقائي مع إسكات الصوت.
لتشغيل الصوت تلقائيًا مع إسكات الصوت، أضف الخاصية muted بعد الخاصية autoplay:
مثال:
<audio controls autoplay muted>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
دعم المتصفحات لعنصر الصوت <audio>:
يوضح الجدول ه أول إصدار من كل متصفح يدعم عنصر الصوت بشكل كامل:
| المتصفح | الإصدار |
|---|---|
| Internet Explorer | 9.0 |
| Chrome | 4.0 |
| Firefox | 3.5 |
| Safari | 4.0 |
| Opera | 10.5 |
تنسيقات الصوت المدعومة في HTML:
يوجد ثلاث تنسيقات صوت مدعومة بشكل أساسي في HTML:
- MP3: التنسيق الأكثر شيوعًا واستخدامًا على الإنترنت، مدعوم من جميع المتصفحات الحديثة.
- WAV: تنسيق غير مضغوط، يتميز بجودة عالية ولكن حجم الملفات كبير، مدعوم من معظم المتصفحات الحديثة.
- Ogg: تنسيق مفتوح المصدر، يتميز بجودة جيدة وحجم ملفات صغير نسبيًا، مدعوم من معظم المتصفحات الحديثة ما عدا Safari.
دعم المتصفحات للتنسيقات المختلفة:
| المتصفح | MP3 | WAV | Ogg |
|---|---|---|---|
| Edge/IE | نعم (من Edge 79) | نعم (من Edge 79) | نعم (من Edge 79) |
| Chrome | نعم | نعم | نعم |
| Firefox | نعم | نعم | نعم |
| Safari | نعم | نعم | لا |
| Opera | نعم | نعم | نعم |
تنسيقات الصوت وأنواع الوسائط في HTML:
يستخدم عنصر <audio> في HTML لتشغيل ملفات الصوت. لتحديد تنسيق الصوت الذي سيتم تشغيله، يجب عليك تحديد نوع الوسائط باستخدام الخاصية type.
فيما يلي بعض تنسيقات الصوت الشائعة وأنواع الوسائط الخاصة بها:
| تنسيق الصوت | نوع الوسائط |
|---|---|
| MP3 | audio/mpeg |
| OGG | audio/ogg |
| WAV | audio/wav |
طرق وخصائص وأحداث الصوت في HTML:
يحدد HTML DOM طرق وخصائص وأحداث خاصة لعنصر الصوت <audio>. يسمح ذلك بالتحكم في الصوت باستخدام JavaScript، بما في ذلك:
طرق التحكم:
play(): تشغيل الصوت.pause(): إيقاف الصوت مؤقتًا.load(): تحميل الصوت.
خصائص الصوت:
src: مسار الصوت.currentTime: الوقت الحالي للتشغيل بالثواني.duration: المدة الإجمالية للصوت بالثواني.volume: مستوى الصوت (من 0 إلى 1).paused: قيمة boolean تشير إلى ما إذا كان الصوت متوقفًا مؤقتًا أم لا.ended: قيمة boolean تشير إلى ما إذا كان الصوت قد انتهى أم لا.
أحداث الصوت:
play: يتم إطلاقه عند بدء تشغيل الصوت.pause: يتم إطلاقه عند إيقاف الصوت مؤقتًا.ended: يتم إطلاقه عند انتهاء الصوت.
