الصوت في HTML

هناك العديد من الطرق لتشغيل الصوت في HTML.

المشاكل، والمشاكل، والحلول

ليس من السهل تشغيل الصوت في HTML!

تحتاج إلى فهم العديد من المهارات لضمان أن يتم تشغيل ملفاتك الصوتية في جميع المتصفحات (Internet Explorer, Chrome, Firefox, Safari, Opera) وفي جميع الأجهزة (PC, Mac, iPad, iPhone).

في هذا الفصل،قام CodeW3C.com بتلخيص المشاكل وال حلول.

استخدام المكونات الإضافية

المكون الإضافي للمتصفح هو برنامج كمبيوتر صغير يوسع وظائف متصفح الويب.

للمكونات الإضافية العديد من الاستخدامات: تشغيل الموسيقى، عرض الخرائط، التحقق من حساب البنك، التحكم في المدخلات، إلخ.

يمكن استخدام علامات <object> أو <embed> لدمج المكون الإضافي في صفحة HTML.

هذه العلامات تعريف حاويات الموارد (عادةً ليست موارد HTML) وتظهر بناءً على النوع، سواءً من قبل المتصفح أو المكون الإضافي الخارجي.

استخدام علامة <embed>

تعريف علامة <embed> حاوية للعناصر الخارجية (غير HTML) (هي علامة HTML5، غير صالحة في HTML4، لكنها تعمل في جميع المتصفحات).

يمكن استخدام هذا النص البرمجي لعرض ملف MP3 المدمج في صفحة الويب:

مثال

<embed height="100" width="100" src="song.mp3" />

جربها بنفسك

السؤال:

  • العلامة <embed> غير صالحة في HTML 4. لا يمكن مراقبة الصفحة عبر HTML 4.
  • المتصفحات المختلفة تدعم صيغ الصوت بشكل مختلف.
  • إذا لم يدعم المتصفح صيغة الملف دون مكون إضافي، لا يمكن تشغيل الصوت.
  • إذا لم يتم تثبيت المكون الإضافي على جهاز المستخدم، لا يمكن تشغيل الصوت.
  • إذا تم تحويل الملف إلى صيغة أخرى، لا يمكن تشغيله في جميع المتصفحات.

ملاحظة:استخدام <!DOCTYPE html> (HTML5) لحل مشكلة التحقق.

استخدام عنصر <object>

يمكن استخدام علامة <object tag> لتحديد حاوية للعناصر الخارجية (غير HTML).

يمكن استخدام هذا النص البرمجي لعرض ملف MP3 المدمج في صفحة الويب:

مثال

<object height="100" width="100" data="song.mp3"></object>

جربها بنفسك

السؤال:

  • المتصفحات المختلفة تدعم صيغ الصوت بشكل مختلف.
  • إذا لم يدعم المتصفح صيغة الملف دون مكون إضافي، لا يمكن تشغيل الصوت.
  • إذا لم يتم تثبيت المكون الإضافي على جهاز المستخدم، لا يمكن تشغيل الصوت.
  • إذا تم تحويل الملف إلى صيغة أخرى، لا يمكن تشغيله في جميع المتصفحات.

استخدام عنصر <audio> في HTML5

عنصر <audio> هو عنصر HTML5، غير صالح في HTML 4، لكنه يعمل في جميع المتصفحات.

مثال

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
لم يتم دعم صيغة الصوت هذا المتصفح.
</audio>

جربها بنفسك

استخدمت الأمثلة السابقة ملف mp3، لذا هو فعال في Internet Explorer و Chrome و Safari.

لجعل هذا الصوت يعمل في Firefox و Opera، تم إضافة ملف من نوع ogg. إذا فشل ذلك، سيتم عرض رسالة خطأ.

السؤال:

  • العلامة <audio> غير صالحة في HTML 4. صفحتك لا يمكن مراقبة HTML 4.
  • عليك تحويل ملف الصوت إلى صيغة مختلفة.
  • عنصر <audio> لا يعمل في المتصفحات القديمة.

ملاحظة:استخدام <!DOCTYPE html> (HTML5) لحل مشكلة التحقق.

أفضل حلول HTML

