- 1. Елемент <audio>
- 2. Аудіо кодеки
- 3. Альтернативні медіа-ресурси
- 4. Додавання субтитрів і заголовків
- 5. Стилізований приклад аудіо плеєра
HTML5-аудіо надає поліпшені можливості роботи з аудіо контентом. До недавнього часу єдиним способом додавання звукових файлів на веб-сторінки було інтегрування фонового звуку з допомогою тега <bgsound>, який програвався під час перегляду користувачем сторінки без можливості виключення.
Завдяки додаванню в специфікацію HTML5 нового елемента <audio>, з'явилася можливість додавати аудіо вміст з вбудованим програмним інтерфейсом без залучення додаткових модулів.
1. Елемент <audio>
підтримка браузерами
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 for Android: 44
HTML5-елемент <audio> використовується для впровадження звукового контенту в веб-сторінки. У загальному вигляді HTML-розмітка має наступний вигляд:
<Audio src = "name.ogg" controls> </ audio>
Атрибут controls додає відображення браузерами інтерфейсу управління аудіо плеєра - кнопки відтворення, паузи, гучності.
Мал. 1. Зовнішній вигляд аудіо плеєра в різних браузерах
На даний момент не існує аудіо формату, який би працював у всіх браузерах, тому для забезпечення доступності контенту максимально широкої аудиторії рекомендується включати кілька джерел звуку, представлених з використанням атрибута src елемента <source>. Одночасно можна додати резервний контент для браузерів, які не підтримують елемент <audio>.
<Audio controls> <source src = "name.ogg" type = "audio / ogg"> <source src = "name.mp3" type = "audio / mpeg"> <a href="sounds/name.mp3"> завантажити name.mp3 </a> </ audio> Таблиця 1. Атрибути тега <audio> Атрибут Опис, прийняте значення autoplay Автоматичне відтворення аудіо файлу відразу ж після завантаження сторінки. controls Вказує браузеру, що потрібно відобразити базові елементи управління відтворенням (починати і зупиняти відтворення, переходити в інше місце запису, регулювати гучність). loop Циклічне відтворення аудіо файлу. muted Вимикає звук при відтворенні аудіо файлу. preload Атрибут, який відповідає за попередню завантаження аудіо контенту. Чи не є обов'язковим, деякі браузери ігнорують його. Можливі значення:
auto - браузер завантажує аудіо файл повністю, щоб він був доступний, коли користувач почне його відтворення.
metadata - браузер завантажує першу невелику частину аудіо файлу, щоб визначити його основні характеристики.
none - відсутність автоматичного завантаження аудіо файлу. src Містить абсолютний або відносний URL-адресу аудіо файлу.
2. Аудіо кодеки
Аудіо кодек (декодер) являє собою програму для перетворення цифрових даних в формат звукового файлу або звукового потоку. Популярними аудіо форматами є наступні:
MP3 - найпопулярніший аудіо формат, який використовує стиснення з втратами і дозволяє зменшити розмір файлу в кілька разів. В силу ліцензійних відрахувань не підтримує Firefox і Opera.
AAC (Advanced Audio Codec) - закритий кодек, аналог MP3, але в порівнянні з останніми, підтримує більш високу якість звуку при подібному розмірі файлу.
Ogg Vorbis - безкоштовний формат з відкритим кодом, підтримується в Firefox, Opera і Chrome. Забезпечує хорошу якість звуку, але недостатньо широко підтримується апаратними програвачами.
3. Альтернативні медіа-ресурси
Елемент <source> використовується для додавання кількох медіа-ресурсів для <audio> і <video>. Вказує на альтернативні відео / аудіо файли, які браузер може вибрати із запропонованих на підставі підтримуваного їм типу носія або кодека.
Таблиця 2. Атрибути тега <source> Атрибут Опис, прийняте значення media Визначає тип медіа-пристрої (тобто для яких пристроїв оптимізований файл). src Містить абсолютний або відносний URL-адресу медіафайлу. type Визначає MIME-тип медіафайлу.
4. Додавання субтитрів і заголовків
Елемент <track> використовується в якості дочірнього елемента <audio> і <video>. Додає текстову доріжку для субтитрів, заголовків медіафайлів або іншої текстової інформації, яка повинна бути видна під час відтворення аудіо або відеофайлу.
Таблиця 3. Атрибути тега <track> Атрибут Опис, прийняте значення default Вказує, що дана доріжка відтворюється за замовчуванням. Тільки один елемент <track> може містити даний атрибут. kind Вказує тип текстової доріжки, за замовчуванням виводяться субтитри (subtitles). Прийняті значення:
captions - переклад діалогів і звукових ефектів, що відображається у вигляді тексту поверх відео (для глухих користувачів).
chapters - додає назви глав у вигляді списку для навігації по медіафайлів.
descriptions - додає звукове опис того, що відбувається в відео (для сліпих користувачів).
metadata - метадані, які використовуються скриптами, не відображаються для користувачів.
subtitles - текстове дублювання звукової доріжки відео, відображається у вигляді субтитрів до відео. label Додає назва доріжки. Якщо цей атрибут не заданий, браузер застосує значення за замовчуванням. src Містить абсолютний або відносний URL-адресу даних текстової доріжки. srclang Мова поточного запису.
5. Стилізований приклад аудіо плеєра
За допомогою css-стилів можна надати аудіо плеєра незвичайний вид. Відтворення управляється за допомогою невеликого скрипта (використовується бібліотека jQuery), звук з'являється при наведенні на платівку.
See the Pen Music animation by Elena Nazarova ( @nazarelen ) on CodePen .