الصوت في 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. لا يمكن للصفحة passage 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. لا يمكن للصفحة passage 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 الخاص بك، وسيقوم جافا سكريبت بشكل تلقائي بإنشاء زر تشغيل لكل أغنية:

<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>

جربها بنفسك

الصوت المدمج

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

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

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

تسميات وسائط HTML 4.01

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

تسميات وسائط HTML 5

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