يمكن تشغيل الأغاني على صفحة HTML بعدة طرق مختلفة .
المشاكل والحلول
ليس من السهل إظهار ملفات الصوت في صفحة HTML . يجب اضافة الكثير من الحيل للتأكد أن ملفات الصوت ستعرض بشكل جيد في متصفحات (اكسبلورر , فايرفوكس , كروم , سفاري , اوبرا) وعلى جميع الأنظمة (ويندوز , ماك , آي فون , آي باد) .
أسهل طريقة لإضافة ملفات الصوت في موقعك
ماهي أسهل طريقة لاضافة الفيديو على موقعك ؟
مشغل الوسائط ياهو Yahoo Media Player الأفضل في تشغيل هذه الأنواع من الملفات حيث يمكنه تشغيل ملفات mp3 وأنواع مختلفة من الصيغ المتنوعة . يمكنك اضافته في موقعك أو على مدونتك بكود صغير جداً وذلك يمكن أن يجعل صفحة موقعك HTML أكثر احترافاً بعرض المشغلات .
مثال
<a href="song.mp3">تشغيل الأغنية</a><script type="text/javascript" src="http://mediaplayer.yahoo.com/js"> </script>
استخدام الاضافات
الاضافات هي برامج حاسوبية صغيرة حيث تقوم بتوسيع وظيفة المتصفح . يمكن استخدام الاضافات للعديد من الأسباب حيث يمكن استخدامهم في الموسيقى أو اظهار الخرائط أو تأكيد الاي دي الخاص بالبنك الذي تتعامل معه والكثير .
يمكن اضافة الاضافات على صفحة الانترنت باستخدام الوسوم <object> أو <embed>
تشغيل الاوديو في صفحات HTML
مثال
<audio controls="controls" height="50px" width="100px"> <source src="song.mp3" type="audio/mpeg" /> <source src="song.ogg" type="audio/ogg" /> <embed height="50px" width="100px" src="song.mp3" /> </audio>
استخدام وسم <embed>
ان الهدف من استخدام وسم <embed> هو ضمر عناصر الوسائط المتعددة في صفحة HTML
يظهر المثال التالي كيفية ضمر عنصر mp3 داخل صفحة الويب
<embed height="50px" width="100px" src="song.mp3" />
مشاكل
- ان الوسم <embed> غير معروف بشكل جيد في HTML 4 لذلك لن يتم عرض الصفحة بفعالية صحيحة .
- لن يتم تشغيل الملف اذا كان متصفحك لايدعم صيغة الملف .
- ان قمت بتحويل الملف الى صيغة أخرى لن تتمكن من تشغيل الملف في جميع المتصفحات .
استخدام وسم <object>
ان الهدف من <object> ادخال عناصر وسائط في صفحات HTML .
يظهر الكود التالي ملف mp3 تم ادخاله الى صفحة ويب .
مثال
<object height="50px" width="100px" data="song.mp3" />
بعض المشاكل من هذه الملفات :
- ان كان متصفحك لايدعم صيغة الملف فلن يعمل ملف الصوت .
- ان قمت بتحويل الملف الى صيغة أخرى فإنها ستبقى تعمل مع جميع المتصفحات .
استخدام وسم الصوت <audio>
يعتبر وسم <audio> جديداً مع HTML5 وغير معروف مع HTML4 ولكن يعمل على جميع المتصفحات الجديدة .
مثال
<audio controls="controls"> <source src="song.mp3" type="audio/mpeg" /> <source src="song.ogg" type="audio/ogg" /> Your browser does not support this audio </audio>
يستخدم المثال السابق الامتداد ogg وهو يعمل مع المتصفحات فايرفوكس واوبرا و كروم . ولجعل الملف يعمل على انترنت اكسبلورر يجب اضافة ملف بصيغة mp3
يوجد 3 أنواع للاوديو (الصوت) حالياً يمكن ادراجها وسم <audio> وهي ogg vorbis و mp3 و wav
بعض المشاكل المقترحة :
- يجب تحويل ملف الصوت لديك الى عدة صيغ مختلفة .
- لايعمل وسم <audio> مع الاصدارات القديمة للمتصفحات .
- يعتبر وسم <audio> غير فعال مع HTML4 و XHTML .
أفضل حل مع HTML
مثال
<audio controls="controls" height="50px" width="100px"> <source src="song.mp3" type="audio/mpeg" /> <source src="song.ogg" type="audio/ogg" /> <embed height="50px" width="100px" src="song.mp3" /> </audio>
استخدمنا في المثال السابق 4 صيغ مختلفة لنفس الملف حيث يقوم وسم <audio> بتشغيل الملف في أي صيغة متوفرة يدعمها المتصفح . ان لم يعمل الملف حاول استخدام وسم <embed> وان لم يعمل أيضاً سيظهر خطأ .
بعض المشاكل :
- يجب تحويل ملفات الصوت الى عدة صيغ مختلفة .
- ان وسم <audio> غير فعّال مع HTML4 و XHTML .
- ان وسم <embed> غير فعّال مع HTML4 و XHTML .
ملاحظة : لحل مشكلة الفعالية يمكن استخدام <!DOCTYPE html>
استخدام مشغل الوسائط Yahoo
يعتبر استخدام مشغل الوسائط yahoo طريقة اخرى لتشغيل ملفات الوسائط . ببساطة تترك العمل لمشغل yahoo ليقوم بعمل تشغيل الأغاني .
مثال
<a href="song.mp3">قم بتشغيل الأغنية</a><script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
يمكن استخدام مشغل الواسائط ياهو مجاناً ولاستخدامه يجب استخدام رابط لملف جافاسكربت javascript في أسفل صفحة الويب لديك .
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
ثم تقوم بربط ملف الصوت لديك في صفحة HTML عندها تلقائياً سيقوم ملف JavaScript بتشغيل الأغنية
<a href="song1.mp3">الأغنية 1</a> <a href="song2.mp3">الأغنية 2</a> ... ... ...
يقدم مشغل الوسائط ياهو الى زوارك أيقونة صغيرة عوضاً عن مشغل كامل وعلى أي حال عند الضغط على الأيقونة ستظهر نافذة بحجم كامل .
استخدام مشغل وسائط Google
مثال
<a href="song.mp3">استمع للأغنية</a><embed type="application/x-shockwave-flash" wmode="transparent" src="http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=song.mp3" height="27" width="320"></embed>
استخدام رابط تشعبي
ان كانت الصفحة تحتوي على رابط لملف وسائط فإن أغلب المتصفحات ستستخدم "تطبيقات مساعدة" لتشغيل الملف .
ان المثال التالي يظهر mp3 وعند الضغط على الرابط سيستخدم المتصفح تطبيقات مساعدة لتشغيل الملف.
مثال
<a href="song.mp3">استمع للأغنية</a>
الصوت الداخلي
عند وضع ملف صوت في صفحة الويب أو جزء من صفحة الويب تسمى صوات داخلي .
ان أردت استخدام ملف صوت داخلي فقط كن حذراً باستخدام تلك الخاصية لأن تشغيل الصوت عند فتح الموقع يعتبر مزعجاً للزوار ولاحترافية أكثر قم بوضع الغاء الصوت لكي يتمكن الزائر من اغلاقة في حال لم يرد الاستماع اليه .
أفضل نصيحة لتضمين الصوت داخل صفحة الويب حيث يتوقع أن يسمع صوتاً مثل الضغط على رابط للاستماع لتسجيل معين .
ليست هناك تعليقات:
إرسال تعليق