Додає, відтворює та керує налаштуваннями аудіозапису на веб-сторінці. Шлях до файлу задається через атрибут src або вкладений тег. Всередині контейнера можна написати текст, який виводитиметься у браузерах, які не працюють із цим тегом.
Список кодеків, що підтримуються браузерами, обмежений і наведено в табл. 1.
| Кодек | Internet Explorer | Chrome | Opera | Safari | Firefox |
| ogg/vorbis | |||||
| wav | |||||
| mp3 | |||||
| AAC |
Для універсального відтворення у вказаних браузерах аудіо кодують за допомогою різних кодеків і додають файли одночасно через тег.
Синтаксис Атрибути Звук починає грати одразу після завантаження сторінки. Додає панель керування до аудіофайлу. Повторює відтворення звуку від початку після завершення. Використовується для завантаження файлу разом із завантаженням веб-сторінки. Вказує шлях до файлу, що відтворюється. Закриваючий тегОбов'язковий.
HTML5 IE 8 IE 9+ Cr Op Sa Fx
audio
Олександр Клименков - Чотирнадцять
Тег audio не підтримується вашим браузером. Завантажте музику.Результат прикладу в браузері Opera показано на рис. 1.
Мал. 1. Відтворення аудіофайлу
БраузериУправління відтворенням аудіо відрізняється між браузерами за своїм виглядом, але основні елементи збігаються. Це кнопка відтворення/паузи, довжина треку, минулий та сумарний час звучання, а також рівень гучності.
Раніше в браузерах не було вбудованих можливостей для підтримки аудіо та відео контенту, але з розвитком інтернету, підтримка мультимедійних елементів як можливості сучасних браузерів стала потребою. У HTML5 були введені нові елементи та , які підтримуються у всіх сучасних браузерах. Основне завдання тега полягає у додаванні аудіо контенту на сторінку.
Формат аудіо файлу визначає структуру та особливості представлення звукових даних при зберіганні на носії (пристрій, що запам'ятовує). Для усунення надмірності аудіоданих, як правило, використовуються спеціальні аудіокодеки, завдяки яким виробляють стиснення аудіоданих. Сучасні браузери підтримують наступні 3 формати аудіо:
| ТАК | ТАК | ТАК |
| ТАК | ТАК | ТАК |
| ТАК | ТАК | ТАК |
| ТАК | ТАК | НІ |
| ТАК | НІ | НІ |
| ТАК | ТАК | НІ |
- Формат MP3 - це кодек та контейнер одночасно. Він широко використовується повсюдно для розміщення музики, що скачується.
- Формат WAV – також кодек та контейнер одночасно.
- Контейнер Ogg + аудіо кодек Vorbis. Його зазвичай називають "Ogg Vorbis". Був розроблений спільнотою Xiph для того, щоб замінити запатентовані MP3, AAC і WMA.
MIME-типи для аудіо:
| audio/mpeg |
| audio/ogg |
| audio/wav |
| 4.0 | 3.5 | 10.5 | 4.0 | 9.0 | 12.0 |
| autoplay | autoplay | Вказує, що аудіо запуститься автоматично, коли воно буде готове. |
| controls | controls | Відображення вбудованих елементів керування мультимедійним файлом (кнопка відтворення/паузи, регулятор, який дозволяє перейти до певного фрагмента ролика, а також регулятор рівня гучності). |
| loop | loop | Зациклює відтворення файлу (наша пісня гарна – починай спочатку). |
| muted | muted | Вказує, що аудіо буде заглушено (без звуку). |
| preload | auto metadata none | Вказує, як аудіо завантажуватиметься під час завантаження сторінки. Атрибут ігнорується, якщо є атрибут autoplay . |
| src | URL | Вказує URL-адресу аудіофайлу. |
Елемент використовує самі атрибути, як і елемент , крім атрибутів width (ширина), height (висота) і poster (зображення, що відображається до відтворення відео). За аналогією з використанням елемента , ви можете надати кілька варіантів аудіо форматів за допомогою елемента , як показано нижче.
Аудіо в HTML5 Аудіо в HTML5 Ваш браузер не підтримує цей аудіо формат. Ви можете завантажити цей файл за посиланням нижче:У цьому прикладі ми:
Додали на сторінку аудіо-контент (тег), атрибутом controls додали відображення вбудованих елементів керування мультимедійним файлом (кнопка відтворення/паузи, регулятор, що дозволяє перейти до певного фрагмента ролика, а також регулятор рівня гучності).
Однією з найчудовіших особливостей HTML5є потокове аудіо.
Якщо ви зайняті у сфері веб-розробки, то вибірка з 10 неймовірних аудіоплеєрів на HTML5 вам знадобиться.
- аудіо- та відеоплеєр, який написаний на чистому HTML5і CSS. Підтримка старих браузерів виконана за допомогою Flashі Silverlightплеєрів, які імітують HTML5 MediaElement API.
MediaElement має багато оформлень і підтримка популярних платформ: WordPress, Drupal, Joomla і т.д.
Цей плеєр досить мінімальний, але функціональний. Добре підходить, коли потрібні плейлисти та модні ефекти!
Ще один чудовий плеєр, можливо, найкращий зі списку. Плюси в тому, що він дуже простий у налаштуванні і є досить гнучким за розмірами і налаштовується на необмежену кількість кольорів.
У кросбраузерна підтримка, а для старих браузерів є його Flash-Аналог.
Ви використовуєте Mootoolsна вашому сайті? Якщо так, то, можливо, вам сподобається цей плеєр, виконаний на HTML5і Mootools JavaScriptфреймворку. Плеєр ідеально працює у всіх сучасних браузерах.
Цей плеєр єдиний із списку, який є платним. Він коштує всього $5, але при цьому ідеально працює. У плеєра є багато корисних функційнаприклад, захист вашого аудіо від перехоплення за допомогою накладання сигналу, що дуже добре для комерційного використання.
Джерело: http://codecanyon.net/item/universal-html5-audio-player
У задіяні технології HTML5і Flashщо робить його дуже легким (10 Кб) надійним кроссбраузерним рішенням для відтворення потокового аудіо.
Бажаєте дізнатися, що можна зробити за допомогою Sound Manager 2? Завітайте на перегляд демо!
HTML5-аудіо надає покращені можливості роботи з аудіо контентом. Донедавна єдиним способом додавання звукових файлів на веб-сторінки було інтегрування фонового звуку за допомогою тега, який програвався під час перегляду користувачем сторінки без вимкнення.
Завдяки додаванню в специфікацію HTML5 нового елемента з'явилася можливість додавати аудіо вміст із вбудованим програмним інтерфейсомбез залучення модулів, що підключаються.
Як додати HTML5-аудіо на веб-сторінку 1. Елемент Підтримка браузерамиIE: 9.0
Firefox: 3.5 базова підтримка, 15.0 - повна
Chrome: 3.0
Safari: 3.1
Opera: 10.5
iOS Safari: 7.1
Opera Mini: -
Android Browser: 4.1
Chrome для Android: 44
HTML5-елемент використовується для впровадження звукового контенту на веб-сторінки. У загальному вигляді HTML-розмітка має такий вигляд:
Атрибут controls додає відображення браузерами інтерфейсу керування аудіо плеєра – кнопки відтворення, паузи, гучності.
Мал. 1. Зовнішній виглядаудіо плеєра у різних браузерах На даний момент не існує аудіо формату, який працював би у всіх браузерах, тому для забезпечення доступності контенту максимально широкої аудиторії рекомендується включати кілька джерел звуку, представлених з використанням атрибута src елемента . Одночасно можна додати резервний контент для браузерів, які не підтримують .
Завантажити name.mp3
| autoplay | Автоматичне відтворення аудіо файлу відразу після завантаження сторінки. |
| controls | Вказує браузеру, що потрібно відобразити базові елементи керування відтворенням (починати та зупиняти відтворення, переходити до іншого місця запису, регулювати гучність). |
| loop | Циклічне відтворення аудіо файлу. |
| muted | Вимикає звук під час відтворення аудіо файлу. |
| preload | Атрибут, який відповідає за попереднє завантаження аудіо контенту. Не обов'язково, деякі браузери ігнорують його. Можливі значення: auto - браузер завантажує аудіо файл повністю, щоб він був доступний, коли користувач почне відтворення. metadata - браузер завантажує першу невелику частину аудіо файлу, щоб визначити основні характеристики. none – відсутність автоматичного завантаження аудіо файлу. |
| src | Містить абсолютну або відносну URL-адресу аудіо файлу. |
Аудіо кодек (декодер) є програмою для перетворення цифрових даних у формат звукового файлу або звукового потоку. Популярними аудіо форматами є такі:
MP3 — найпопулярніший аудіо формат, який використовує стиск із втратами і дозволяє зменшити розмір файлу в кілька разів. В силу ліцензійних відрахувань не підтримуються Firefox та Opera.
AAC (Advanced Audio Codec)- Закритий кодек, аналог MP3, але в порівнянні з останнім, підтримує більше висока якістьзвуку при подібному розмірі файлу.
Ogg Vorbis - безкоштовний формат з відкритим кодом, підтримується в Firefox, Opera та Chrome. Забезпечує гарна якістьзвуку, але не досить широко підтримується апаратними програвачами.
3. Альтернативні медіа-ресурсиЕлемент використовується для додавання кількох медіа-ресурсів для та . Вказує на альтернативні відео/аудіо файли, які браузер може вибрати із запропонованих на основі типу носія або кодека, що підтримується ним.
4. Додавання субтитрів та заголовківЕлемент використовується як дочірнього елементата . Додає текстову доріжку для субтитрів, заголовків медіафайлів або іншої текстової інформації, яка має бути видно під час відтворення аудіо або відеофайлу.
| default | Вказує, що ця доріжка відтворюється за замовчуванням. Лише один елемент може містити цей атрибут. |
| kind | Вказує тип текстової доріжки, за промовчанням виводяться субтитри (subtitles). Значення, що приймаються: captions — переклад діалогів та звукових ефектів, що відображається у вигляді тексту поверх відео (для глухих користувачів). chapters - додає назви розділів у вигляді списку для навігації по медіафайлу. descriptions — додає звуковий опис відео (для сліпих користувачів). metadata — метадані, які використовуються скриптами, не відображаються для користувачів. subtitles — текстове дублювання звукової доріжки відео, що відображається у вигляді субтитрів до відео. |
| label | Додає назву доріжки. Якщо цей атрибут не встановлено, браузер застосує значення за промовчанням. |
| src | Містить абсолютну або відносну URL-адресу даних текстової доріжки. |
| srclang | Мова доріжки, що відтворюється. |
За допомогою css-стилів можна надати аудіо плеєру незвичайного вигляду. Відтворення керується за допомогою невеликого скрипта (використовується бібліотека jQuery), звук з'являється при наведенні на платівку.
Це питання зустрічається дуже часто, тому я вирішив ще в уроках присвятити йому окрему статтю. Оскільки для програвання аудіо універсальної технології для всіх браузерів HTML немає, то для вирішення цієї проблеми пропоную завантажити файл аудіо програвача, як і робиться на більшості сайтів. Робимо все по кроках:1. На хостингу, де і розташовується Ваш сайт, у кореневому каталозі (папці, де індексний файл), створіть папку audio. У неї надалі поміщатимете всі аудіо файли.
3. Тепер виберіть потрібні файли, найкраще у форматі mp3. Створіть папку audio в корені сайту та завантажте їх.
4. Залишається лише вставити код підключення програвача. Він підійде для будь-якого сайту У потрібному місці слід лише вказати шлях до файлу плеєра та аудіо файлу, відповідно замінивши слова ваш_домен та назву_аудіо_файлу :
І все готове! Можете подивитися і роботу прикладу.
Перший спосіб - це тег embed. Елемент embed використовується для завантаження та відображення об'єктів (наприклад, відеофайлів, флеш-роликів, деяких звукових файлів тощо), які спочатку браузер не розуміє.
Синтаксис досить простий:
Тег, що закриває, не потрібен.
Тепер дивимося приклад запису з атрибутами, а нижче з їх розшифровкою:
Атрибути тега embed для відтворення аудіо в html
width - ширина панелі в пікселях (або відсотках)
height - висота панелі в пікселях (або відсотках)
align - розташування панелі щодо тексту, можливі значення left, right, center
hidden - дозволяє приховати панель, значення атрибута: true - панель прихована, false - панель видима (значення за замовчуванням)
autostart - значення true - програвач стартує автоматично під час завантаження сторінки, false - чекає натискання на кнопку відтворення
loop – цикл, true – трек програватися по колу, а при значенні false – лише один раз
Другий спосіб. Дуже старий, але теж практичний) Додайте мелодію до тієї ж папки (директорії), де лежить Ваш файл, а в body пропишіть наступний код:
В результаті після завантаження сторінки звучатиме вказана Вами в тезі bgsound мелодія. Тепер розглянемо краще атрибути тега:
src - шлях до Вашого аудіофайлу
loop - скільки разів повторити мелодію (якщо -1, то повторюється нескінченно)
balance – значення стереобалансу (від -10000 до 10000)
volume – гучність програвання мелодії, де 0 максимум, а –10000 мінімум.
Однак не буде можливості контролювати програвач - при кожному оновленні сторінки трек буде програватися заново.
Після опису методу вставки фонової музики хочу Вас від цього відмовити, оскільки більшість користувачів у момент відвідування різних сайтів вже зазвичай слухають музику. Тому попутний музичний супровід може тільки змусити його закрити вкладку з сайтом.
Вставка аудіо та музики в HTML5 - тег audioaudio - парний тег, що визначає фоновий звук, музику або інший потік аудіо на сайті.
Атрибути тега
autoplay - файл програється відразу при завантаженні сторінки (аналогічно фонової музики bgsound)
controls - відобразити панель керування плеєра у браузері
loop - програє файл знову після його закінчення
preload - завантаження аудіо файлу відбудеться разом із завантаженням сторінки
src - шлях до аудіо файлу (mp3 або ogg)
Приклад коду із тегом audio
Тег audio
Аудіо в HTML 5
Тег audio не підтримується вашим браузером.
Завантажте музику.
