Овладяване на HTML5 аудио тага. HTML5 аудио и видео тагове на практика в различни браузъри Файлови формати и техните MIME типове

С появата на сравнително бързи интернет връзки Flash беше единственият начин за възпроизвеждане на звуци на уебсайтове. Но HTML5 ще промени фундаментално начина, по който се възпроизвеждат звуците в Интернет. В тази статия искам да ви разкажа подробно как да използвате маркера на вашите сайтове.

Използвайте за вграждане на звуков файл на страница По-долу е най-простият пример за използване на етикета, той зарежда mp3 файл и го възпроизвежда. Обърнете внимание на атрибута autopaly, който се използва за автоматично възпроизвеждане на звука. Не трябва обаче автоматично да възпроизвеждате звуци на сайта, тъй като това ще дразни потребителите. Възпроизвеждане на звук в цикъл Искате ли да възпроизведете звук в цикъл? Атрибутът loop ще ви помогне да направите това. Но отново, не прекалявайте с автоматичното пускане и зациклянето, ако не искате потребителят да напусне сайта преждевременно. Показване на контроли Вместо да възпроизвеждате звуци автоматично, което определено е лоша практика, трябва да позволите на браузъра да показва някои контроли, като например бутони за сила на звука и възпроизвеждане/пауза. Това се прави лесно, като просто добавите атрибута controls. Различни файлови формати Тагът се поддържа от повечето съвременни браузъри, но проблемът е, че различните браузъри поддържат различни файлови формати. Safari, например, може да възпроизвежда MP3, но Firefox не може и вместо това възпроизвежда OGG файлове. Решението на този проблем е да се използват и двата формата, така че всеки посетител да чува звука, без значение какъв браузър използва. Указване на MIME типа на файловете Когато използвате различни файлови формати, добра практика е да посочите MIME типа за всеки файл, за да помогнете на браузъра да локализира файла, който поддържа. Това може лесно да се направи с помощта на атрибута type. За по-стари браузъри Какво ще стане, ако посетителят използва IE6 или друг праисторически браузър, който не поддържа маркера? Лесно е: по-долу е кодът, който ще покаже съобщение за браузъри, които не поддържат етикета. Вашият браузър не изобразява аудио тага! Буфериране на файлове Когато възпроизвеждате големи файлове, може да се използва файлово буфериране. Можете да използвате атрибута за предварително зареждане за това. Може да приема 3 стойности:

none - ако не искате да използвате файловия буфер;
auto - ако искате браузърът да буферира целия файл;
метаданни - за зареждане само на служебна информация (продължителност на звука и др.).

Управление на възпроизвеждането чрез JavaScript Управлението на HTML5 аудио плейъра чрез JavaScript е много лесно. Следващият пример показва как можете да създадете вашите основни контроли на аудио плейъра с помощта на JavaScript: Възпроизвеждане Пауза Сила на звука + Сила на звука -

Това е всичко за днес.
Надявам се, че тази статия ви е помогнала да разберете основите на HTML5 тага.

HTML5 аудио осигурява подобрена обработка на аудио съдържание. Доскоро единственият начин за добавяне на звукови файлове към уеб страници беше да се интегрира фонов звук с етикета, който се възпроизвежда, докато потребителят преглежда страницата, без да може да го изключи.

С добавянето на нов елемент към спецификацията на HTML5 вече е възможно да се добавя аудиосъдържание с вграден API без необходимост от плъгини.

Как да добавите HTML5 аудио към уеб страница 1. Поддръжка на Element Browser

IE: 9.0
Firefox: 3.5 основна поддръжка, 15.0 пълна поддръжка
Chrome: 3.0
Safari: 3.1
Опера: 10.5
iOS Safari: 7.1
Опера мини: -
Браузър за Android: 4.1
Chrome за Android: 44

Елементът HTML5 се използва за вграждане на аудио съдържание в уеб страници. Като цяло HTML маркирането изглежда така:

Атрибутът controls кара браузърите да показват интерфейса за управление на аудио плейъра - бутони за възпроизвеждане, пауза, сила на звука.

Ориз. 1. Външен вид на аудио плейъра в различни браузъри

