Html5 audio тег: Тег audio HTML5 » Энциклопедия HTML5 – : The Embed Audio element — Web technology for developers — Вебджем.рф

Тег audio HTML5 » Энциклопедия HTML5

Элемент <audio> </audio>

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

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

Пример добавления аудиофайла при помощи тега <audio>:


<audio controls="controls">
    <source src="baauer-harlem-shake.ogg" />
    <source src="baauer-harlem-shake.mp3" />
</audio>

Результат:

Странно, Safari почему то не видит тега аудио.

Автор трека: Baauer,
Название: Garlem Shake.

Скачать файл можно c Яндекс.Диска: в формате OGG, в формате MP3.

Тег <source /> содержит в себе атрибут src=" ", чьим значением выступает адрес хранения файлов мультимедиа.

В нашем примере, тег

<source /> указывает на два файла хранящих одну и ту же информацию, но имеющих различное расширение (формат). Если ваш браузер не поддерживает файлы с расширением .ogg, то он будет проигрывать файлы с расширением .mp3 и наоборот.

Таблица поддержки браузерами аудио кодеков и форматов

Каждый браузер поддерживает только определённые аудио форматы, поэтому если вы хотите чтобы ваша музыка могла звучать на всех браузерах, то нужно добавить как минимум два файла, один с расширением .mp3, а другой с расширенеим .ogg

БРАУЗЕР/КОДЕК	aac	mp3	ogg/vorbis	wav
Chrome 6+	да	да	да	нет
FireFox 3.6+	нет	нет	да	да
IE 9+	да	да	нет	нет
Opera 10.60+	нет	нет	да	да
Safari 4+	да	да	нет	да

DVDVideoSoft — бесплатная русскоязычная программа для конвертирования и редактирования аудио/видео файлов различных форматов.

Тема о том почему браузеры поддерживют только определённые форматы, раскрывается в статье Война браузеров продолжается…

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

autoplay="autoplay" — начинает проигрывать композицию сразу после загрузки веб-страницы, по умолчанию атрибут отключён (ps: и никогда его не включайте :))

controls="controls" — создает панель управления аудиофайлом, по умолчанию атрибут отключён.

loop="loop" — заного запускает аудиофайл, после окончания его воспроизведения, по умолчанию атрибут отключён.

preload="auto/metadata/none" — загружает аудиофайл в проигрыватель одновременно с загрузкой веб страницы, но не воспроизводит его, по умолчанию имеет значение none

auto — загружает аудиофайл

metadata — загружает только служебную информацию
none — не загружает аудиофайл

Атрибут preload=» » не работает, если включен атрибут autoplay=» «

src="адрес" — указывает путь к аудиофайлу.

Читать далее: тег video

| HTML | WebReference

Элемент <audio> (от англ. audio — звук) добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задаётся через атрибут src или вложенный элемент <source>. Внутри контейнера <audio> можно написать текст, который будет выводиться в браузерах, не работающих с этим элементом.

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

Табл. 1. Кодеки и браузеры
Кодек
ogg/vorbis		17	3	11.5		3.5
wav		12	3	11.5	3.1	3.5
mp3	9	12	3	15	3.1	22
AAC	9	12	3	15	3.1	22

Для универсального воспроизведения в указанных браузерах аудио кодируют с помощью разных кодеков и добавляют файлы одновременно через элемент <source>.

Синтаксис

<audio src="<адрес>"></audio>
<audio>
 <source src="<адрес>">
</audio>

Закрывающий тег

Атрибуты

autoplay: Звук начинает играть сразу после загрузки страницы.
controls: Добавляет панель управления к аудиофайлу.
loop: Повторяет воспроизведение звука с начала после его завершения.
muted: Отключает звук при воспроизведении музыки.
preload: Используется для предварительной загрузки аудиофайла или его данных вместе с загрузкой веб-страницы.
src: Указывает путь к воспроизводимому файлу.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>audio</title>
 </head>
 <body>
  <p>Александр Клименков - Четырнадцать</p>
  <audio controls>
    <source src="audio/music.ogg" type="audio/ogg; codecs=vorbis">
    <source src="audio/music.mp3" type="audio/mpeg">
    Тег audio не поддерживается вашим браузером. 
    <a href="audio/music.mp3">Скачайте музыку</a>.
  </audio>
 </body>
</html>

Результат примера в браузере IE показан на рис. 1.

Рис. 1. Воспроизведение аудиофайла

Примечание

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

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 25.10.2018

Редакторы: Влад Мержевич

