audio tag in html وسم الصوت فى لغة html

 من الوسوم الهامة tags التى تستخدم في بعض المواقع بكثرة هو وسم الصوت audio

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

 ونلاحظ انه توجد العديد من صفحات الانترنت التى تبنى بالكامل على الصوتيات وتستخدم لتشغيل الملفات الصوتية وتحميلها .

ولإضافة ملف صوتي في لغة html نستخدم وسم <audio> ويتم اغلاقه من خلال وسم الإغلاق <audio/>

فإذا كان لدينا مجلد يسمى sounds داخل مجال العمل workspace وبداخل هذا المجلد ملف صوتي بامتداد معين وليكن اسم الملف fristlight.mp3 .

نلاحظ أن Mp3 هو امتداد الملف الصوتي ويوجد العديد من الامتدادات الأخرى للملفات الصوتية مثل Ogg وwav وrmi وغيرها من الامتدادات الأخرى المختلفة.

نلاحظ أن الخاصية controls تقوم بإظهار أدوات التحكم فى الصوت على المتصفح مثل تشغيل الصوت أو إيقافه أو التحكم فى مستوى الصوت.

<audio src="sounds/firstlight.mp3" controls>

    </audio>

ويوجد العديد من الخصائص الأخرى attribute التى يمكن إضافتها إلى وسم الصوت audio

 ومن هذه الوسوم:-

autoplay:

 وهي خاصية التشغيل التلقائي بحيث يعمل هذا الملف تلقائيا بمجرد تحميل الصفحة ونلاحظ أن هذه الخاصية غير مدعومة من قبل متصفح جوجل كروم chrome browser.

Muted:

 بحيث أن القيمة الافتراضية للملف يكون مكتوم الصوت عند تحميل الصفحة على المتصفح.

<audio src="sounds/firstlight.mp3" controls autoplay muted>

    </audio>

loop:

هذه الخاصية تعمل على إعادة تشغيل الملف الصوتي عند انتهائه عدد لانهائي من المرات.

<audio src="sounds/firstlight.mp3" controls autoplay muted loop>

    </audio>

type

هذه الخاصية تستخدم لمعرفة mime type الخاص بملف الصوت.

وهذا الرابط يحتوى على اشهر mime type  اضغط هنا لفتح الرابط

يمكن وضع اكثر من source للملف الصوتي بحيث إذا كان احد الامتدادات غير مدعوم من قبل المتصفح يقوم المتصفح بفتح الملف التالي وهكذا حتى يتم فتح أول ملف صوتي مدعوم من قبل المتصفح.

وفي حالة عدم دعم المتصفح لأى نوع من أنواع المفات الصوتية يمكن إظهار رسالة تخبر المستخدم بأن المتصفح لا يدعم الملفات الصوتية وهذه الرسالة يتم وضعها بين وسمي 

<audio>

المتصفح لا يدعم الملف الصوتي 

<audio/>

<audio controls>

                <source src="sounds/firstlight.mp3" type="audio/mpeg">

                <source src="sounds/firstlight.ogg type =aduio/ogg">

                Your browser does not support the

                <code>audio</code> element.

        </audio>

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

<audio controls>

                <source src="sounds/firstlight.mp3" type="audio/mpeg">

                <source src="sounds/firstlight.ogg type =aduio/ogg">

                 

                <p>you can download this audio type 

                   <a href="sounds/firstlight.mp3">تحميل الملف</a> 

                </p>

        </audio>