Понастоящем няма аудио формат, който да работи във всички браузъри, така че за да направите съдържанието достъпно за възможно най-широка публика, се препоръчва да включите множество аудио източници, представени с помощта на атрибута src на елемента. В същото време можете да добавите резервно съдържание за браузъри, които не поддържат елемента.

Изтегляне на име.mp3

Таблица 1. Атрибути на тагове Атрибут

автоматично изпълнение	Автоматично възпроизвеждане на аудио файла веднага след зареждане на страницата.
контроли	Указва на браузъра да покаже основни контроли за възпроизвеждане (старт/спиране на възпроизвеждане, прескачане на друго място в записа, регулиране на силата на звука).
цикъл	Циклично възпроизвеждане на аудио файл.
заглушен	Изключва звука при възпроизвеждане на аудио файл.
предварително натоварване	Атрибут, отговорен за предварителното зареждане на аудио съдържание. Не е задължително, някои браузъри го игнорират. Възможни стойности: auto - Браузърът изтегля целия аудио файл, така че да е достъпен, когато потребителят започне да го възпроизвежда. метаданни - браузърът изтегля първата малка част от аудио файла, за да определи основните му характеристики. none - няма автоматично зареждане на аудио файла.
src	Съдържа абсолютния или относителния URL адрес на аудио файла.

2. Аудио кодеци

Аудио кодек (декодер) е програма за конвертиране на цифрови данни в аудио файл или формат на аудио поток. Популярните аудио формати са както следва:

MP3 е най-популярният аудио формат, който използва компресия със загуби и ви позволява да намалите размера на файла няколко пъти. Поради лицензионни такси Firefox и Opera не се поддържат.

AAC (Разширен аудио кодек)- затворен кодек, подобен на MP3, но в сравнение с последния поддържа по-високо качество на звука при подобен размер на файла.

Ogg Vorbis е безплатен формат с отворен код, поддържан от Firefox, Opera и Chrome. Осигурява добро качество на звука, но не се поддържа широко от хардуерни плейъри.

3. Алтернативни медийни ресурси

Елементът се използва за добавяне на множество медийни ресурси за и. Показва алтернативни видео/аудио файлове, от които браузърът може да избира въз основа на типа медия или кодек, който поддържа.

4. Добавете субтитри и заглавия

Елементът се използва като дъщерен елемент и . Добавя текстова песен за субтитри, медийни заглавия или друга текстова информация, която трябва да се вижда по време на възпроизвеждане на аудио или видео файл.

Таблица 3. Атрибути на тагове Описание на атрибута, приета стойност

по подразбиране	Показва, че тази песен се възпроизвежда по подразбиране. Само един елемент може да съдържа този атрибут.
мил	Указва вида на текстовата песен, субтитрите се показват по подразбиране. Приети стойности: надписи - превод на диалози и звукови ефекти, показвани като текст върху видеото (за глухи потребители). глави - Добавя заглавията на главите като списък за навигация в медийния файл. описания - добавя аудио описание на случващото се във видеото (за незрящи потребители). метаданни - Метаданните, използвани от скриптове, не се показват на потребителите. субтитри - текстово дублиране на аудиозаписа на видеото, показвано като субтитри за видеото.
етикет	Добавя заглавие на песен. Ако този атрибут не е зададен, браузърът ще използва стойността по подразбиране.
src	Съдържа абсолютния или относителния URL адрес на данните за текстовата песен.
srclang	Езикът на възпроизвежданата песен.

5. Пример за стилизиран аудио плейър

Използвайки css стилове, можете да придадете необичаен вид на аудио плейъра. Възпроизвеждането се управлява от малък скрипт (с помощта на библиотеката jQuery), звукът се появява, когато задържите курсора на мишката върху записа.

Този въпрос е много често срещан, затова реших да му посветя отделна статия в уроците. Тъй като HTML няма универсална технология за възпроизвеждане на аудио за всички браузъри, за да разрешите този проблем, предлагам да изтеглите файла на аудио плейъра, както се прави на повечето сайтове. Ние правим всичко стъпка по стъпка:

1. На хостинга, където се намира вашият сайт, в главната директория (папката, където е индексният файл), създайте аудио папката. В бъдеще ще поставите всички аудио файлове в него.

3. Сега изберете желаните файлове, за предпочитане в mp3 формат. Създайте аудио папка в корена на сайта и ги качете.

4. Остава само да въведете кода за връзка на плейъра. Подходящ е за всеки сайт.На правилното място трябва само да посочите пътя до файла на плейъра и аудиофайла, като съответно замените думите вашият_домейн и име_на_аудио_файл:

И всичко е готово! Можете също да видите работния пример.

Как да зададете фонова музика в html Използвайки силата на HTML и браузъра, можете също да вмъкнете фонова музика на страницата. Ще ви е необходим аудио файл с необходимия формат: WAV, AU, MIDI или MP3. Можете да използвате всеки файл с посоченото разширение като пример.

Първият начин е етикетът за вграждане. Елементът embed се използва за зареждане и показване на обекти (като видео файлове, флаш филми, някои аудио файлове и т.н.), които браузърът не разбира първоначално.

Синтаксисът е доста прост:

Затварящият таг не е задължителен.

Сега разглеждаме пример за запис с атрибути и по-долу с тяхното декодиране:

Вграждане на атрибути на тагове за възпроизвеждане на аудио в html
ширина - ширината на панела в пиксели (или проценти)
височина - височина на панела в пиксели (или процент)
подравняване - позиция на панела спрямо текста, възможните стойности са ляво, дясно, център
hidden - позволява скриване на панела, стойности на атрибута: true - панелът е скрит, false - панелът е видим (стойност по подразбиране)
autostart - true - плейърът стартира автоматично при зареждане на страницата, false - изчаква натискане на бутона за възпроизвеждане
loop - цикъл, true - песента се пуска в кръг, а ако е false - само веднъж

Вторият начин. Много старо, но и практично) Добавете мелодията в същата папка (директория), където се намира вашият файл, и напишете следния код в тялото:

В резултат на това след зареждане на страницата ще прозвучи мелодията, която сте посочили в тага bgsound. Сега нека разгледаме по-добре атрибутите на етикета:

src - път до вашия аудио файл
цикъл - колко пъти да се повтори мелодията (ако -1, тогава се повтаря безкрайно)
баланс - стойност на стерео баланс (от -10000 до 10000)
обем - силата на звука на мелодията, където 0 е максимумът, а -10000 е минимумът.

Въпреки това няма да има начин да контролирате плейъра по какъвто и да е начин - всеки път, когато страницата се опреснява, песента ще се възпроизвежда отново.

След като описах метода за вмъкване на фонова музика, искам да ви разубедя от това, тъй като повечето потребители по правило вече слушат музика по време на посещение на различни сайтове. Следователно придружаващият музикален съпровод може само да го принуди да затвори раздела със сайта.

Вграждане на аудио и музика в HTML5 - аудио таг
audio - таг за двойка, който определя фоновия звук, музика или друг аудио поток на сайта.

Атрибути на аудио тагове

autoplay - файлът се възпроизвежда веднага при зареждане на страницата (подобно на фоновата музика на bgsound)
контроли - показват контролния панел на плейъра в браузъра
цикъл - възпроизвежда файла отново след края му
preload - аудио файлът ще бъде зареден заедно със зареждането на страницата
src - път към аудио файл (mp3 или ogg)

Примерен код с аудио етикет

аудио етикет

Аудио в HTML 5

Аудио етикетът не се поддържа от вашия браузър.
Изтегляне на музика.

Преди това браузърите нямаха вградени възможности за поддръжка на аудио и видео съдържание, но с развитието на Интернет поддръжката на мултимедийни елементи като характеристика на съвременните браузъри се превърна в необходимост. HTML5 въведе нови елементи, които се поддържат във всички съвременни браузъри. Основната задача на тага е да добави аудио съдържание към страницата.

Форматът на аудио файла определя структурата и характеристиките на представяне на аудио данни, когато се съхраняват на носител (устройство за съхранение). За да се елиминира излишъкът на аудио данни, като правило се използват специални аудио кодеци, благодарение на които аудио данните се компресират. Съвременните браузъри поддържат следните 3 аудио формата:

