html.okpython.net
HTML и CSS для начинающих

HTML :: Тег <audio>

В HTML тег <audio> (от англ. audioзвукозапись) используется для добавления, воспроизведения и управления аудиозаписями на веб-странице. Кроме того, его можно использовать и для воспроизведения потокового мультимедиа, используя интерфейс MediaStream.

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

Синтаксис

	<audio>
		... 
	</audio>         	

	Закрывающий тег: обязателен.

Атрибуты

  • autoplay – запись начинает проигрываться сразу же после загрузки страницы, при этом атрибут отменяет действие атрибута preload. Атрибут по умолчанию выключен и значений не принимает, т.е. является логическим.
  • controls – добавляет стандартную панель управления, вид которой зависит от браузера; обычно это стандартные кнопки воспроизведения, паузы, перемотки и т.д. Атрибут по умолчанию выключен и значений не принимает.
  • loop – зацикливает аудиозапись, заставляя проигрываться ее снова после завершения. Атрибут по умолчанию выключен и значений не принимает.
  • muted – аудиозапись после загрузки запускается с отключенным звуком, т.е. пользователь должен будет сам установить желаемый уровень громкости. Атрибут по умолчанию выключен и значений не принимает.
  • preload – служит для загрузки аудиофайла во время загрузки страницы, принимает три значения:
    • "none" – загрузка аудиофайла начнется только после щелчка мыши по кнопке воспроизведение (используется по умолчанию);
    • "auto" – браузер сам может принимать решение о предварительной загрузке файла, при этом аудиофайл может быть загружен целиком во время загрузки страницы;
    • "metadata" – загружать только служебную информацию, например, длительность записи.
  • src – указывает путь к аудиофайлу, который нужно воспроизвести. В качестве значения атрибута могут использоваться как абсолютные, так и относительные адреса (подробнее здесь).
  • Для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Примеры

HTML Результат htmlCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<base href="https://site.name/">
	<title>Пример №1</title>
</head>
<body>
	<!--  Не виден на странице и не проигрывается -->
	<p>
		<audio src="html_files/video/Саймон.mp4"></audio>
		&ndash; первая запись не видна и не проигрывается, т.к.<br>
		атрибут autoplay отсутствует.
	</p>
	
	<!--  Контрольная панель присутствует, воспроизведет только звук  -->
	<p>
		<audio src="html_files/video/Саймон.mp4" controls autoplay></audio>
		&ndash; вторая запись будет проигрываться сразу же после загрузки, т.к.<br>
		присутствует атрибут autoplay. При этом, т.к. мы используем элемент<br> 
		«audio», то проиграется только звуковая дорожка видеофайла. Чтобы<br> 
		воспроизвести весь видеоролик, необходимо использовать элемент «video».
	</p>
	
	<!--  Воспроизведет звук второго «source»   -->
	<p>
		<audio controls loop>
			<source src="html_files/video/Саймон.ogg">
			<source src="html_files/video/Саймон.mp4">
		</audio>

		&ndash; третья запись имеет контрольную панель, но сразу проигрываться<br>
		не будет. Зато после запуска она будет проигрываться по кругу.
	</p>

</body>
</html>

Пример №1