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

    Определения значений атрибута preload=» «:
  • auto — загружает аудиофайл
  • metadata — загружает только служебную информацию
  • none — не загружает аудиофайл

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

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

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

| HTML | WebReference

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

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

Табл. 1. Кодеки и браузеры
Кодек
ogg/vorbis17311.53.5
wav12311.53.13.5
mp39123153.122
AAC9123153.122

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

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

Курс по вёрстке сайта на CSS Grid

Музыка на сайте. Тег в 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 9Firefox 3.5Opera 10.5Chrome 10.0Safari 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 — тип файла.

Добавить комментарий

Ваш адрес email не будет опубликован.