html5 الصوت و الفيديو

html5 audio : الصوت

آخر تحيين: 06-01-2015

html5 video : الفيديو html الإستمارة


وسم الصوت <audio> من الوسوم الجديدة للغة HTML5 ، يتيح لنا عرض مُحتوى الصّوت و الموسيقى .

<audio controls>
  <source src="birds.ogg" type="audio/ogg">
</audio>
مشاهدة النتيجة

يمكننا استعمال ثلاث صيغ للصوت ، وهي : "ogg, mp3, wav" . غالبا جميع المتصفّحين الأكثر استعمالا ، و خاصّة في الإصدارات الحديثة ، يأخذون بعين الإعتبار هذه الصّيغ . رغم ذلك ، للتأكد من أن صوتكم سيصل إلى جميع الزّوار ، يمكننا إضافة أكثر من صيغة في وسم <source>:

<audio controls>
  <source src="birds.ogg" type="audio/ogg">
  <source src="birds.mp3" type="audio/mpeg">
</audio>

يمكننا أيضا إضافة نص . يظهر فقط إذا كان خطأ في قراءة ملف الصّوت

<audio controls>
  <source src="birds.ogg" type="audio/ogg">
  <source src="birds.mp3" type="audio/mpeg">
  مُتصفّحك لا يأخذ بعين الإعتبار وسم الصّوت
</audio>

نضع النص داخل وسم <audio> . إذا تم عرض محتوى الصوت بنجاح ، فلن يظهر نصّنا .
بالنسبة للصفة src رأيناها مراراً . يمكن لقيمتها أن تكون إمّا رابطاً نسبيا "birds.ogg" كما في مثالنا .
أو رابطاً مُطلقا ، مثل "http://www.yoursite.com/music/birds.ogg"
أما بالنسبة للصفة type ، لدينا ثلاثة أنواع ، حسب صيغة الصّوت "audio/ogg, audio/mpeg, audio/wav"

نوع الصوت المستعمل مع كل صيغة

الصيغةالنوع : MIME-type
mp3audio/mpeg
oggaudio/ogg
wavaudio/wav

صيغ الصّوت و توافقها مع أهم المتصفّحين

المتصفّحMP3OGGWAV
Google Chrome
Mozilla FireFox
Internet Explorer
Safari
Opera

صفات التحكم في الصوت

للتحكّم في الصّوت ، لدينا مجموعة متنوعة من الصّفات التي يمكننا إضافتها إلى وسم audio . هذه الصفات لها وظائف خاصة . رأينا واحدة في بداية الدّرس ، و هي "controls" . بدل كتابة الصفة و قيمتها : <audio controls="controls"> نكتب <audio controls> فقط ، و هذا ينطبق على الصفات التالية :

  • controls : عرض شريط أسفل مُشغّل الصوت ، مع أيقونات لتشغيل أو توقيف قراءة الملف . أو خفض و رفع مستوى الصّوت .
  • autoplay : تشغيل الصّوت تلقائيا . بمُجرّد تحميل الصّفحة
  • loop : إعادة تشغيل الصوت من جديد كل انتهت قراءة الملف

هذا مثال يجمع هذه الصفات

<audio loop autoplay controls>  
   <source src="birds.ogg" type="audio/ogg">  
   <source src="birds.mp3" type="audio/mpeg">  
</audio>

توجد صفات أخرى كثيرة ، أعطيتكم الأساسية منها فقط .
أنهي هذا الدرس بإهدائكم هذا الرابط media.io ، لموقع مجاني إذا أردتم ، تحويل الصّوت من صيغة إلى أخرى . مثلا تحويل صيغة mp3 إلى ogg ... بالإضافة إلى اختيار جودة الصوت .