Тег audio управляет проигрыванием аудиозаписи на HTML5 странице. При его добавлении на странице появляется плейер, у которого будут кнопки 'Назад', 'Вперед', 'Стоп' и так далее (их вид и количество зависит от браузера). Путь к файлу задается через атрибут src или вложенный тег source.

Тег source нужен для того, чтобы задавать пути к файлам аудиозаписи в различных форматах (так как браузеры поддерживают разный формат аудио, например mp3 или wav). Если у вас есть запись в одном из форматов, то нужно ее сконвертировать и в другие.

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

Внимание!. Если вы хотите увидеть плейер для управления проигрыванием аудио - следует добавить атрибут controls. Без него вы ничего не увидите - и звука при этом тоже не будет. Чтобы был звук при отсутствии плейера - добавьте атрибут autoplay.

Атрибуты

Атрибут Описание
src Указывает путь к аудио файлу. Но лучше для этого использовать тег source (в этом случае можно будет задать аудио в разных форматах).
preload Используется для загрузки аудио файла одновременно с загрузкой страницы сайта. Принимаемые значения: none (не загружать файл), metadata (загрузить только служебную информацию: продолжительность звучания и так далее), auto (загрузить аудиофайл целиком при загрузке HTML страницы).
Значение по умолчанию: none, файл не будет загружен.
autoplay Звук начинает играть сразу после загрузки страницы, при этом наличие атрибута preload будет проигнорировано.
Пользоваться так: <audio autoplay="autoplay"> или так <audio autoplay>.
controls Добавляет панель управления к аудиофайлу.
Пользоваться так: <audio controls="controls"> или так <audio controls>. По умолчанию (если атрибута нет) панель не добавляется.
loop Повторяет аудиозапись по "кругу": после завершения она начнет играть заново.
Пользоваться так: <audio loop="loop"> или так <audio loop>. По умолчанию (если атрибута нет) запись проиграется только 1 раз.
muted Отключает звук в аудиозаписи.
Пользоваться так: <audio muted="muted"> или так <audio muted>. По умолчанию (если атрибута нет) у записи звук включен.

Примеры

Пример . Плейер на странице сайта

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

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

Результат выполнения кода:

Пример . Плейер на странице сайта с тегом sourse

Сейчас вместо атрибута src для тега audio добавлен тег source:

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

Результат выполнения кода: