كولا ماكس ||سودانية الملامح .. عالمية الروئة ®


سودانية الملامح .. عالمية الروئة ®
 
الرئيسيةالرئيسية  اليوميةاليومية  س .و .جس .و .ج  بحـثبحـث  قائمة الاعضاءقائمة الاعضاء  المجموعاتالمجموعات  التسجيلالتسجيل  دخولدخول  

شاطر | 
 

 الدرس 02 – الصوت Audio

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
أبو نادر
Admin
Admin


♣ مشَارَڪاتْي » : 1944
♣ التسِجيلٌ » : 29/11/2012

مُساهمةموضوع: الدرس 02 – الصوت Audio   الأربعاء نوفمبر 30, 2016 8:14 pm

الملفات الصوتية Audio

يمكن تشغيل الأغاني على صفحة 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>

الصوت الداخلي

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

أفضل نصيحة لتضمين الصوت داخل صفحة الويب حيث يتوقع أن يسمع صوتاً مثل الضغط على رابط للاستماع لتسجيل معين .
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://colamax.ahlamontada.com
 
الدرس 02 – الصوت Audio
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» %xXx شرح برنامج الـAudeCity للمبتدئين xXx%

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
كولا ماكس ||سودانية الملامح .. عالمية الروئة ® :: اقسام تطوير المواقع والمنتديات :: قسم لغات البرمجة :: الملتيميديا Multimedia-
انتقل الى: