English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
يمكن تشغيل الصوت في HTML بطرق مختلفة.
تشغيل الصوت في HTML ليس سهلاً!
تحتاج إلى معرفة الكثير من المهارات لضمان أن يمكن تشغيل ملفاتك الصوتية في جميع المتصفحات (Internet Explorer, Chrome, Firefox, Safari, Opera) وعلى جميع الأجهزة (PC, Mac, iPad, iPhone).
في هذا الفصل، يلخص الدليل الأساسي المشاكل والطرق لحلها.
الملحقات المتصفحية هي برامج حاسوب صغيرة تتمدد وظائف متصفح الويب.
يمكن إضافة الملحقات باستخدام علامة <object> أو علامة <embed> على الصفحة.
تلك العلامات تعرف صندوق موارد (عادةً ليست موارد HTML) وتظهر بناءً على النوع، سواء من قبل المتصفح أو من خلال الملحقات الخارجية.
تعريف علامة <embed> حاوية لمحتوى خارجي (غير HTML) (هي علامة HTML5، غير قانونية في HTML4، ولكن تعمل في جميع المتصفحات).
يمكن عرض ملف MP3 المدمج في الصفحة باستخدام قطعة الكود التالية:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>دليل الأساسيات (oldtoolbag.com)</title> </head> <body> <object height="50" width="100" data="/run/html/horse.mp3"></object> <p>إذا لم تتمكن من سماع الصوت، فقد لا يدعم جهازك أو المتصفح صيغة الملف.</p> <p>أو ربما لم تفتح مكبرات الصوت.</p> </body> </html>اختبار لـ ‹/›
علامة <embed> غير صالحة في HTML 4. لا يمكن التحقق من الصفحة باستخدام HTML 4.
تختلف دعم المتصفحات للصيغ الصوتية.
إذا لم يدعم المتصفح صيغة الملف هذا، فإن الصوت لا يمكن تشغيله بدون مكون إضافي.
إذا لم يتم تثبيت المكون الإضافي على جهاز المستخدم، فإن الصوت لا يمكن تشغيله.
إذا تم تحويل الملف إلى صيغة أخرى، لا يمكن تشغيله في جميع المتصفحات.
يمكن استخدام علامة <object> لتحديد حاوية لمحتوى خارجي (غير HTML).
يمكن عرض ملف MP3 المدمج في الصفحة باستخدام قطعة الكود التالية:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>دليل الأساسيات (oldtoolbag.com)</title> </head> <body> <object height="50" width="100" data="/run/html/horse.mp3"></object> <p>إذا لم تتمكن من سماع الصوت، فقد لا يدعم جهازك أو المتصفح صيغة الملف.</p> <p>أو ربما لم تفتح مكبرات الصوت.</p> </body> </html>اختبار لـ ‹/›
تختلف دعم المتصفحات للصيغ الصوتية.
إذا لم يدعم المتصفح صيغة الملف هذا، فإن الصوت لا يمكن تشغيله بدون مكون إضافي.
إذا لم يتم تثبيت المكون الإضافي على جهاز المستخدم، فإن الصوت لا يمكن تشغيله.
إذا تم تحويل الملف إلى صيغة أخرى، لا يمكن تشغيله في جميع المتصفحات.
عنصر <audio> في HTML5 هو عنصر HTML5، وهو غير قانوني في HTML 4، ولكن يعمل في جميع المتصفحات.
عنصر <audio> يعمل في جميع المتصفحات الحديثة.
التوافق مع المتصفحاتالرقم في الصيغة يوضح إصدار المتصفح الأول الذي يدعم هذه الخاصية.
| العنصر | Chrome | IE | Firefox | Safari | Opera |
| <audio> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
فيما يلي سنستخدم علامة <audio> لوصف ملف MP3 (مقبولة في Internet Explorer و Chrome و Safari)، وتم إضافة ملف نوع OGG (مقبولة في متصفحات Firefox و Opera). إذا فشل ذلك، سيظهر رسالة خطأ نصية:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>دليل الأساسيات (oldtoolbag.com)</title> </head> <body> <audio controls> <source src="/run/html/horse.mp3" type="audio/mpeg"> <source src="/run/html/horse.ogg" type="audio/ogg"> لم يتم دعم صيغة الصوت هذا المتصفح. </audio> </body> </html>اختبار لـ ‹/›
علامة <audio> غير صالحة في HTML 4. لا يمكن التحقق من صفحتك باستخدام HTML 4.
عليك تحويل ملفات الصوت إلى صيغة مختلفة.
عنصر <audio> لا يعمل في المتصفحات القديمة.
استخدام مثال هنا شكلين مختلفين من صيغ الصوت. عنصر <audio> في HTML5 يحاول تشغيل الصوت باستخدام mp3 أو ogg. إذا فشل ذلك، فإن الكود سيرجع للتحقق من علامة <embed>.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>دليل الأساسيات (oldtoolbag.com)</title> </head> <body> <audio controls> <source src="/run/html/horse.mp3" type="audio/mpeg"> <source src="/run/html/horse.ogg" type="audio/ogg"> <embed height="50" width="100" src="/run/html/horse.mp3"> </audio> </body> </html>اختبار لـ ‹/›
يجب عليك تحويل الصوت إلى صيغة مختلفة.
عنصر <embed> لا يمكنه العودة لعرض رسالة خطأ.
إذا كان يحتوي الموقع على رابط إلى ملف وسائط، سيستخدم معظم المتصفحات "التطبيق المساعد" لعرض الملف.
يظهر النص الفقري التالي رابطًا إلى ملف mp3. إذا قام المستخدم بالنقر على الرابط، فإن المتصفح سيقوم بفتح "التطبيق المساعد" لعرض الملف:
<a href="/run/html/horse.mp3">Play the sound</a>اختبار لـ ‹/›
عندما تشمل صوتًا في صفحة الويب أو كجزء من صفحة الويب، يُدعى ذلك بالصوت المدمج.
إذا كنت تخطط لاستخدام الصوت المدمج في تطبيق الويب، يجب أن تكون على علم بأن الكثير من الناس يرون الصوت المدمج مزعجًا. كما يجب أن تأخذ في الاعتبار أن المستخدم قد قام بإغلاق خيار الصوت المدمج في المتصفح.
أفضل نصيحتنا هي أن تشملها فقط حيث يرغب المستخدم في سماع الصوت المدمج. مثال إيجابي هو، عند الحاجة إلى سماع تسجيل وتحديد رابط ما، يتم فتح الصفحة ثم بدء التسجيل.
جديد: علامة HTML5 الجديدة
| العلامة | الوصف |
| <embed> | تعريف عنصر مدمج. غير مستحب في HTML4، ولكن مسموح به في HTML5. |
| <object> | تعريف عنصر مدمج |
| <param> | تعريف معلمات العنصر |
| <audio>HTML5 | تعريف محتوى الصوت |
| <video>HTML5 | تعريف فيديو أو فيلم |
| <source>HTML5 | تعريف موارد وسائط الإعلام لمكون <video> و <audio> |
| <track>HTML5 | تحديد ملفات الترجمة للعناصر الوسائطية أو ملفات تحتوي على نصوص ( <video> و <audio> ) |