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

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

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

<H6>Пример:</H6>

<PRE>&lt;AUDIO SRC=&quot;sound.wav&quot; CONTROLS&gt;&lt;/AUDIO&gt;</PRE>

<H6>Результат:</H6>

<AUDIO SRC="sound.wav" CONTROLS></AUDIO>

</BODY>

</HTML>

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

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

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

Данный текст является ознакомительным фрагментом.



Поделитесь на страничке

Похожие главы из других книг:

Вставка

Из книги автора

Вставка Редко какой документ состоит только из текста – как правило, его сопровождают рисунки, фотографии, а в случае работы с онлайновым пакетом так и хочется вставить пару гиперссылок! Не нужно сопротивляться своим желаниям – ссылки вставляются в редактируемый


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

Из книги автора

Вставка аудиоролика Для вставки на Web-страницу аудиоролика язык HTML 5 предусматривает парный тег <AUDIO>. Интернет-адрес файла, в котором хранится этот аудиоролик, указывают с помощью атрибута SRC этого тега:<AUDIO SRC="sound.wav"></AUDIO>Встретив тег <AUDIO>, Web-обозреватель может


Вставка

Из книги автора

Вставка Приступим к рассмотрению вкладки Вставка (рис. 1.47). Рис. 1.47. Вкладка Вставка Как вы все уже догадались, инструменты этой вкладки позволяют вставить что-нибудь в текст


Вкладка Вставка

Из книги автора

Вкладка Вставка Итак, вкладка Вставка (рис. 3.28). Рис. 3.28. Вкладка Вставка На этой вкладке собрано все, что можно вставить в слайд.Используя команды кнопки Таблица, можно поместить на слайде как обычную таблицу, нарисовав ее прямо на слайде, так и таблицу Excel. Если вы освоили


Вставка блока

Из книги автора

Вставка блока Команда INSERT осуществляет вставку в текущий чертеж предварительно определенных блоков или существующих файлов рисунков в качестве блока.Команда INSERT вызывается из падающего меню Insert ? Block… или щелчком на пиктограмме Insert на панели инструментов Draw. При этом


Вставка символов

Из книги автора

Вставка символов При работе с текстом нам часто будет требоваться использовать какой-нибудь специальный символ. Причем это касается не только малоупотребимых символов, которые можно вызвать с помощью Таблицы символов, но и особых знаков, используемых программой Adobe


Вставка инструкций SQL в VBA-код

Из книги автора

Вставка инструкций SQL в VBA-код Фрагменты кола, приведенные раньше в настоящей главе, должны были проиллюстрировать, как добавлять инструкции SQL в код, написанный на VBA. Здесь очень важно не забывать о том, что VBA обрабатывает инструкции SQL как текстовые строки, а не как часть


Вставка блока

Из книги автора

Вставка блока Команда INSERT осуществляет вставку в текущий чертеж предварительно определенных блоков или существующих файлов рисунков в качестве блока.Команда insert вызывается из падающего меню Insert ? Block… или щелчком на пиктограмме Insert на панели инструментов Draw. При этом


Вставка блока

Из книги автора

Вставка блока Команда INSERT осуществляет вставку в текущий чертеж предварительно определенных блоков или существующих файлов рисунков в качестве блока.Команда INSERT вызывается из падающего меню Insert ? Block… или щелчком на пиктограмме Insert на панели инструментов Draw. При этом


Вставка тишины

Из книги автора

Вставка тишины Рассмотрим такую обработку звукового файла, как вставка фрагмента тишины, доступную с помощью процессора Insert Silence (Вставка тишины). Чтобы вставить в файл фрагмент тишины, необходимо выполнить следующие действия.1. Установите указатель текущей позиции в


Вставка изображений

Из книги автора

Вставка изображений Инструментарий ArchiCAD, предназначенный для визуализации разрабатываемого проекта, не ограничивается рассмотренными механизмами автоматического или интерактивного создания видов. Часто в проект требуется поместить уже готовые изображения, причем


Вставка блока

Из книги автора

Вставка блока Команда INSERT осуществляет вставку в текущий чертеж предварительно определенных блоков или существующих файлов рисунков в качестве блока.Команда INSERT вызывается из падающего меню Insert ? Block... или щелчком на пиктограмме Insert на панели инструментов Draw. При этом


13.7. Вставка картинок

Из книги автора

13.7. Вставка картинок Для вставки картинок используется команда меню Вставка, Рисунок. Затем вы можете выбрать одну из команд:Картинки — позволяет выбрать картинку из галереи MS Office. Исследуйте эту галерею, в ней вы найдете много интересных рисунков, которые можно


Вставка

Из книги автора

Вставка Вставка оглавленияТеперь, зная, как пронумеровать листы, неплохо бы научиться делать и оглавление[42]. Microsoft Word делает и это тоже, причем гораздо быстрее любого из людей. Для этого некоторые абзацы надо объявить заголовками с помощью окна с выпадающим списком Стиль


Вставка картинок

Из книги автора

Вставка картинок В состав пакета Microsoft Office входит подборка картинок на разные темы. Чтобы использовать их для оформления документа, действуйте следующим образом.1. Нажмите кнопку Вставка ? Иллюстрации ? Клип. После этого в правой части окна Word появится область задач Клип.2.


Вставка символов

Из книги автора

Вставка символов Если вы хотите напечатать знак, которого нет на клавиатуре (?, ?, ?, ?, €, ® и т. п.), открываете меню Вставка и выбираете Символ. Перед вами откроется окно, в котором выбираете необходимые символы и нажимаете кнопку Вставить.Теперь потренируйтесь в наборе