Тег аудио html. Освоение HTML5 тега audio

Одной из самых замечательных особенностей 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 ? Посетите для просмотра демо!

С появлением достаточно быстрого соединения с сетью Интернет, Flash был единственным инструментом для воспроизведения звуков на веб-сайтах. Но HTML5 в корне изменит способ воспроизведения звуков в Интернет. В этой статье я хочу подробно рассказать Вам о том, как использовать тег на ваших сайтах.

Используем для вставки звукового файлу на страницуНиже приведен простейший пример использования тега, он загружает mp3 файл и воспроизводит его. Обратите внимание на атрибут autopaly , который используется для автоматического воспроизведения звука. Тем не менее Вам не следует автоматически воспроизводить звуки а сайте, ведь это надоедает пользователям. Воспроизведение звука в циклеХотите зациклить звук? Атрибут loop поможет Вам это сделать. Но опять же, не стоит злоупотреблять автозапуском и воспроизведением в цикле, если не хотите, чтобы пользователь преждевременно покинул сайт. Отображение элементов управленияВместо того, чтобы играть звуки автоматически, что, безусловно, плохая практика, вы должны позволить отображать в браузере некоторые элементы управления, такие как громкость и кнопки воспроизведение (пауза). Это сделать легко, просто добавив атрибут controls . Различные форматы файловТег поддерживается большинством современных браузеров, но проблема в том, что разные браузеры поддерживают разные форматы файлов. Safari, например, может проигрывать MP3, а Firefox не может, и играет OGG-файлы вместо этого. Решение этой проблемы заключается в использовании обоих форматов, чтобы каждый посетитель мог услышать звук, независимо от того, какой браузер он использует. Указываем MIME-тип файловПри использовании различных форматов файлов, хорошей практикой есть указывание MIME-типа для каждого файла, чтобы помочь браузеру локализировать поддерживаемый им файл. Это легко можно сделать используя атрибут type . Для старых браузеровА что, если посетитель использует IE6 или какой-то другой доисторический браузер, который не поддерживает тег? Все легко: ниже приведён код, который будет отображать сообщение для браузеров, которые не поддерживают тег. Ваш браузер не пожжерживает тег audio! Буферизация файловПри воспроизведении файлов большого размера может использоваться буферизация файлов. Для этого вы можете использовать атрибут preload . Он может принимать 3 значения:

none - если вы не хотите использовать буфер файлов;
auto - если вы хотите, чтобы браузер беферизировал файл целиком;
metadata - для загрузки лишь служебной информации (продолжительность звучания и др.).

Управление воспроизведением через JavaScriptУправлять HTML5 аудио-проигрывателем через JavaScript очень легко. Следующий пример показывает, как с использованием JavaScript можно построить свои базовые элементы управления аудио-плеером: Воспроизведение Пауза Громкость + Громкость -

Вот и всё на сегодня.
Надеюсь, что эта статья помогла Вам понять базовые возможности HTML5 тега .

Данный вопрос встречается очень часто, поэтому я решил ещё в уроках посвятить ему отдельную статью. Поскольку для проигрывания аудио универсальной технологии для всех браузеров у HTML нет, то для решения этой проблемы предлагаю скачать файл аудио проигрывателя, как и делается на большинстве сайтов. Делаем всё по шагам:

1. На хостинге, где и располагается Ваш сайт, в корневом каталоге (папке, где индексный файл), соpдайте папку audio. В неё в дальнейшем будете помещать все аудио файлы.

3. Теперь выберите нужные файлы, лучше в формате mp3. Создайте папку audio в корне сайта и закачайте их.

4. Остаётся только вставить код подключения плеера. Он подойдёт для любого сайта В нужном месте следует только указать путь к файлу плеера и аудио файлу, соответственно заменив слова ваш_домен и название_аудио_файла :

И всё готово! Можете посмотреть и работу примера .

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

Первый способ - это тег 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 - тег audio
audio - парный тег, определяющий фоновый звук, музыку или другой аудио поток на сайте.

Атрибуты тега audio

autoplay - файл проигрывается сразу при загрузке страницы (аналогично фоновой музыке bgsound)
controls - отобразить панель управления плеера в браузере
loop - проигрывает файл заново после его окончания
preload - загрузка аудио файла произойдёт вместе с загрузкой страницы
src - путь к аудио файлу (mp3 или ogg)

Пример кода с тегом audio

Тег audio

Аудио в HTML 5

Тег audio не поддерживается вашим браузером.
Скачайте музыку.

Описание

Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут src или вложенный тег . Внутри контейнера можно написать текст, который будет выводиться в браузерах, не работающих с этим тегом.

Список поддерживаемых браузерами кодеков ограничен и приведен в табл. 1.

Табл. 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. Воспроизведение аудиофайла

Браузеры

Управление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.