Вставка audio HTML5

Всем доброго времени суток. На связи Алексей Гулынин. В прошлых двух статьях (первая и вторая) вы узнали о том, что появилось нового по работе с формами в HTML5. В данной статье я бы хотел рассказать, что такое audio в HTML5, и как с помощью данного тега проиграть музыку на сайте. Раньше для проигрывания музыки на сайте приходилось использовать различные сторонние сервисы, скрипты, flash. Теперь же всё значительно упростилось, достаточно использовать тег <audio> с различными атрибутами. Давайте разберем на примере (для примера подыщите какой-нибудь свой музыкальный файл):

<!DOCTYPE html5>
<html>
<head>
	<meta charset="utf-8"/>
</head>
<body>
	<audio autoplay="autoplay">
		<source src="music.mp3"/>
	</audio>
</body>
</html>

В данном случае, если вы запустите страницу, то сразу заиграет ваша песня (делается это с помощью атрибута autoplay со значением autoplay). Если данный атрибут не указывать, то песня играть не будет. Давайте вставим проигрыватель на сайт, с помощью которого мы будем управлять воспроизведением.

Делается это с помощью атрибута controls со значением controls:

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

Теперь, если вы запустите страницу, то песня сразу заиграет и можно будет управлять воспроизведением. Также отмечу, что у тега <source> можно указать атрибут type со значением "audio/mpeg":

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

В интернете нашёл информацию, что mp3 не везде работает, поэтому нужно указывать ещё один формат, вместе с mp3:

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

В интернете есть сайты, где можно бесплатно переконвертировать один формат файла в другой. К примеру можно воспользоваться вот этим сайтом audio.online-convert.com.
В различных браузерах, проигрыватель может выглядеть по-разному. Также рекомендую предусмотреть тот факт, что не во всех браузерах <audio> будет корректно работать. Пользователю нужно дать подсказку о том, что его браузер не поддерживает данную возможность. Для этого можно просто написать так:

<audio autoplay = "autoplay" controls = "controls">
	<source src="music.mp3" type="audio/mpeg"/>
	<source src="music.ogg" type="audio/ogg"/>
	<h3>Здесь должно быть audio. Ваш браузер не поддерживает данную возможность. Обновите его.</h3>
</audio>

Если ваш браузер поддерживает данную возможность, то данного сообщения вы не увидите. Также есть дополнительные атрибуты, которые могут быть полезны:

loop — файл начнёт заново воспроизводиться, как только закончится воспроизведение (так сказать зацикливание).

preload — файл начнёт играть вместе с загрузкой всей страницы.

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

Если у вас возникнут трудности можете подсмотреть готовый код:

Подсмотреть код реализации

<!DOCTYPE html5>
<html>
<head>
	<title>Управление audio в HTML5 через Javascript</title>
	<meta charset="utf-8"/>
</head>
<body>
<p id = "p1">music.mp3</p>
<audio id = "mymusic">
</audio>
<script>
var audio = document.getElementById("mymusic"); //находим элемент с идентификатором mymusic
var p1 = document.getElementById("p1");
p1.addEventListener("click", function() {//p1 добавляем событие, которое будет выполняться при нажатии
  if (audio.paused || audio.ended) {//если мелодия стоит на паузе или выключена
	audio.src = "music.mp3"; //указываем нужную мелодию
	audio.controls = "true"; //покажем проигрыватель
    audio.play(); //запускам
  } else { //иначе
    audio.pause(); //останавливаем
  }
});
</script>
</body>
</html>

В данной статье вы узнали, как работать с audio в HTML5.

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.