في السابق ، لم يكن لدى المتصفحات إمكانيات مدمجة لدعم محتوى الصوت والفيديو ، ولكن مع تطور الإنترنت ، أصبح دعم عناصر الوسائط المتعددة كإمكانيات للمتصفحات الحديثة أمرًا ضروريًا. تم إدخال عناصر جديدة في HTML5

يحدد تنسيق ملف الصوت بنية وعرض البيانات الصوتية عند تخزينها على وسيط (جهاز تخزين). للتخلص من تكرار البيانات الصوتية ، كقاعدة عامة ، يتم استخدام برامج ترميز صوتية خاصة ، بفضل ضغط البيانات الصوتية. المتصفحات الحديثة دعم تنسيقات الصوت الثلاثة التالية:

المستعرض	MP3	Wav	عوج
نعم	نعم	نعم
نعم	نعم	نعم
أوبرا	نعم	نعم	نعم
نعم	نعم	لا
بمعنى آخر	نعم	لا	لا
حافة	نعم	نعم	لا

• تنسيق MP3هو برنامج ترميز وحاوية في نفس الوقت. يتم استخدامه على نطاق واسع في كل مكان لاستضافة الموسيقى القابلة للتنزيل.
• تنسيق WAV- أيضًا برنامج ترميز وحاوية في نفس الوقت.
• حاوية Ogg + برنامج ترميز الصوت Vorbis... يشار إليه عادة باسم "Ogg Vorbis". تم تطويره بواسطة مجتمع Xiph ليحل محل ملفات MP3 و AAC و WMA الحاصلة على براءة اختراع.

أنواع MIME للصوت:

صيغة

أنواع MIME
MP3	صوت / تلفزيون
عوج	صوت / ogg
Wav	صوت / wav

دعم المتصفح

بطاقة شعار			أوبرا		اي اكسبلورر	حافة
	4.0	3.5	10.5	4.0	9.0	12.0

صفات

يصف	المعنى	وصف
تشغيل تلقائي	تشغيل تلقائي	يشير إلى أن الصوت سيبدأ تلقائيًا بمجرد أن يصبح جاهزًا.
ضوابط	ضوابط	يعرض عناصر تحكم ملف الوسائط المضمنة (زر التشغيل / الإيقاف المؤقت ، ومزلق التمرير للانتقال إلى مقطع معين ، ومنزلق الصوت).
حلقة	حلقة	حلقات تشغيل ملف (أغنيتنا جيدة - ابدأ من جديد) ..
صامت	صامت	يشير إلى أنه سيتم كتم الصوت (بدون صوت).
التحميل المسبق	تلقاءي البيانات الوصفية لا أحد	يحدد كيفية تحميل الصوت عند تحميل الصفحة. يتم تجاهل السمة في حالة وجود سمة التشغيل التلقائي.
src	عنوان Url	يحدد عنوان URL لملف الصوت.

مثال على الاستخدام

عنصر

الصوت في HTML5

في هذا المثال ، نقوم بما يلي:

