Для вставки на Web-страницу аудиоролика язык HTML 5 предусматривает парный тег <audio>. Интернет-адрес файла, в котором хранится этот аудиоролик, указывают с помощью атрибута src этого тега:
<audio src="sound.wav"></audio>
Встретив тег <audio>, Web-обозреватель может сразу загрузить и воспроизвести аудиофайл, только загрузить его без воспроизведения или вообще ничего не делать. (В последнем случае мы можем запустить воспроизведение из Web-сценария; о Web-сценариях разговор пойдет в части III.) Также он может вывести на Web-страницу элементы управления, с помощью которых посетитель запускает воспро-изведение аудиофайла, приостанавливает его, прокручивает вперед или назад и регулирует громкость. Все это настраивается с помощью различных атрибутов тега <audio>, которые мы скоро рассмотрим.
Тег <audio> создает блочный элемент Web-страницы. Так что мы не сможем вставить аудиоролик на Web-страницу в качестве части абзаца. Зато, чтобы поместить его в отдельный абзац, нам не придется совершать никаких дополнительных действий (в отличие от изображения).
По умолчанию Web-обозреватель не будет воспроизводить аудиоролик. Чтобы он это сделал, в теге <audio> нужно указать особый атрибут autoplay. Это действительно особый атрибут: он не имеет значения — достаточно одного его присутствия в теге, чтобы он начал действовать (атрибут тега без значения):
<P>Сейчас вы услышите звук!</P>
<audio src="sound.ogg" autoplay></audio>
По умолчанию аудиоролик никак не отображается на Web-странице (что, впрочем, понятно — аудио нужно не смотреть, а слушать). Но если в теге <audio> поставить атрибут без значения CONTROLS, Web-обозреватель выведет в том месте Web-страницы, где проставлен тег <audio>, элементы управления воспроизведением аудиоролика. Они включают кнопку запуска и приостановки воспроизведения, шкалу воспроизведения и регулятор громкости:
<P>Нажмите кнопку воспроизведения, чтобы услышать звук.</P>
<audio src="sound.ogg" CONTROLS></audio>
Атрибут без значения AUTOBUFFER имеет смысл указывать в теге <audio> только в том случае, если там отсутствует атрибут autoplay. Если он указан, Web-обозреватель сразу после загрузки Web-страницы начнет загружать файл аудиоролика — это позволит исключить задержку файла перед началом его воспроизведения.
Чтобы проверить полученные знания в действии, нам понадобится аудиоролик поддерживаемого Web-обозревателем формата. Автор нашел у себя небольшой аудиоролик формата WAV-PCM и дал ему имя sound.wav. Вы можете использовать любой другой аудиоролик, но, разумеется, в HTML-коде листинга 4.2 придется указать имя файла, в котором он хранится.
Откроем Web-страницу index.htm и впишем в раздел тегов тег <AUDIO>. Создадим описывающую этот тег Web-страницу, HTML-код которой приведен в листинге 4.2.
Листинг 4.2
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html"; charset=utf-8">
<title>Тег <audio></title>
</head>
<body>
<h1>Тег <audio></h1>
<p>Тег <audio> служит для вставки на Web-страницу аудиоролика.</p>
<h5>Пример:</h5>
<audio width="300" height="200" src="Путь к файлу" controls="controls"> </audio>
Тег <audio> служит для вставки на Web-страницу аудиоролика.
Пример:
Или так:
</body>
</html>
Чтобы установить себе на сайт audio проигрыватель, как показано во втором примере, нам просто необходимо скачать программу Web Audio plus. Без нее мы не сможем создать код плеера, куда и нужно загружать audio ролик. Так-же тут можно прочитать подробнее об этой программе.
Чтобы воспользоваться установкой плеера из первого примера, необходимо чтобы audio файл был формата ogg. Чтобы поэкперементировать со вставкой на сайт проигрывателя, я даю пару ссылок на музыкальные композиции. По желанию можно самому конвертировать mp3 в ogg.