مثال

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

جربها بنفسك

استخدمت الأمثلة السابقة تنسيقين مختلفين للصوت. سيحاول عنصر HTML5 <audio> تشغيل الصوت باستخدام mp3 أو ogg. إذا فشل، سيقوم الكود بالتراجع للاختبار <embed>.

السؤال:

  • يجب عليك تحويل الصوت إلى تنسيق مختلف.
  • عنصر <audio> لا يمكنه��ح من خلال HTML 4 وXHTML.
  • عنصر <embed> لا يمكنه��ح من خلال HTML 4 وXHTML.
  • عنصر <embed> لا يمكنه العودة لعرض رسائل الخطأ.

ملاحظة:استخدام <!DOCTYPE html> (HTML5) لحل مشكلة التحقق.

أبسط طريقة لاضافة صوت إلى الموقع

ما هي أبسط طريقة لاضافة صوت إلى صفحة الويب؟

مشغل وسائل الإعلام لـ ياهو يعتبر من بين الأفضل.

استخدام مشغل وسائل الإعلام لـ ياهو هو طريقة مختلفة. كل ما تحتاجه هو أن تجعل ياهو يقوم بعملية تشغيل الأغاني.

يمكنه تشغيل mp3 وعدة تنسيقات أخرى. ببساطة سطر منفرد، يمكنك إضافته إلى صفحة الويب الخاصة بك، مما يجعل صفحة HTML سهلة التحول إلى قائمة تشغيل محترفة.

يقدم مشغل وسائل الإعلام لـ ياهو

مثال

<a href="song.mp3">Play Sound</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>

جربها بنفسك

استخدام مشغل وسائل الإعلام لـ ياهو مجاني. إذا كنت ترغب في استخدامه، يجب عليك إدراج هذا الكود JavaScript في أسفل الصفحة:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

بعد ذلك، ما تحتاج إلى القيام به هو ببساطة ربط ملف MP3 إلى HTML الخاص بك، وسيقوم JavaScript تلقائيًا بإنشاء مفتاح تشغيل لكل أغنية:

<a href="song1.mp3">Play Song 1</a>
<a href="song2.mp3">Play Song 2</a>
...
...
...

يقدم مشغل وسائل الإعلام لـ ياهو لمستخدميكم مفتاح تشغيل صغير وليس مشغل كامل. ومع ذلك، عند النقر على هذا المفتاح، سيتم فتح مشغل كامل.

لاحظ أن هذا المプレيير يبقى دائمًا في أسفل نافذة التطبيق. كل ما تحتاجه هو النقر عليه لسحبه للخارج.

استخدام الروابط

إذا كان الموقع يحتوي على روابط إلى ملفات وسائط، فإن معظم المتصفحات تستخدم تطبيق مساعد لتشغيل الملف.

يظهر هذا جزء من الكود الرابط إلى ملف mp3. إذا قام المستخدم بالنقر على هذا الرابط، فإن المتصفح يبدأ بتشغيل تطبيق مساعد لعرض هذا الملف:

مثال

<a href="song.mp3">Play the sound</a>

جربها بنفسك

الصوت المدمج

عندما تشمل الصوت في الصفحة أو كجزء من الصفحة، يُدعى ذلك بصوت مدمج.

إذا كنت تخطط لاستخدام الصوت المدمج في تطبيق الويب، يجب أن تكون على علم بأن الكثير من الناس يعتبرون الصوت المدمج مزعجاً. كما يجب أن تلاحظ أن المستخدمين قد قاموا بإغلاق خيار الصوت المدمج في المتصفح.

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

علامات الوسائط في HTML4.01

العلامة الوصف
<applet> غير مستخدم. تعريف applet المدمج.
<embed> غير مستخدم في HTML4، مسموح به في HTML5. تعريف العنصر المدمج.
<object> تعريف العنصر المدمج.
<param> تعريف معلمات العنصر.

علامات الوسائط في HTML5

العلامة الوصف
<audio> تعريف الصوت، مثل الموسيقى أو تدفقات الصوت الأخرى.
<embed> تعريف المحتوى المدمج، مثل البرامج المساعدة.