belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...

HTML >>>

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

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

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

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

Рассмотрим пример 5.1 добавления аудиофайла на веб-страницу. Отображение соответствующей страницы показано на рис. 5.2.

<!DOCTYPE html>
<html>
<head>
	<!-- Незабываем задавать служебные элементы -->
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<title>Аудиозаписи</title>
</head>
<body>
	<!-- Не виден на странице -->
	<p>
		<audio src="dog_1.mp3"></audio> &ndash; первая запись не видна.
	</p>
	
	<!-- Виден вместе с панелью, воспроизведет только звук -->
	<p>
		<audio src="dog_1.mp4" controls></audio> &ndash; вторая запись.
	</p>
	
	<!-- Воспроизведет звук второго 'source'  -->
	<p>
		<audio controls>
			<source src="dog_1.ogg">
			<source src="dog_1.mp4">
		</audio> &ndash; третья запись.
	</p>
</body>
</html>

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

Рис. 5.2. Отображение страницы с использованием элемента 'audio' браузером

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

Контрольные вопросы и задания

  1. Для чего используется элемент 'audio'? Опишите его атрибуты.

Словарь новых английских слов

preload [ˌpriːˈləʊd] – предварительная загрузка.
loop [luːp] – петля, делать петлю.
muted [ˈmjuːtɪd] – приглушенный.
controls [kənˈtrəʊlz] – панель управления.
poster [ˈpəʊstə] – афиша, плакат.
plug in [ˈplʌɡ ɪn] – подключать.
frame [freɪm] – рамка, оболочка, фрейм.
allow [əˈlaʊ] – позволять, разрешать.
advertising [ˈadvətʌɪzɪŋ] – реклама.
form [ˈfɔːm] – форма, бланк, фигура.
pointer [ˈpɔɪntə] – указатель, стрелка.
lock [lɒk] – запирать, замок, затвор.
popup [ˈpəpʌp] – всплывающее меню.
same [seɪm] – то же самое, такой же.
origin [ˈɔːrɪdʒɪn] – источник, начало.
top [tɒp] – верхний, высший.
navigation [navɪˈɡeɪʃ(ə)n] – навигация.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх