HTML5-теги audio и video в различных браузерах на практике. Применение HTML5 Audio: подсказки и уроки интеграции звука 4 о любовная игра тег audio не
Раньше в браузерах не было встроенных возможностей для поддержки аудио и видео контента, но с развитием интернет, поддержка мультимедийных элементов в качестве возможностей современных браузеров стала необходимостью. В HTML5 были введены новые элементы
Формат аудио файла определяет структуру и особенности представления звуковых данных при хранении на носителе (запоминающее устройство). Для устранения избыточности аудиоданных, как правило, используются специальные аудиокодеки, благодаря которым производят сжатие аудиоданных. Современные браузеры поддерживают следующие 3 формата аудио :
| Браузер | MP3 | Wav | Ogg |
|---|---|---|---|
| ДА | ДА | ДА | |
| ДА | ДА | ДА | |
| Opera | ДА | ДА | ДА |
| ДА | ДА | НЕТ | |
| IE | ДА | НЕТ | НЕТ |
| Edge | ДА | ДА | НЕТ |
- Формат MP3 - это кодек и контейнер одновременно. Он широко используется повсеместно для размещения скачиваемой музыки.
- Формат WAV – также кодек и контейнер одновременно.
- Контейнер Ogg + аудио кодек Vorbis . Его обычно называют "Ogg Vorbis". Был разработан сообществом Xiph для того, чтобы заменить собой запатентованные MP3, AAC и WMA.
MIME-типы для аудио:
| MIME-типы | |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
Поддержка браузерами
| Тег | Opera | IExplorer | Edge |
|||
|---|---|---|---|---|---|---|
| 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 аудиофайла. |
Пример использования
Элемент
Аудио в HTML5
В этом примере мы:
Добавили на страницу аудио-контент (тег
Одной из самых замечательных особенностей 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
? Посетите для просмотра демо!
Описание
Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут src или вложенный тег . Внутри контейнера
Список поддерживаемых браузерами кодеков ограничен и приведен в табл. 1.
| Кодек | Internet Explorer | Chrome | Opera | Safari | Firefox |
| ogg/vorbis | |||||
| wav | |||||
| mp3 | |||||
| AAC |
Для универсального воспроизведения в указанных браузерах аудио кодируют с помощью разных кодеков и добавляют файлы одновременно через тег
Синтаксис
Атрибуты
Звук начинает играть сразу после загрузки страницы. Добавляет панель управления к аудиофайлу. Повторяет воспроизведение звука с начала после его завершения. Используется для загрузки файла вместе с загрузкой веб-страницы. Указывает путь к воспроизводимому файлу.Закрывающий тег
Обязателен.
HTML5 IE 8 IE 9+ Cr Op Sa Fx
Александр Клименков - Четырнадцать
Результат примера в браузере Opera показан на рис. 1.
Рис. 1. Воспроизведение аудиофайла
Браузеры
Управление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.
С появлением достаточно быстрого соединения с сетью Интернет, Flash был единственным инструментом для воспроизведения звуков на веб-сайтах. Но HTML5 в корне изменит способ воспроизведения звуков в Интернет. В этой статье я хочу подробно рассказать Вам о том, как использовать тег на ваших сайтах.
Используем
Ниже приведен простейший пример использования тега, он загружает mp3 файл и воспроизводит его. Обратите внимание на атрибут autopaly , который используется для автоматического воспроизведения звука. Тем не менее Вам не следует автоматически воспроизводить звуки а сайте, ведь это надоедает пользователям.Воспроизведение звука в цикле
Хотите зациклить звук? Атрибут loop поможет Вам это сделать. Но опять же, не стоит злоупотреблять автозапуском и воспроизведением в цикле, если не хотите, чтобы пользователь преждевременно покинул сайт.Отображение элементов управления
Вместо того, чтобы играть звуки автоматически, что, безусловно, плохая практика, вы должны позволить отображать в браузере некоторые элементы управления, такие как громкость и кнопки воспроизведение (пауза). Это сделать легко, просто добавив атрибут controls .Различные форматы файлов
Тег поддерживается большинством современных браузеров, но проблема в том, что разные браузеры поддерживают разные форматы файлов. Safari, например, может проигрывать MP3, а Firefox не может, и играет OGG-файлы вместо этого. Решение этой проблемы заключается в использовании обоих форматов, чтобы каждый посетитель мог услышать звук, независимо от того, какой браузер он использует.Указываем MIME-тип файлов
При использовании различных форматов файлов, хорошей практикой есть указывание MIME-типа для каждого файла, чтобы помочь браузеру локализировать поддерживаемый им файл. Это легко можно сделать используя атрибут type .Для старых браузеров
А что, если посетитель использует IE6 или какой-то другой доисторический браузер, который не поддерживает тег? Все легко: ниже приведён код, который будет отображать сообщение для браузеров, которые не поддерживают тег.Буферизация файлов
При воспроизведении файлов большого размера может использоваться буферизация файлов. Для этого вы можете использовать атрибут preload . Он может принимать 3 значения:- none - если вы не хотите использовать буфер файлов;
- auto - если вы хотите, чтобы браузер беферизировал файл целиком;
- metadata - для загрузки лишь служебной информации (продолжительность звучания и др.).
Управление воспроизведением через JavaScript
Управлять HTML5 аудио-проигрывателем через JavaScript очень легко. Следующий пример показывает, как с использованием JavaScript можно построить свои базовые элементы управления аудио-плеером:Вот и всё на сегодня.
Надеюсь, что эта статья помогла Вам понять базовые возможности HTML5 тега .
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 for Android: 44
HTML5-элемент
Атрибут controls добавляет отображение браузерами интерфейса управления аудио плеера — кнопки воспроизведения, паузы, громкости.
Рис. 1. Внешний вид аудио плеера в разных браузерах
В настоящий момент не существует аудио формата, который бы работал во всех браузерах, поэтому для обеспечения доступности контента максимально широкой аудитории рекомендуется включать несколько источников звука, представленных с использованием атрибута src элемента
| Атрибут | |
|---|---|
| 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. Альтернативные медиа-ресурсы
Элемент
4. Добавление субтитров и заголовков
Элемент
| Атрибут | Описание, принимаемое значение |
|---|---|
| default | Указывает, что данная дорожка воспроизводится по умолчанию. Только один элемент |
| kind | Указывает тип текстовой дорожки, по умолчанию выводятся субтитры (subtitles). Принимаемые значения: captions — перевод диалогов и звуковых эффектов, отображаемый в виде текста поверх видео (для глухих пользователей). chapters — добавляет названия глав в виде списка для навигации по медиафайлу. descriptions — добавляет звуковое описание происходящего в видео (для слепых пользователей). metadata — метаданные, используемые скриптами, не отображаются для пользователей. subtitles — текстовое дублирование звуковой дорожки видео, отображается в виде субтитров к видео. |
| label | Добавляет название дорожки. Если этот атрибут не задан, браузер применит значение по умолчанию. |
| src | Содержит абсолютный или относительный URL-адрес данных текстовой дорожки. |
| srclang | Язык воспроизводимой дорожки. |
5. Стилизованный пример аудио плеера
С помощью css-стилей можно придать аудио плееру необычный вид. Воспроизведение управляется с помощью небольшого скрипта (используется библиотека jQuery), звук появляется при наведении на пластинку.
Статьи по теме
