<audio> يتيح تشغيل ملفات صوتية مباشرة في المتصفح.
أهم الصفات: • controls: أدوات التحكم (play, pause, volume, seek) • autoplay: تشغيل فوري (معظم المتصفحات تمنعه) • muted: صوت مكتوم • loop: تكرار • preload: auto | metadata | none • src: مسار الملف الصوتي
صيغ الصوت المدعومة: • MP3: الأكثر دعماً وانتشاراً • OGG/Vorbis: مفتوح المصدر، لا يدعمه Safari • WAV: جودة عالية، حجم كبير • AAC: جودة عالية، مدعوم في iOS • WebM/Opus: الأحدث والأكفأ
أفضل ممارسة: قدّم MP3 + OGG معاً للتغطية الكاملة.
| 1 | <!-- مشغل صوت بسيط --> |
| 2 | <audio controls> |
| 3 | <source src="/audio/lesson.mp3" type="audio/mpeg"> |
| 4 | <source src="/audio/lesson.ogg" type="audio/ogg"> |
| 5 | <p>متصفحك لا يدعم الصوت.</p> |
| 6 | </audio> |
| 7 | |
| 8 | <!-- بودكاست مع معلومات --> |
| 9 | <figure> |
| 10 | <figcaption>الحلقة 5: مقدمة في HTML</figcaption> |
| 11 | <audio controls preload="metadata"> |
| 12 | <source src="/podcast/ep5.mp3" type="audio/mpeg"> |
| 13 | <source src="/podcast/ep5.ogg" type="audio/ogg"> |
| 14 | </audio> |
| 15 | </figure> |
| 16 | |
| 17 | <!-- صوت خلفية (صامت، تكرار) --> |
| 18 | <audio autoplay muted loop> |
| 19 | <source src="/bg-music.mp3" type="audio/mpeg"> |
| 20 | </audio> |
مثال 1: قائمة بودكاست
| 1 | <section class="podcast-episodes"> |
| 2 | <h2>حلقات البودكاست</h2> |
| 3 | |
| 4 | <article class="episode"> |
| 5 | <h3>الحلقة 1: من هو المبرمج؟</h3> |
| 6 | <p>نقاش عن مسيرة المبرمج في العالم العربي.</p> |
| 7 | <audio controls preload="metadata"> |
| 8 | <source src="/podcast/ep1.mp3" type="audio/mpeg"> |
| 9 | <source src="/podcast/ep1.ogg" type="audio/ogg"> |
| 10 | متصفحك لا يدعم ملفات الصوت. |
| 11 | </audio> |
| 12 | <a href="/podcast/ep1.mp3" download>تحميل الحلقة</a> |
| 13 | </article> |
| 14 | </section> |