HTML5 дыбысын қолдану: аудионы біріктіру бойынша кеңестер мен сабақтар. HTML5 аудио тегін Html5 аудио ағынын меңгеру

1. Сайтыңыз орналасқан хостингте, түбірлік каталогта (индекс файлы орналасқан қалта) аудио қалтаны жасаңыз. Болашақта сіз оған барлық аудио файлдарды орналастырасыз.

3. Енді таңдаңыз қажетті файлдар, жақсырақ mp3 пішімінде. Қалта жасаңыз аудиосайттың түбірінде және оларды жүктеп алыңыз.

4. Ойнатқыштың қосылым кодын енгізу ғана қалады. Ол кез келген сайтқа жарайды Дұрыс жерде сөздерді сәйкесінше ауыстыра отырып, ойнатқыш файлы мен аудио файлға жолды көрсету керек. сіздің_доменжәне аудио_файл аты:

Және бәрі дайын! Жұмысты көруге болады мысал.

html-де фондық музыканы қалай орнатуға болады

Бірінші жолендіру тегі болып табылады. ендіру элементішолғыш өздігінен түсінбейтін объектілерді (мысалы, бейне файлдар, флэш-фильмдер, кейбір дыбыстық файлдар және т.б.) жүктеу және көрсету үшін қолданылады.

Синтаксис өте қарапайым:

Жабу белгісі қажет емес.

Енді біз атрибуттары бар жазбаның мысалын және төменде олардың декодтауын қарастырамыз:

Html форматындағы дыбысты ойнату үшін тег атрибуттарын ендіру
ені - пиксельдегі панельдің ені (немесе пайызбен)
биіктігі - пиксельмен (немесе пайызбен) панель биіктігі
туралау - мәтінге қатысты панельдің орны, мүмкін мәндер сол, оң, орталық
жасырын - панельді жасыруға мүмкіндік береді, атрибут мәндері: true - панель жасырын, жалған - панель көрінеді (әдепкі мән)
автостарт- шын- бет жүктелген кезде ойнатқыш автоматты түрде іске қосылады, false - ойнату түймесін басқанша күтеді
цикл – цикл, шын – трек шеңбер бойымен ойналады, ал егер жалған болса – тек бір рет

Екінші жол.Өте ескі, бірақ сонымен бірге практикалық) Әуенді файлыңыз орналасқан қалтаға (каталогқа) қосыңыз және негізгі мәтінге келесі кодты жазыңыз:

Нәтижесінде бетті жүктегеннен кейін bgsound тегінде сіз көрсеткен әуен естіледі. Енді тег атрибуттарын толығырақ қарастырайық :

src- аудио файлыңызға жол
цикл- әуенді неше рет қайталау керек (егер -1 болса, онда шексіз қайталанады)
теңгерім- стерео баланс мәні (-10000-нан 10000-ға дейін)
көлемі- әуеннің көлемі, мұндағы 0 - максимум, ал -10000 - минимум.

Дегенмен, ойнатқышты кез келген жолмен басқаруға мүмкіндік болмайды - бет жаңартылған сайын трек қайта ойнатылады.

Фондық музыканы енгізу әдісін сипаттағаннан кейін, мен сізді бұдан бас тартқым келеді, өйткені көптеген пайдаланушылар, әдетте, әртүрлі сайттарға кіру кезінде музыканы тыңдайды. Сондықтан, сүйемелдеу музыкалық сүйемелдеу оны тек сайтпен қойындыны жабуға мәжбүрлей алады.

Аудио мен музыканы HTML5 ішіне енгізу – аудио тег

Аудио тегтердің атрибуттары

авто ойнату- файл бет жүктелген кезде бірден ойнатылады (bgsound фондық музыкасына ұқсас)
басқару элементтері- шолғышта ойнатқыштың басқару тақтасын көрсету
цикл- файл аяқталғаннан кейін оны қайта ойнатады
алдын ала жүктеу- аудио файл бет жүктелуімен бірге жүктеледі
src- аудио файлға жол (mp3 немесе ogg)

Аудио тегі бар үлгі код

HTML 5 тіліндегі аудио

HTML5 аудио және бейне тегтері алғаш рет енгізілгенде, кодек пен шолғыштың үйлесімсіздігі оларды пайдалануды қиындатты және оларды үлкен веб-сайттарда қолдану мүмкін болмады. Бұл тегтер тәжірибелік код жазатын немесе кросс-браузер медиасын әзірлейтін компаниялар үшін жақсы болды, бірақ олар үшін әмбебап қолдану HTML5 Media API тым сенімсіз болды.

