Вставка аудиозаписей на html-страницу
http://belarusweb.net
Основы создания сайтов

Использование аудиозаписей на странице.
Теги <audio> и <source>

Тег <audio> и его атрибуты

В пятой версии HTML была официально добавлена возможность размещать аудиозаписи при помощи элемента 'audio', который формируется парным тегом <audio> и отображается браузером, как строчный элемент. Абсолютный или относительный путь к файлу указывается в атрибуте src. Элемент 'audio' не просто добавляет аудиозапись на веб-страницу, но также позволяет воспроизводить и управлять ею. Для этого используются атрибуты (действительны и для видеозаписей):

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

Тег <source> и его атрибуты

Элемент 'audio' является контейнером для пустых элементов 'source', которые формируются одиночными тегами <source> и служат для указания пути к аудиофайлам при помощи своего атрибута src. Дело в том, что разные браузеры поддерживают разные форматы аудио, поэтому аудиофайл, указанный в атрибуте src элемента 'audio', необязательно будет воспроизводиться данным браузером. Чтобы выйти из такой ситуации, нужно указывать путь к файлам через элементы 'source'. Обычно указывается несколько таких элементов внутри контейнера 'audio', которые указывают сразу на несколько аудиофайлов разных форматов, но содержащих одну и ту же аудиозапись. Если браузер не поддерживает формат аудиофайла, путь к которому указан в атрибуте src первого элемента 'source', он переходит ко второму элементу 'source' и пытается воспроизвести его аудиофайл и т.д. Понятно, что не всегда имеется сразу несколько одинаковых аудиозаписей, но хранящихся в разных форматах. Однако эта проблема легко решается при помощи специальных программ для конвертирования файлов из одного формата в другой, среди которых, кстати, имеются вполне приемлемые бесплатные аналоги.

Кроме атрибута src элемент 'source' имеет еще два атрибута: media, аналогично элементам 'link' и 'style' (смотреть), и type, который принимает значения в формате: type="MIME-тип; codecs='кодек'".

Рассмотрим пример 5.1 добавления аудиофайла на веб-страницу (для просмотра примера в браузере используйте значок 'Планета').

<!DOCTYPE html>
<html>
<head>
	<!--  Незабываем задавать служебные элементы  -->
	<meta charset="utf-8">	
	<base href="http://belarusweb.net/">
	<title>Аудиозаписи</title>
</head>
<body>
	<!--  Не виден на странице и не проигрывается -->
	<p>
		<audio src="belarusweb_files/video/Саймон.mp4"></audio>
		&ndash; первая запись не видна и не проигрывается, т.к.<br>
		атрибут autoplay отсутствует.
	</p>
	
	<!--  Контрольная панель присутствует, воспроизведет только звук  -->
	<p>
		<audio src="belarusweb_files/video/Саймон.mp4" controls autoplay></audio>
		&ndash; вторая запись будет проигрываться сразу же после загрузки, т.к.<br>
		присутствует атрибут autoplay. При этом, т.к. мы используем элемент<br> 
		'audio', то проиграется только звуковая дорожка видеофайла. Чтобы<br> 
		воспроизвести весь видеоролик, необходимо использовать элемент 'video',<br> 
		который мы рассмотрим в следующем пункте параграфа.
	</p>
	
	<!--  Воспроизведет звук второго 'source'   -->
	<p>
		<audio controls loop>
			<source src="belarusweb_files/video/Саймон.ogg">
			<source src="belarusweb_files/video/Саймон.mp4">
		</audio>

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

Пример 5.1. Использование элемента 'audio'  

Атрибут type мы в примере не указывали, т.к. браузер в любом случае попытается сам определить тип аудиофайла и воспроизвести его в случае поддержки. Но если его указать, то браузер сразу определит, сможет ли он воспроизвести данный файл.

Что касается внешнего вида контрольной панели проигрывателя, то он может отличаться от браузера к браузеру, однако основной набор кнопок (например, воспроизведение/пауза и уровень громкости) будет присутстовать во всех браузерах.