تمت إضافة محتوى صوتي إلى الصفحة (العلامة

واحدة من أبرز الميزات HTML5يقوم ببث الصوت.

إذا كنت منخرطًا في مجال تطوير الويب ، فعندئذٍ مجموعة مختارة من 10 مشغلات صوت HTML5 مذهلةمفيد جدا لك.

- مشغل الصوت والفيديو وهو مكتوب بشكل نظيف HTML5و CSS... يتم دعم المتصفحات القديمة باستخدام فلاشو سيلفرلايتاللاعبين الذين يقلدون واجهة برمجة تطبيقات HTML5 MediaElement.
يحتوي MediaElement على العديد من الأشكال والدعم للأنظمة الأساسية الشائعة: WordPress و Drupal و Joomla وما إلى ذلك.

هذا المشغل بسيط للغاية ، لكنه عملي. عظيم عندما تحتاج إلى قوائم التشغيل والتأثيرات العصرية!

لاعب رائع آخر ، يمكن القول إنه الأفضل في هذه القائمة. الايجابيات من حيث أنه من السهل جدًا التخصيص وهو مرن بدرجة كافية في الحجم وقابل للتخصيص لعدد غير محدود من الألوان.
لديك دعم عبر المتصفحات ، وللمتصفحات الأقدم يوجد ذلك فلاش-نظرية.

انت تستخدم موتولسعلى موقع الويب الخاص بك؟ إذا كانت الإجابة بنعم ، فربما ستحب هذا اللاعب HTML5و Mootools جافا سكريبتإطار العمل. المشغل يعمل بشكل مثالي في جميع المتصفحات الحديثة.

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

مصدر: http://codecanyon.net/item/universal-html5-audio-player

الخامس التقنيات المعنية HTML5و فلاشمما يجعلها خفيفة الوزن للغاية ( 10 كيلو بايت) حل موثوق عبر المتصفح لتشغيل دفق الصوت.
تريد أن تعرف ما يمكنك القيام به مدير الصوت 2؟ قم بزيارة لمشاهدة العرض التوضيحي!

وصف

إضافة إعدادات تسجيل الصوت وتشغيلها وإدارتها على صفحة الويب. يتم تحديد مسار الملف عبر سمة src أو علامة متداخلة. داخل الحاوية

قائمة برامج الترميز التي تدعمها المتصفحات محدودة وهي موضحة في الجدول. 1.

فاتورة غير مدفوعة. 1. برامج الترميز والمتصفحات

ترميز	متصفح الانترنت	كروم	أوبرا	سفاري	ثعلب النار
ogg / فوربيس
wav
mp3
AAC

للتشغيل الشامل في المستعرضات المحددة ، يتم ترميز الصوت باستخدام برامج ترميز مختلفة وتتم إضافة الملفات في وقت واحد عبر العلامة .

بناء الجملة

صفات

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

علامة النهاية

مطلوب.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

الكسندر كليمينكوف - أربعة عشر

تظهر نتيجة المثال في متصفح Opera في الشكل. 1.

أرز. 1. تشغيل ملف صوتي

المتصفحات

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

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

نحن نستخدم

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

تشغيل الصوت في حلقة

تريد تكرار الصوت؟ ستساعدك سمة الحلقة على القيام بذلك. ولكن مرة أخرى ، لا تسيء استخدام التشغيل التلقائي والتكرار إذا كنت لا تريد أن يغادر المستخدم الموقع قبل الأوان.

عرض الضوابط

بدلاً من تشغيل الأصوات تلقائيًا ، وهي بالتأكيد ممارسة سيئة ، يجب أن تدع المتصفح يعرض بعض عناصر التحكم ، مثل أزرار الصوت والتشغيل (الإيقاف المؤقت). من السهل القيام بذلك عن طريق إضافة السمة ببساطة ضوابط.

تنسيقات ملفات مختلفة

العلامة مدعومة من قبل معظم المتصفحات الحديثة ، ولكن المشكلة هي أن المتصفحات المختلفة تدعم تنسيقات ملفات مختلفة. Safari ، على سبيل المثال ، يمكنه تشغيل ملفات MP3 ، لكن Firefox لا يمكنه تشغيل ملفات OGG بدلاً من ذلك. يتمثل حل هذه المشكلة في استخدام كلا التنسيقين بحيث يمكن لكل زائر سماع الصوت ، بغض النظر عن المتصفح الذي يستخدمه.

تحديد نوع ملفات MIME

عند استخدام تنسيقات ملفات مختلفة ، من الأفضل تحديد نوع MIME لكل ملف لمساعدة المتصفح في ترجمة الملف الذي يدعمه. يمكن القيام بذلك بسهولة باستخدام السمة نوع.

للمتصفحات القديمة

ماذا لو كان الزائر يستخدم IE6 أو متصفحًا آخر من عصور ما قبل التاريخ لا يدعم العلامة؟ كل شيء سهل: يوجد أدناه الرمز الذي سيعرض الرسالة للمتصفحات التي لا تدعم العلامة.

ملف التخزين المؤقت

عند تشغيل ملفات كبيرة ، يمكن استخدام التخزين المؤقت للملفات. لهذا يمكنك استخدام السمة التحميل المسبق... يمكن أن يستغرق الأمر 3 قيم:

• لا أحد- إذا كنت لا تريد استخدام المخزن المؤقت للملف ؛
• تلقاءي- إذا كنت تريد من المتصفح تخزين الملف بالكامل مؤقتًا ؛
• البيانات الوصفية- لتنزيل معلومات الخدمة فقط (مدة الصوت ، إلخ).

التحكم في تشغيل JavaScript

من السهل جدًا التحكم في مشغل صوت HTML5 عبر JavaScript. يوضح المثال التالي كيف يمكنك إنشاء عناصر التحكم الأساسية في مشغل الصوت باستخدام JavaScript:

هذا كل شيء لهذا اليوم.
آمل أن تساعدك هذه المقالة في فهم القدرات الأساسية لعلامات HTML5. .

يحدث هذا السؤال في كثير من الأحيان ، لذلك قررت تخصيص مقال منفصل له في الدروس. نظرًا لأن HTML لا يحتوي على تقنية عالمية لتشغيل الصوت لجميع المتصفحات ، لحل هذه المشكلة ، أقترح تنزيل ملف مشغل الصوت ، كما هو الحال في معظم المواقع. نفعل كل شيء في خطوات:

1. في الاستضافة ، حيث يوجد موقعك ، في الدليل الجذر (المجلد حيث يوجد ملف الفهرس) ، قم بإنشاء مجلد الصوت. في المستقبل ، ستضع جميع الملفات الصوتية فيه.

3. الآن حدد الملفات التي تريدها ، ويفضل أن تكون بتنسيق mp3. قم بإنشاء مجلد صوتيفي جذر الموقع وتحميلها.

4. كل ما تبقى هو إدخال رمز اتصال المشغل. إنه مناسب لأي موقع في المكان المناسب ، ما عليك سوى تحديد المسار إلى ملف المشغل والملف الصوتي ، واستبدال الكلمات وفقًا لذلك نطاقكو audio_file_name:

وانت انتهيت! يمكنك أيضا رؤية العمل مثال.

كيفية ضبط موسيقى الخلفية في لغة تأشير النص الفائق

باستخدام إمكانيات HTML والمتصفح ، يمكنك أيضًا إدراج موسيقى خلفية في الصفحة. ستحتاج إلى ملف صوتي بالتنسيق الصحيح: WAV أو AU أو MIDI أو MP3. يمكنك استخدام أي ملف بالامتداد المحدد كمثال.

الطريقة الأولىهي علامة التضمين. يتم استخدام عنصر التضمين لتحميل وعرض الكائنات (على سبيل المثال ، ملفات الفيديو ، وأفلام الفلاش ، وبعض ملفات الصوت ، وما إلى ذلك) التي لا يفهمها المتصفح أصلاً.

بناء الجملة بسيط للغاية:

لا حاجة لعلامة إغلاق.

الآن دعنا نلقي نظرة على مثال لسجل به سمات ، وما يليه مع فك تشفيرها:

قم بتضمين سمات العلامات لتشغيل الصوت في html
العرض - عرض اللوحة بالبكسل (أو النسبة المئوية)
الارتفاع - ارتفاع اللوحة بالبكسل (أو النسبة المئوية)
محاذاة - موضع اللوحة بالنسبة إلى النص ، القيم المحتملة هي اليسار ، اليمين ، الوسط
مخفي - يسمح لك بإخفاء اللوحة ، قيم السمات: صحيح - اللوحة مخفية ، خطأ - اللوحة مرئية (القيمة الافتراضية)
بدء التشغيل التلقائي - القيمة صحيحة - يبدأ المشغل تلقائيًا عند تحميل الصفحة ، خطأ - ينتظر الضغط على زر التشغيل
loop - loop، true - يتم تشغيل المسار في دائرة ، وإذا كان خطأ - مرة واحدة فقط

الطريقة الثانية.قديم جدًا ، ولكنه عملي أيضًا) أضف اللحن إلى نفس المجلد (الدليل) حيث يوجد ملفك ، وفي النص اكتب الكود التالي:

نتيجة لذلك ، بعد تحميل الصفحة ، سيصدر اللحن الذي حددته في علامة bgsound. الآن دعونا نلقي نظرة فاحصة على سمات العلامة. :

src- المسار إلى ملف الصوت الخاص بك
حلقة- كم مرة يعاد اللحن (إذا -1 ، فإنه يتكرر إلى ما لا نهاية)
الرصيد- قيمة توازن الاستريو (من -10000 إلى 10000)
الصوت- حجم عزف اللحن ، حيث 0 هو الحد الأقصى ، و -10000 هو الحد الأدنى.

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

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

أدخل الصوت والموسيقى في HTML5 - علامة الصوت

صوتي- علامة مقترنة تحدد صوت الخلفية أو الموسيقى أو دفق صوتي آخر على الموقع.

سمات علامة الصوت

تشغيل تلقائي- يتم تشغيل الملف على الفور عند تحميل الصفحة (على غرار موسيقى الخلفية bgsound)
ضوابط- اعرض لوحة تحكم اللاعب في المتصفح
حلقة- يقوم بتشغيل الملف مرة أخرى بعد نهايته
التحميل المسبق- سيتم تنزيل الملف الصوتي مع تحميل الصفحة
src- المسار إلى ملف الصوت (mp3 أو ogg)

عينة رمز مع علامة الصوت

الصوت في HTML 5