Аудио тег – Музыка и звуки на HTML-странице. Что такое HTML. Учебник по HTML.

HTML5-аудио

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

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

Как добавить HTML5-аудио на веб-страницу

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

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

2. Аудио кодеки

Аудио кодек (декодер) представляет собой программу для преобразования цифровых данных в формат звукового файла или звукового потока. Популярными аудио форматами являются следующие:

MP3 — самый популярный аудио формат, использующий сжатие с потерями и позволяющий уменьшить размер файла в несколько раз. В силу лицензионных отчислений не поддерживается Firefox и Opera.

AAC (Advanced Audio Codec) — закрытый кодек, аналог MP3, но по сравнению с последним, поддерживает более высокое качество звука при сходном размере файла.

Ogg Vorbis — бесплатный формат с открытым кодом, поддерживается в Firefox, Opera и Chrome. Обеспечивает хорошее качество звука, но недостаточно широко поддерживается аппаратными проигрывателями.

3. Альтернативные медиа-ресурсы

Элемент <source> используется для добавления нескольких медиа-ресурсов для <audio> и <video>. Указывает на альтернативные видео/аудио файлы, которые браузер может выбрать из предложенных на основании поддерживаемого им типа носителя или кодека.

4. Добавление субтитров и заголовков

Элемент <track> используется в качестве дочернего элемента <audio> и <video>. Добавляет текстовую дорожку для субтитров, заголовков медиафайлов или другой текстовой информации, которая должна быть видна во время воспроизведения аудио или видеофайла.

5. Стилизованный пример аудио плеера

С помощью css-стилей можно придать аудио плееру необычный вид. Воспроизведение управляется с помощью небольшого скрипта (используется библиотека jQuery), звук появляется при наведении на пластинку.

Тег | HTML справочник

Поддержка браузерами

Описание

HTML тег <audio> позволяет добавить на страницу аудиофайл. Некоторые браузеры не поддерживают аудиофайлы некоторых форматов, поэтому необходимо предоставить аудиофайл в нескольких форматах одновременно, для этого используются теги <source>, которые должны располагаться внутри элемента <audio>.

Любой текст внутри элемента <audio> будет отображен браузером в том случае, когда сам элемент или формат используемого аудиофайла не поддерживается браузером.

Примечание: при использовании атрибутов controls, autoplay и loop, можно не присваивать им значения. Эти атрибуты являются атрибутами булева типа, то есть если атрибут указан, то данная функция считается включенной, если не указан — выключенной.

Атрибуты

autoplay:

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

Значения для логического атрибута autoplay можно задавать следующими способами:

<audio autoplay>
<audio autoplay="autoplay">
<audio autoplay="">

Пример »

controls:

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

Значения для логического атрибута controls можно задавать следующими способами:

<audio controls>
<audio controls="controls">
<audio controls="">

Примечание: если у элемента <audio> отсутствует атрибут controls, то подключенный аудиофайл не будет отображаться на странице.

Пример »

loop:

Указывает, что воспроизведение будет начинаться сначала, каждый раз, после завершения (повтор воспроизведения).

Значения для логического атрибута loop можно задавать следующими способами:

<audio loop>
<audio loop="loop">
<audio loop="">

Пример »

preload:

Указывает, какие действия должен выполнять браузер, если для проигрывателя не указан атрибут autoplay. Он может принимать одно из следующих трех значений:

• auto — загрузка аудиофайла начнется после загрузки страницы
• metadata — сбор информации о аудиофайле: размер, первый кадр, список воспроизведения, длительность
• none — загрузка аудиофайла начнется только после щелчка мыши по кнопке воспроизведение

Примечание: при совместном использовании с атрибутом autoplay атрибут preload будет проигнорирован.

Пример »

src:

Определяет путь к нужному аудиофайлу (путь может быть либо абсолютным либо относительным). Пример »

Тег <audio> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

Нет.

Пример

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3">
  Ваш браузер не поддерживает тег audio
</audio> 

Результат данного примера в окне браузера:

AudioTag info для распознавания песни и мелодии онлайн

Бесплатный онлайн сервис AudioTag.info предназначен для распознавания музыкальных произведений. При помощи онлайн сервиса AudioTag вы можете узнать название песни, имя исполнителя песни, или узнать название мелодии.

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

В большинстве случаев, при воспроизведении аудио файла, в плеере отображается информация об исполнителе, песне или мелодии, часто отображается название альбома, и даже номер трека. Сам аудио файл имеет имя, из которого можно узнать название песни и имя исполнителя, поэтому пользователю, в этом случае, все будет понятно.

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

Если вы даже откроете свойства данного аудиофайла, то вы убедитесь в том, что никакой полезной информации о содержании этого файла, там не будет обнаружено.

Выходом из такой ситуации, будет использование специального сервиса, с помощью которого можно будет узнать название песни, музыки, исполнителя данного произведения. Один из таких сервисов для распознавания песен и музыки онлайн — бесплатный сервис AudioTag.info. На сайте самого сервиса написано, что это персональный робот по распознаванию музыки.

Сервис AudioTag работает на русском языке, поэтому вы не испытаете проблем с его использованием. Единственное условие: аудио файл должен быть расположен на компьютере пользователя, откуда его нужно будет загрузить на сервис.

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

AudioTag.info

Сразу после перехода по ссылке, будет открыто окно сервиса AudioTag.info на английском языке. Для переключения интерфейса сервиса на русский язык, нажмите на кнопку «rus», которая расположена в правой верхней части окна веб-страницы.

После обновления веб-страницы, интерфейс Audiotag.info перейдет на русский язык.

Распознавание музыки в AudioTag.info

Распознавание музыки будет происходить в три этапа:

• загрузка аудио файла с вашего компьютера;
• подтверждение кода;
• получение результата.

Вначале, вам нужно будет загрузить со своего компьютера аудио файл на онлайн сервис AudioTag.

Сервис рекомендует произвести загрузку аудио файла продолжительностью 15-45 секунд. Распознавание музыкального произведения будет производиться по случайным отрезкам в 15 секунд, поэтому будет лучше загружать на сервис отрезки из середины произведения. Естественно, можно загрузить песню или мелодию полностью, хуже от этого точно не будет.

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

Онлайн сервис AudioTag.info поддерживает следующие форматы: WAV, MP3, OGG, FLAC, FLV, MP4, AMR и многие другие.

Как узнать название песни в AudioTag.info

В окне сервиса нажмите на кнопку «Browse…». В открывшемся окне Проводника выберите аудио файл, который необходимо будет добавить на сервис, а после этого нажмите на кнопку «Загрузить».

Можно будет также вставить прямую ссылку на аудио файл, введя ее URL адрес.

На этом примере, я загрузил на сервис со своего компьютера аудио файл с мелодией, с названием «Track 9».

После загрузки файла на сервис, откроется новое окно, в котором вам нужно будет подтвердить код. Здесь нужно будет решить простой арифметический пример. Ответ решения примера введите в соответствующее поле. Это сделано специально для защиты от ботов.

После ввода ответа, нажмите на кнопку «Дальше».

Далее робот начнет распознавать добавленную песню или мелодию.

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

После завершения распознавания, вы получите результат работы сервиса. Полученный результат распознавания песни или мелодии, может быть один, или здесь будет отображено сразу несколько результатов: наиболее вероятный, и далее в процентах от наибольшей вероятности.

В данном случае, оказалось, что это мелодия известной песни «Nights in White Satin», в исполнении оркестра под управлением Джеймса Ласта.

Выводы статьи

Онлайн сервис AudioTag.info предоставляет возможность пользователю узнать название песни, узнать название исполнителя песни, или узнать название мелодии.

AudioTag info — как узнать название песни или мелодии (видео)

Похожие публикации:

Тег | htmlbook.ru

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

Описание

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

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

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

Синтаксис

<audio src="URL"></audio>
<audio>
 <source src="URL">
</audio>

Атрибуты

autoplay

Звук начинает играть сразу после загрузки страницы.

controls

Добавляет панель управления к аудиофайлу.

loop

Повторяет воспроизведение звука с начала после его завершения.

preload

Используется для загрузки файла вместе с загрузкой веб-страницы.

src

Указывает путь к воспроизводимому файлу.

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

Обязателен.

Пример

HTML5IE 8IE 9+CrOpSaFx

<!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>

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

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

Браузеры

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

Освоение HTML5 тега audio / Habr

<audio src="sound.mp3" autoplay></audio>

<audio src="sound.mp3" autoplay loop></audio>

<audio src="sound.mp3" controls></audio>

 поддерживается большинством современных браузеров, но проблема в том, что разные браузеры поддерживают разные форматы файлов. Safari, например, может проигрывать MP3, а Firefox не может, и играет OGG-файлы вместо этого. Решение этой проблемы заключается в использовании обоих форматов, чтобы каждый посетитель мог услышать звук, независимо от того, какой браузер он использует.
<audio controls> 
  <source src="sound.ogg"> 
  <source src="sound.mp3"> 
</audio>

<audio controls>
  <source src="sound.ogg" type="audio/ogg" >
  <source src="sound.mp3" type="audio/mp3" >
</audio>

? Все легко: ниже приведён код, который будет отображать сообщение для браузеров, которые не поддерживают тег .
<audio controls>
  <source src="sound.ogg" type="audio/ogg" >
  <source src="sound.mp3" type="audio/mp3" >
  Ваш браузер не пожжерживает тег audio!
</audio>

<audio src="sound.mp3"></audio>
<div>
	<button>Воспроизведение</button>
	<button>Пауза</button>
	<button>Громкость +</button>
	<button>Громкость -</button>
</div> 

Тег | HTML справочник

Значение и применение