Бүгін көп нәрсе өзгерді. Браузерлер мен JavaScript кітапханалары HTML5 медиасын аудио және бейне мазмұнын көрсететін кез келген жоба үшін әдепкі ретінде пайдалануға болатын (және керек) деңгейге жетті. Тіпті HTML5-те ойнату үшін бар Flash және Silverlight бейне мазмұнын қайта конфигурациялау салыстырмалы түрде оңай болды. Бұл мақалада біз медиа ойнату үшін HTML5 пайдаланудың артықшылықтарын қарастырамыз, кейбір код мысалдарын зерттейміз, әзірлеушілер кездесетін кейбір негізгі мәселелерді талқылаймыз және осы мәселелерді шешу жолдары туралы сөйлесеміз.

HTML5 медиасының артықшылықтары

Медиа көрсету үшін HTML5 пайдаланудың артықшылығы мынада: оның орнына HTML, CSS және JavaScript дағдыларыңызды пайдалана аласыз Flash оқунемесе Silverlight. HTML тілінде түймелерді жасауды және оларды басқаруды білсеңіз JavaScript, содан кейін сіз HTML5 Media үшін әзірлеуге қажеттінің бәрін білесіз. HTML5 медиасында жаңа трек элементін пайдаланатын субтитрлер мен субтитрлерді қолдау бар; да қарастырылады қосымша функциялар, мысалы, бейне манипуляциясы үшін тікелей байт қатынасын қолдау.

Сонымен қатар, HTML5 бейне және аудио тегтері арқылы мультимедианы ойнату Flash немесе Silverlight сияқты қосылатын модульдерге қарағанда тиімдірек, нәтижесінде ойнату біркелкі және батареяның қызмет ету мерзімі ұзарады. Бұған қоса мобильді құрылғыларбасқарылады Windows телефоны 7.5, Apple iOS және Android (және Windows 8 жүйесіндегі Metro стиліндегі шолғыш) тек HTML5 бейне және аудио тегтері арқылы мультимедианы ойнатуды қолдайды. Кейбір андроид құрылғылары Flash-ті қамтиды, бірақ Adobe жақында одан әрі жұмыстан бас тартты мобильді нұсқасы Flash, яғни болашақта HTML5 мобильді құрылғыларда медиа ақпаратты көрсетудің жалғыз жолы болады.

HTML5 қарапайым ойнату және басқару элементтері атрибуты

Бейнені ойнату үшін Flash немесе Silverlight пайдаланылған күндері бұл тапсырманы орындау үшін ең қарапайым белгілеу (бұл жағдайда mp4 бейнені ойнату) келесідей болады:

Осы кірістірілгендерді салыстырыңыз нысан тегтері, бірдей h.264 кодталған бейнені ойнату үшін пайдаланылатын келесі HTML5 бейне тегімен параметр және ендіру:

Бұл опция әлдеқайда қарапайым - тек таза HTML, бұл өзін-өзі түсіндіреді. Браузер бастапқы кадрдың биіктігі мен енін анықтау үшін жеткілікті бейне жүктеп алған кезде, ол бейненің өлшемін сәйкесінше өзгертеді. Бірақ, img тегтері сияқты, бетті қайта жүктеудің қажеті болмас үшін биіктік пен ен атрибуттарын көрсеткен дұрыс. Сонымен қатар, стиль төлсипатын px немесе ені мен биіктігі пайыздарын көрсету үшін пайдалануға болады (кейінгі мысалдарда екеуін де қолданамын).

Мен қосқан атрибуттардың бірі - басқару элементтері. Ол шолғышқа әдетте ойнату/кідірту қосқышын, орындалу жолағын және дыбыс деңгейін басқару элементтерін қамтитын кірістірілген ойнатуды басқару жолағын көрсетуді ұсынады. Басқару элементтері логикалық атрибут болып табылады, яғни оған мән тағайындаудың қажеті жоқ. XHTML-ге жақын синтаксисте controls="controls" деп жазуға болады, бірақ браузер әрқашан басқару элементтерін ол жоқ болса, жалған деп есептейді, ал егер ол бар болса немесе мән тағайындалған болса, шын деп есептейді.

HTML5 медиа төлсипаттары және еншілес көз тегтері

Аудио және бейне элементтерінде браузердің соңғы пайдаланушыға медиа мазмұнды қалай көрсететінін анықтайтын бірнеше жаңа атрибуттар бар:

• srcойнату үшін бір медиа файлды көрсетеді (әртүрлі кодектері бар бірнеше көздер үшін төменде қараңыз);
• постер- пайдаланушы Ойнату түймесін басқанға дейін көрсетілетін суреттің URL мекенжайы (тек бейне үшін);
• алдын ала жүктеушолғыш медиа файлды қалай және қашан жүктеп алатынын анықтайды. Үш ықтимал мән бар: ешқайсысы (пайдаланушы ойнай бастағанша бейне жүктеп алынбайды), метадеректер (браузерге кадрдың биіктігі мен енін және медиа клиптің ұзындығын анықтау үшін жеткілікті деректерді жүктеп алуды айтады) және автоматты (мүмкіндік береді) пайдаланушы ойнатуды бастамас бұрын браузер қанша бейне жүктеп алу керектігін шешеді);
• авто ойнату- бейнені бет жүктелгеннен кейін бірден бастау үшін қолданылатын логикалық атрибут (мобильді құрылғылар өткізу қабілеттілігін сақтау үшін бұл төлсипатты жиі елемейді);
• цикл- жазбаның соңына жеткенде бейнені қайта ойнатуды тудыратын логикалық атрибут;
• дыбысы өшірілді- дыбыс өшірілген бейнені бастау керек пе, жоқ па көрсететін логикалық атрибут;
• басқару элементтері- браузердің басқару элементтерін көрсету керек пе, жоқ па көрсететін логикалық атрибут;
• еніжәне биіктігібейнені белгілі бір өлшеммен ойнатуды орнатыңыз (тек бейне үшін, мәндер пайызбен көрсетілуі мүмкін емес).

Мәтін элементтерін белгілі бір уақытқа көрсету

Браузерлер сонымен қатар бейнелердегі субтитрлерді, жабық жазуларды, аудармаларды және түсініктемелерді қолдайтын трек элементін енгізуді бастады. Мұнда трек бар бейне элементі бар: еншілес элемент:

Бұл мысалда мен трек элементіндегі бес мүмкін атрибуттың төртеуін қолдандым:

• src- Web Video Timed Text (WebVTT) немесе Timed Text Markup Language (TTML) пішіміндегі файлға сілтеме;
• srclang- TTML файлының тілі (мысалы, en, es немесе ar);
• мейірімдімәтін мазмұнының түрін көрсетеді: субтитрлер, тақырыптар, сипаттамалар, тараулар немесе метадеректер;
• заттаңбатректі таңдаған пайдаланушыға көрсетілетін мәтінді сақтайды;
• әдепкібастапқы трек элементін анықтайтын логикалық төлсипат болып табылады.

WebVTT қарапайым мәтін пішімі, ол бір жолдық мәлімдемеден (WEBVTT FILE) басталады, содан кейін басталу және аяқталу уақыттарын тізімдейді; --> таңбалары бөлгіш ретінде пайдаланылады және басталу және аяқталу уақыттарынан кейін сол уақыт аралығы ішінде көрсетілетін мәтін көрсетіледі. Мұнда екі түрлі уақыт интервалында екі мәтін жолын көрсететін қарапайым WebVTT файлы берілген:

WEBVTT ФАЙЛ 00:00:02.5 --> 00:00:05.1 Бұл көрсетілетін мәтіннің бірінші жолы. 00:00:09.1 --> 00:00:12.7 Бұл жол бейнеде кейінірек пайда болады.

Осы жазу кезінде трек элементіне тек ішінде қолдау көрсетілді Internet Explorer 10 Platform Preview және Chrome 19 және басқа браузерлер бұл қолдауды жақын арада алуы керек. Мен кейінірек талқылайтын кейбір JavaScript кітапханалары әлі сәйкес іске асырылуы жоқ браузерлерге трек элементіне қолдау қосады, бірақ трек тегтерін талдайтын captionator.js (captionatorjs.com) бөлек тректі қолдау кітапханасы да бар. , WebVTT пішіміндегі файлдарды және TTML (сонымен қатар SRT және YouTube SBV) оқиды және әлі жергілікті қолдауы жоқ браузерлер үшін UI ұсынады.

HTML5 Media Control сценарийін жазу

