Тег audio

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

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

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

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

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

Результат:

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

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

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

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

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

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

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

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

1. autoplay="autoplay" - начинает проигрывать композицию сразу после загрузки веб-страницы, по умолчанию атрибут отключён (и никогда его не включайте),
2. controls="controls" - создает панель управления аудиофайлом, по умолчанию атрибут отключён,
3. loop="loop" - заного запускает аудиофайл, после окончания его воспроизведения, по умолчанию атрибут отключён,
4. preload="auto/metadata/none" - загружает аудиофайл в проигрыватель одновременно с загрузкой веб страницы, но не воспроизводит его, по умолчанию имеет значение none
Определения значений:
auto - загружает аудиофайл,
metadata - загружает только служебную информацию,
none - не загружает аудиофайл.
Атрибут preload=" " не работает, если включен атрибут autoplay=" "
5. src="адрес" - указывает путь к аудиофайлу.

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