Как использовать элемент audio в HTML5

В этой статье мы рассмотрим как вставлять аудио элементы на страницу.

HTML5 заполняет заполняет интернет всё больше и больше. HTML5 сделан для того, чтобы сделать легче жизнь для нас, разработчиков, благодаря своим аудио элементам. Этот элемент позволяет встраивать аудио файлов на веб-страницы, а также управлять воспроизведением звука с помощью JavaScript. Более того, это не требует никаких плагинов для работы, и поддерживается почти всеми современными веб-браузерами.

Посмотреть пример

Тег <audio> HTML5 для вставки аудиофайлов

Для того чтобы вставить аудизапись на страницу необходимо в html написать следующее:

1
2
3

<audio>
  <source src="music.mp3">
</audio>

Где src="music.mp3" — это путь к файлу с музыкой.

Кроссбраузерная совместимость

Тег <audio> поддерживается в большинстве современных браузерах, но некоторые браузеры поддерживают не все форматы аудиофайлов. Например, некоторые браузеры поддерживают формат «.mp3», но не поддерживают формат «.ogg». Решением этой проблемы является использование и одного формата, и другого на странице:

1
2
3
4

<audio>
  <source src="music.ogg">
  <source src="music.mp3">
</audio>

Автоматическое воспроизведение

Если вы хотите чтобы звук воспроизводился автоматически после загрузки страницы, то необходимо использовать атрибут autoplay:

1
2
3
4

<audio autoplay>
  <source src="music.mp3">
  <source src="music.ogg">
</audio>

Управление плеером

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

1
2
3
4

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

Тип файла

Хорошим тоном является указывать тип воспроизводимого аудиофайла, если вы используете их несколько.

1
2
3
4

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

Заглушка для старых браузеров

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

1
2
3
4
5

<audio controls>
  <source src="music.mp3" type="audio/mp3">
  <source src="music.ogg" type="audio/ogg">
  Извините, но ваш браузер не поддерживает аудио элементы.
</audio>

Буфер файла

Если файл достаточно большой, то правильно будет использовать буфер, чтобы он загрузился для дальнейшего воспроизведения. Для этого необходимо использовать атрибут со значением preload="auto":

1
2
3
4

<audio controls>
  <source src="music.mp3" type="audio/mp3" preload="auto">
  <source src="music.ogg" type="audio/ogg" preload="auto">
</audio>

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

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

Успехов!