Наша совместная команда Banwar.org

Связаться с нами

  • (097) ?601-88-87
    (067) ?493-44-27
    (096) ?830-00-01

Статьи

HTML5-аудіо

  1. 1. Елемент <audio>
  2. 2. Аудіо кодеки
  3. 3. Альтернативні медіа-ресурси
  4. 4. Додавання субтитрів і заголовків
  5. 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 додає відображення браузерами інтерфейсу управління аудіо плеєра - кнопки відтворення, паузи, гучності.

HTML5-аудіо надає поліпшені можливості роботи з аудіо контентом

Мал. 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 .

Новости

Banwar.org
Наша совместная команда Banwar.org. Сайт казино "Пари Матч" теперь доступен для всех желающих, жаждущих волнения и азартных приключений.