Бұрын мен браузердің басқару элементтерін бейне немесе аудио тегтерінің үстіне көрсету үшін басқару элементтері төлсипатын пайдаландым. Мәселе мынада, әрбір браузерде веб-сайтыңыздың дизайнына сәйкес келмейтін басқару элементтері бар. Дәлірек болу үшін шолғыштың басқару элементтерін алып тастап, одан кейін бетке қосуға болады реттелетін түймелер, JavaScript коды арқылы басқарылады. Сондай-ақ, бейне немесе аудио ойнату процесінің күйін бақылау үшін оқиға тыңдаушыларын қосуға болады. Келесі мысалда мен басқару элементтері төлсипатын жойдым және негізгі басқару тақтасы ретінде пайдаланылатын бейненің астына белгілеуді қостым:

Қарапайым JavaScript коды ( күріш. бір) бейнені ойнатуды басқарады және бейнедегі ағымдағы уақытты көрсетеді, сонымен қатар бейнеде көрсетілген толыққанды ойнатқышты жасайды. күріш. 2(Internet Explorer 9). (HTML5-те type="text/javascript" төлсипаты сценарий тегінде міндетті емес екенін ескеріңіз.)

Күріш. 1. Бейнені ойнатуды басқару

Бейне тегін (мысалы, Internet Explorer 8) немесе h.264 кодегін (Firefox және Opera) қолдамайтын браузерлер үшін MediaElement.js Flash (немесе Silverlight - пайдаланушы орнатқан нәрсеге байланысты) өтемақы деңгейін қосады. HTML5 Media сипаттарын және мен айтқан оқиғаларды қолдау үшін мұндай браузерлерді «жаңартыңыз».

Дыбысты қолдау үшін бір MP3 файлын пайдалануға болады:

Сонымен қатар, сіз бір Ogg/Vorbis файлын қоса аласыз:

Аудио тегін (Internet Explorer 8) немесе Ogg/Vorbis кодектерін (Internet Explorer 9+ және Safari) қолдамайтын шолғыштар үшін MediaElement.js осы браузерлердің барлығы түпнұсқада жұмыс істейтіндей жұмыс істейтіндей өтемақы қабатын енгізеді. осы кодекті қолдаңыз. (Ogg/Vorbis мобильді құрылғыларда ойнамайтынын ескеріңіз.)

MediaElement.js сонымен қатар трек элементіне қолдау көрсетуді және JavaScript API интерфейсін жүзеге асыратын браузерлер үшін кірістірілген толық экранды қамтиды. Сіз реттелетін HTML5 оқиғаларын немесе бақылау сипаттарын қоса аласыз және олар кез келген браузерде және кез келген мобильді құрылғыда жұмыс істейді.

Кейбір мәселелерге қарамастан, HTML5 бейне және аудио элементтері, әсіресе мен ұсынған тамаша кітапханалармен біріктірілгенде, бар веб-сайттарға қосу оңай және кез келген жаңа жобада әдепкі болуы керек екенін көрсеттім деп үміттенемін.

HTML5 дыбысыжақсартылған аудио мазмұнды өңдеу мүмкіндіктерін қамтамасыз етеді. Соңғы уақытқа дейін веб-беттерге дыбыстық файлдарды қосудың жалғыз жолы тегті пайдаланып фондық дыбысты біріктіру болды , ол пайдаланушы бетті өшіру опциясынсыз қараған кезде ойнатылады.

HTML5 спецификациясына жаңа элемент қосу арқылы

HTML5 дыбысын веб-бетке қалай қосуға болады

1. Элемент

Браузерді қолдау

IE: 9.0
Firefox: 3.5 негізгі қолдау, 15.0 толық қолдау
Chrome: 3.0
сафари: 3.1
опера: 10.5
iOS Safari: 7.1
Opera Mini: —
Android браузері: 4.1
Android жүйесіне арналған Chrome: 44

HTML5 элементі

Controls атрибуты браузерлерге аудио ойнатқышты басқару интерфейсін көрсетеді - ойнату, кідірту, дыбыс деңгейі түймелері.

Қазіргі уақытта барлық браузерлерде жұмыс істейтін аудио пішімі жоқ, сондықтан мазмұнды барынша кең аудиторияға қолжетімді ету үшін элементтің src атрибуты арқылы ұсынылған бірнеше аудио көздерін қосу ұсынылады. . Бұл ретте элементке қолдау көрсетпейтін браузерлер үшін резервтік мазмұнды қосуға болады

2. Аудио кодектер

Аудио кодек (декодер) – сандық деректерді аудио файлға немесе аудио ағын пішіміне түрлендіруге арналған бағдарлама. Танымал аудио форматтары келесідей:

MP3- жоғалтатын қысуды қолданатын және файл өлшемін бірнеше есе азайтуға мүмкіндік беретін ең танымал аудио пішімі. Роялтиге байланысты Firefox және Opera қолданбаларына қолдау көрсетілмейді.

