HTML :: Использование аудиозаписей на странице
Тег <audio> и его атрибуты
В пятой версии HTML была официально добавлена возможность размещать аудиозаписи при помощи элемента «audio», который формируется парным тегом <audio> (от англ. audio – звукозапись) и отображается браузером, как строчный элемент. Абсолютный или относительный путь к файлу указывается в атрибуте src. Элемент «audio» не просто добавляет аудиозапись на веб-страницу, но также позволяет воспроизводить и управлять ею. Для этого используются атрибуты (действительны и для видеозаписей):
-
preload – служит для загрузки аудиофайла во время загрузки страницы, принимает три значения:
- "none" – аудиофайл не загружается (используется по умолчанию),
- "auto" – браузер сам может принимать решение о предварительной загрузке файла, при этом аудиофайл может быть загружен целиком во время загрузки страницы,
- "metadata" – загружать только служебную информацию, например, длительность записи;
- autoplay – запись начинает проигрываться сразу же после загрузки страницы, при этом атрибут отменяет действие атрибута preload; атрибут по умолчанию выключен и значений не принимает, т.е. является логическим;
- loop – зацикливает аудиозапись, заставляя проигрываться ее снова после завершения; атрибут по умолчанию выключен и значений не принимает;
- muted – аудиозапись после загрузки запускается с отключенным звуком, т.е. пользователь должен будет сам установить желаемый уровень громкости; атрибут по умолчанию выключен и значений не принимает;
- controls – добавляет стандартную панель управления, вид которой зависит от браузера; обычно это стандартные кнопки воспроизведения, паузы, перемотки и т.д.; атрибут по умолчанию выключен и значений не принимает.
Тег <source> и его атрибуты
Элемент «audio» является контейнером для пустых элементов «source», которые формируются одиночными тегами <source> (от англ. source – источник) и служат для указания пути к аудиофайлам при помощи своего атрибута src. Дело в том, что разные браузеры поддерживают разные форматы аудио, поэтому аудиофайл, указанный в атрибуте src элемента «audio», необязательно будет воспроизводиться данным браузером. Чтобы выйти из такой ситуации, нужно указывать путь к файлам через элементы «source». Обычно указывается несколько таких элементов внутри контейнера «audio», которые указывают сразу на несколько аудиофайлов разных форматов, но содержащих одну и ту же аудиозапись. Если браузер не поддерживает формат аудиофайла, путь к которому указан в атрибуте src первого элемента «source», он переходит ко второму элементу «source» и пытается воспроизвести его аудиофайл и т.д. Понятно, что не всегда имеется сразу несколько одинаковых аудиозаписей, но хранящихся в разных форматах. Однако эта проблема легко решается при помощи специальных программ для конвертирования файлов из одного формата в другой, среди которых, кстати, имеются вполне приемлемые бесплатные аналоги.
Кроме атрибута src элемент «source» имеет еще два атрибута: media, аналогично элементам «link» и «style», и type, который принимает значения в формате: type="MIME-тип; codecs='кодек'".
Рассмотрим пример №1 добавления аудиофайла на веб-страницу.
<!DOCTYPE html> <html> <head> <!-- Незабываем задавать служебные элементы --> <meta charset="utf-8"> <base href="https://site.name/"> <title>Аудиозаписи</title> </head> <body> <!-- Не виден на странице и не проигрывается --> <p> <audio src="html_files/video/Саймон.mp4"></audio> – первая запись не видна и не проигрывается, т.к. атрибут autoplay отсутствует. </p> <!-- Контрольная панель присутствует, воспроизведет только звук --> <p> <audio src="html_files/video/Саймон.mp4" controls autoplay></audio> – вторая запись будет проигрываться сразу же после загрузки,<br> т.к. присутствует атрибут autoplay. При этом, т.к. мы используем <br> элемент «audio», то проиграется только звуковая дорожка видеофайла.<br> Чтобы воспроизвести весь видеоролик, необходимо использовать<br> элемент «video», который мы рассмотрим в следующем пункте параграфа. </p> <!-- Воспроизведет звук второго «source» --> <p> <audio controls loop> <source src="html_files/video/Саймон.ogg"> <source src="html_files/video/Саймон.mp4"> </audio> – третья запись имеет контрольную панель, но сразу проигрываться<br> не будет. Зато после запуска она будет проигрываться по кругу. </p> </body> </html>
Пример №1. Использование элемента «audio»
Атрибут type мы в примере не указывали, т.к. браузер в любом случае попытается сам определить тип аудиофайла и воспроизвести его в случае поддержки. Но если его указать, то браузер сразу определит, сможет ли он воспроизвести данный файл.
Что касается внешнего вида контрольной панели проигрывателя, то он может отличаться от браузера к браузеру, однако основной набор кнопок (например, воспроизведение/пауза и уровень громкости) будет присутстовать во всех браузерах.
Быстрый переход к другим страницам
- Тег <canvas>
- Использование аудиозаписей на странице
- Использование видеороликов на странице
- Вернуться к оглавлению учебника