Элемент <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>

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

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

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

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

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

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

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

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