AAC (Жетілдірілген аудио кодек) - MP3-ге ұқсас жабық кодек, бірақ соңғысымен салыстырғанда файл өлшемі ұқсас жоғары дыбыс сапасын қолдайды.

Ог Ворбис- еркін формат ашық дереккөз, Firefox, Opera және Chrome жүйелерінде қолдау көрсетіледі. қамтамасыз етеді жақсы сападыбыс, бірақ аппараттық ойнатқыштар кеңінен қолдамайды.

3. Баламалы медиа ресурстары

Элемент үшін бірнеше медиа ресурстарды қосу үшін пайдаланылады

4. Субтитрлер мен тақырыптарды қосыңыз

Элемент еншілес элемент ретінде пайдаланылады

5. Стильденген аудио ойнатқыштың мысалы

CSS мәнерлерін пайдалану арқылы сіз аудио ойнатқышқа әдеттен тыс көрініс бере аласыз. Ойнату шағын сценариймен (jQuery кітапханасы арқылы) басқарылады, дыбыс меңзерді жазбаның үстіне апарған кезде пайда болады.

Сипаттама

Веб-бетте аудио жазба параметрлерін қосады, ойнатады және басқарады. Файлға жол src төлсипаты немесе кірістірілген тег арқылы көрсетіледі. Контейнердің ішінде

Браузерлер қолдайтын кодектер тізімі шектеулі және кестеде берілген. бір.

Көрсетілген браузерлерде әмбебап ойнату үшін дыбыс әртүрлі кодектер арқылы кодталады және файлдар бір уақытта тег арқылы қосылады. .

Синтаксис

Атрибуттар

Жабу белгісі

Міндетті.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

Александр Клименков - Он төрт

Opera браузеріндегі мысалдың нәтижесі суретте көрсетілген. бір.

Күріш. 1. Аудио файлды ойнату

Браузерлер

Дыбысты ойнатуды басқару элементтері сыртқы түрі бойынша браузерлерде ерекшеленеді, бірақ негізгі элементтері бірдей. Бұл ойнату / кідірту түймесі, трек ұзындығы, өткен және жалпы ойнату уақыты, сондай-ақ дыбыс деңгейі.

Ең керемет қасиеттердің бірі HTML5аудио ағыны болып табылады.

Егер сіз веб-әзірлеу саласымен айналысатын болсаңыз, онда таңдау 10 керемет HTML5 аудио ойнатқышысізге өте пайдалы.

- таза түрде жазылған аудио және бейне ойнатқыш HTML5және css. Ескі браузерлерге қолдау көрсетіледі Жарқылжәне күміс жарықимитациялайтын ойыншылар HTML5 MediaElement API.
MediaElement танымал платформаларға арналған көптеген дизайнға және қолдауға ие: WordPress, Drupal, Joomla және т.б.

Бұл ойнатқыш өте минималистік, бірақ функционалды. Ойнату тізімдері мен сәнді эффектілер қажет болғанда жақсы!

Тағы бір керемет ойыншы, мүмкін, бүкіл тізімнің ең жақсысы. артықшылықтар өйткені оны орнату өте оңай және өлшемі өте икемді және шексіз түстерде теңшеуге болады.
Сағат кросс-браузерлер қолдауы, ал ескі браузерлер үшін ол бар Жарқыл-аналогтық.

Сіз пайдаланып жатырсыз Mootoolsсіздің веб-сайтыңызда? Олай болса, бұл ойыншы сізге ұнайтын шығар HTML5және Mootools JavaScriptшеңбер. Ойнатқыш барлық заманауи браузерлерде тамаша жұмыс істейді.

Бұл ойыншы тізімдегі ақылы жалғыз ойыншы. Ол бәріне тұрарлық $5 бірақ ол тамаша жұмыс істейді. Ойнатқыштың көптеген пайдалы мүмкіндіктері бар, мысалы, дыбысты сигнал қабаты арқылы ұстап қалудан қорғау, бұл коммерциялық пайдалану үшін өте жақсы.

Дереккөз: http://codecanyon.net/item/universal-html5-audio-player

В қатысты технологиялар HTML5және Жарқыл, бұл өте жеңілдетеді ( 10 Кб) браузерлер арасындағы аудио ағынының сенімді шешімі болып табылады.
Не істеуге болатынын білгіңіз келе ме? Дыбыс реттеушісі 2? Демонстрацияны көру үшін кіріңіз!