Книга: HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Вставка аудиоролика

Вставка аудиоролика

Для вставки на 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.

Сохраним Web-страницу в файле с именем t_audio.htm. Поместим выбранный аудиофайл (у автора — sound.wav) в папку, где находятся все файлы нашего Web- сайта (и t_audio.htm в том числе). И сразу же откроем только что созданную Web- страницу в Web-обозревателе (рис. 4.2).

Рис. 4.2. Web-страница t_audio.htm в Web-обозревателе

Мы увидим код примера и, ниже, результат его выполнения — симпатичные элементы для управления воспроизведением аудиоролика. Мы можем нажать кнопку воспроизведения и прослушать его.

Оглавление книги