Раньше в браузерах не было встроенных возможностей для поддержки аудио и видео контента, но с развитием интернет, поддержка мультимедийных элементов в качестве возможностей современных браузеров стала необходимостью. В HTML5 были введены новые элементы <audio> и <video>, которые поддерживаются во всех современных браузерах. Основная задача тега <audio> заключается в добавлении аудио контента на страницу.

Формат аудио файла определяет структуру и особенности представления звуковых данных при хранении на носителе (запоминающее устройство). Для устранения избыточности аудиоданных, как правило, используются специальные аудиокодеки, благодаря которым производят сжатие аудиоданных. Современные браузеры поддерживают следующие 3 формата аудио:

• Формат MP3 — это кодек и контейнер одновременно. Он широко используется повсеместно для размещения скачиваемой музыки.
• Формат WAV – также кодек и контейнер одновременно.
• Контейнер Ogg + аудио кодек Vorbis. Его обычно называют «Ogg Vorbis». Был разработан сообществом Xiph для того, чтобы заменить собой запатентованные MP3, AAC и WMA.

MIME-типы для аудио:

Поддержка браузерами

Атрибуты

Пример использования

Элемент <audio> использует те же атрибуты, что и элемент <video>, за исключением атрибутов width (ширина), height (высота) и poster (изображение, которое отображается до воспроизведения видео). По аналогии с использованием элемента <video>, вы можете предоставить несколько вариантов аудио форматов с помощью элемента <source>, как показано в примере ниже:

<!DOCTYPE html>
<html>
	<head>
		<title>Аудио в HTML5</title>
	</head>
	<body>
		<h2>Аудио в HTML5</h2>
		<audio controls>
			<source src = "sound.mp3" type = "audio/mp3">
			<source src = "sound.ogg" type = "audio/ogg">
			Ваш браузер не поддерживает этот аудио формат. <!--Текст будет виден только тем у кого браузер не поддерживает этот аудио формат-->
			Вы можете скачать этот файл по ссылке ниже:
			<p><a href = "sound.rar">Скачать</a></p>
		</audio>
	</body>
</html>

В этом примере мы:

Добавили на страницу аудио-контент (тег <audio>), атрибутом controls добавили отображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения / паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости).

Использовали тег <source>, который позволяет указать несколько вариантов формата аудио (в этом случае браузер сможет выбрать подходящий формат для загрузки и воспроизведения). Чтобы повысить эффективность работы браузера необходимо указывать в тегах <source> атрибут type (MIME-типы для аудио).

Результат нашего примера:

Допускается добавлять аудио файлы с использование упрощенного синтаксиса (без использования тега <source>), но такая запись будет актуальна если все браузеры поддерживают данный формат аудио:

<audio src = "sound.mp3" type = "audio/mp3" controls>
	Ваш браузер не поддерживает этот аудио формат. <!--Текст будет виден только тем у кого браузер не поддерживает этот аудио формат-->
	Вы можете скачать этот файл по ссылке. 
</audio>

Значение CSS по умолчанию

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

| Справочник HTML

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

Аудио кодеки

Аудио кодек (декодер) представляет собой программу для преобразования цифровых данных в формат звукового файла или звукового потока. Популярными аудио форматами являются следующие:

MP3 — самый популярный аудио формат, использующий сжатие с потерями и позволяющий уменьшить размер файла в несколько раз.

AAC (Advanced Audio Codec) — закрытый кодек, аналог MP3, но по сравнению с последним, поддерживает более высокое качество звука при сходном размере файла.

WAVE, WAV (Waveform Audio File Format) — формат файла-контейнера для хранения записи оцифрованного аудиопотока, подвид RIFF. Этот контейнер, как правило, используется для хранения несжатого звука в импульсно-кодовой модуляции.

Ogg Vorbis — бесплатный формат с открытым кодом. Обеспечивает хорошее качество звука, но недостаточно широко поддерживается аппаратными проигрывателями.

Поддержка браузерами форматов аудио

MIME-типы для аудио форматов

Синтаксис

<audio src="URL">...</audio>
<audio>
  <source src="URL">
</audio>

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

Обязателен.

Атрибуты

autoplay

Звук начинает играть сразу после загрузки страницы.

controls

Добавляет панель управления к аудиофайлу.

loop

Повторяет воспроизведение звука с начала после его завершения.

muted

Отключает звук при воспроизведении музыки.

preload

Указывает как аудио должно загружаться при загрузке страницы. Атрибут игнорируется, если присутствует атрибут autoplay.

src

Указывает путь к воспроизводимому файлу.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Нет.

Различия между HTML 4.01 и HTML5

Элемент <audio> является новым в HTML5.

Пример использования:

Элемент <audio>

Пример HTML:

<audio controls>
  <source src="audio/BigHornsIntro.ogg" type="audio/ogg">
  <source src="audio/BigHornsIntro.mp3" type="audio/mpeg">
  Ваш браузмер не поддерживает тег audio.
</audio>