Музыка на сайте. Тег в HTML5
Не секрет, что времена технологии flash, к сожалению или к счастью, уходят. Виной тому нежелание компании Adobe доработать свой продукт под современные нужды. А рынок диктует новые условия и сбрасывать со счетов такого гиганта, как Apple было не предусмотрительно.
Apple полностью отказалась от поддержки технологии Flash в своих мобильных устройствах, в виду её чрезмерной ресурсоемкости, что в свою очередь, не лучшим образом сказывалось на времени автономной работы.
До недавнего времени, вывод звукового оформления на сайтах осуществлялся на базе Flash. Впрочем и сейчас подавляющее большинство онлайн-радиостанций используют эту технологию, что конечно не радует владельцев i-девайсов.

Но не всё так плохо, HTML5 наконец-то начал входить в жизнь, и толчок к его быстрому развитию и распространению, на мой взгляд, дало именно огромное количество устройств на базе iOS.
HTML5, к примеру, предоставляет простую возможность добавления музыки на сайт с помощью тега <audio>. В предыдущем моем посте, о Конюхе Федорове, для вывода аудиофайла использовался как раз этот тег.
Для проигрывания аудио файла в HTML5, достаточно разместить на страничке следующий код:
<audio src="song.mp3" controls="controls"></audio>
Выглядеть это будет примерно так:
В примере использована песня американской джазовой певицы Carmen Mercedes McRae.
На текущий момент существует три основных формата для элемента <audio> — .ogg, .mp3 и .wav. Однако, нет ни одного браузера, где полностью реализована поддержка всех указанных форматов.
Формат IE 8 IE 9 Firefox 3.5 Opera 10.5 Chrome 10.0 Safari 3.0
Ogg Vorbis Нет Нет Да Да Да Нет
MP3 Нет Да Нет Нет Да Да
Wav Нет Да Да Да Да Да
Из таблицы видно, что только .wav поддерживается почти всеми браузерами, однако с точки зрения размера файла, это далеко не оптимальный вариант.
Проблему кроссбраузерности можно решить, добавив несколько элементов source элементу <audio>, указав в качестве параметра, пути к одному аудиофайлу в различных форматах. Браузер воспроизведет первый поддерживаемый файл. Пример:
<audio controls="controls"> <source src="song.ogg" /> <source src="song.mp3" /> Ваш браузер не поддерживает элемент audio. </audio>
В примерах, у тега <audio> присутствует атрибут

controls, который добавляет управление аудио файлом (play, pause, volume). Помимо controls имеется ещё несколько атрибутов:
src – собственно путь к воспроизводимому файлу;
autoplay – воспроизведение файла при открытии страницы;
loop — зацикливает воспроизведения трека.
Это далеко не весь список, да и цели полностью описать работу данного элемента не ставилось.
Хотелось ещё заметить, что в MaxSite CMS, на которой сейчас работает блог, нашелся не понятный баг — аудиофайлы не проигрываются, если пути к ним указывать в элементе source. По всей видимости элемент source где-то экранируется движком. Попробую разобраться, как будет время, а пока, для совместимости, размещаю аудиофайлы в формате wav.
Подписывайтесь на канал Яндекс.Дзен и узнавайте первыми о новых материалах, опубликованных на сайте.
Если считаете статью полезной,
не ленитесь ставить лайки и делиться с друзьями.
HTML5 | Аудио
Аудио
Последнее обновление: 21.04.2016
Для воспроизведения звука без видео в HTML5 применяется элемент audio. Он во многом похож на элемент video. Для настройки элемента audio мы можем использовать следующие его атрибуты:
src: путь к аудиофайлу

controls: добавляет элементы управления воспроизведением

autoplay: устанавливает автовоспроизведение

loop: задает повторение аудиофайла

muted: отключает звук по умолчанию

preload: устанавливает режим загрузки файла

Действие всех этих атрибутов будет аналогично их действию в элементе video.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Аудио в HTML5</title> </head> <body> <audio src="mobile_phone.mp3" controls></audio> </body> </html>

Опять же в зависимости от браузера внешний вид элементов управления может отличаться. Выше приведен пример для Google Chrome. А в Firefox они будут выглядеть немного иначе:
Поддержка форматов аудио
Ключевым моментом для работы с аудио является поддержка браузером тех или иных форматов. На данный момент подавляющее большинство браузеров поддерживают mp3. Однако если у нас есть неуверенность, что наше аудио в определенном формате будет поддерживаться браузером пользователя, то мы можем использовать вложенный элемент source и указать аудио в иных форматах:
<audio controls> <source src="mobile_phone.mp3" type="audio/mpeg"> <source src="mobile_phone.m4a" type="audio/aac"> <source src="mobile_phone.ogg" type="audio/ogg"> </audio>
Как и в случае с элементом video, здесь у элемента source устанавливается атрибут
src с ссылкой на файл и атрибут type — тип файла.

Html5 audio тег: Тег audio HTML5 » Энциклопедия HTML5 – : The Embed Audio element — Web technology for developers