MP3 Wav Ogg браузърОпера IE ръб, край

ДА	ДА	ДА
ДА	ДА	ДА
ДА	ДА	ДА
ДА	ДА	НЕ
ДА	НЕ	НЕ
ДА	ДА	НЕ

MP3 форматът е кодек и контейнер едновременно. Той се използва широко навсякъде за хостване на музика за изтегляне.
Форматът WAV също е кодек и контейнер едновременно.
Ogg контейнер + аудио кодек Vorbis. Той обикновено се нарича "Ogg Vorbis". Той е разработен от общността на Xiph, за да замени патентованите MP3, AAC и WMA.

MIME типове за аудио:

Форматиране на MIME типовеMP3 Ogg wav

аудио/mpeg

аудио/ogg

аудио/wav

Поддръжка на браузър Етикет
Опера
IExplorer
ръб, край

4.0

3.5

10.5

4.0

9.0

12.0

Атрибути Описание на стойността на атрибута

автоматично изпълнение	автоматично изпълнение	Указва, че аудиото ще се възпроизведе автоматично веднага щом е готово.
контроли	контроли	Показва вградени контроли за медийни файлове (бутон за възпроизвеждане/пауза, плъзгач за преминаване към конкретен клип и плъзгач за сила на звука).
цикъл	цикъл	Завърта възпроизвеждането на файла (нашата песен е добра - започнете отначало)..
заглушен	заглушен	Указва, че звукът ще бъде заглушен (без звук).
предварително натоварване	Автоматичен метаданни нито един	Указва как трябва да се зарежда аудиото при зареждане на страницата. Атрибутът се игнорира, ако присъства атрибутът за автоматично пускане.
src	URL адрес	Указва URL адреса на аудио файла.

Пример за употреба

Елементът използва същите атрибути като елемента, с изключение на атрибутите width (ширина), height (височина) и poster (изображение, което се показва преди възпроизвеждането на видеоклипа). Подобно на използването на елемента, можете да предоставите множество опции за аудио формат с помощта на елемента, както е показано в примера по-долу:

Аудио в HTML5 Аудио в HTML5 Вашият браузър не поддържа този аудио формат. Можете да изтеглите този файл от връзката по-долу:

Изтегли

В този пример ние:

Добавихме аудио съдържание към страницата ( таг ), като използвахме атрибута controls, добавихме показването на вградени контроли за мултимедиен файл (бутон за възпроизвеждане / пауза, плъзгач, който ви позволява да отидете до конкретен фрагмент от видеоклипа, както и контрол на звука).

Описание

Добавя, възпроизвежда и управлява настройките за аудиозапис на уеб страница. Пътят до файла се посочва чрез атрибута src или вложен таг. Вътре в контейнера можете да напишете текст, който ще се показва в браузъри, които не работят с този етикет.

Списъкът с кодеци, поддържани от браузърите, е ограничен и е даден в таблица. 1.

Раздел. 1. Кодеци и браузъри

Кодек	Internet Explorer	Chrome	Опера	сафари	Firefox
ogg/vorbis
wav
mp3
AAC

За универсално възпроизвеждане в посочените браузъри аудиото се кодира с помощта на различни кодеци и файловете се добавят едновременно чрез тага.

Синтаксични атрибути Звукът започва да се възпроизвежда веднага щом страницата се зареди. Добавя контролен панел към аудио файл. Повтаря звука от началото след като приключи. Използва се за изтегляне на файл заедно със зареждане на уеб страница. Указва пътя до възпроизвеждания файл. Затварящ етикет

Задължително.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

аудио

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

Аудио етикетът не се поддържа от вашия браузър. Изтегляне на музика.

Резултатът от примера в браузъра Opera е показан на фиг. 1.

Ориз. 1. Възпроизвеждане на аудио файл

Браузъри

Контролите за аудио възпроизвеждане се различават в различните браузъри по външния си вид, но основните елементи са едни и същи. Това са бутонът за възпроизвеждане/пауза, дължината на песента, изминалото и общото време за възпроизвеждане, както и нивото на звука.