<audio> | Тег HTML - Справочник HTML + HTML5 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Понедельник, 05.12.2016
Главная » Справочник HTML » Звук


ОбъектыБлочные элементы
ТаблицыСтрочные элементы
СимволыФорматирование
ДокументыИзображения
ЗвукФормы
СпискиУстаревшие теги
ФреймыСкрипты



Адаптивный сайт - aTmpl


<audio> | Тег HTML

Тег <audio> предназначен для установки аудио плеера




Тег <audio> позволяет добавить на страницу плеер для воспроизведения файлов .mp3,.ogg.Дополнительно нужно прописывать стили для плеера и укомплектовывать соответствующими кодеками.Начинающему вебмастеру uCoz не советую ломать голову над его изготовлением.Система не даёт установить соответствующие плагины для его воспроизведения в чистом виде ( сприменением одного тега ).На момент создания статьи плееры уже были созданы,но их компоненты нарушали нормальную работу страницы.Советую использовать плееры с более гибкой и более пожходящие для системы,такие плееры есть на этом сайте в разделе informationПосмотрите аудиоплееры,не нуждающиеся в дополнительных настройкахАудиоплееры для сайта uCoz.Тег поддерживает глобальные атрибуты,а так же атрибуты событий в HTML5.




Синтаксис тега <audio> ( закрывающий тэг обязателен! )


<audio src="URL"></audio>
<audio><source src="URL"></audio>

Тег работает в браузерах





Пример применения ( для разных браузеров )


<!DOCTYPE html>
<html>
<head>
<title>Тег audio</title>
</head>
<body>
<audio autoplay preload="auto">
<source src="/html/audio/monetki.ogg" type='audio/ogg; codecs=vorbis'>
<source src="/html/audio/monetki.mp3" type="audio/mpeg">
Ваш браузер не поддерживает тег <audio>. <a href="/html/audio/monetki.mp3">Скачайте музыку</a>
</audio>
</body>
</html>

Атрибуты тега <audio>

Атрибут autoplay

Атрибут autoplay воспроизводит установленную композицию автоматически,при загрузке страницы

Синтаксис атрибута autoplay


<audio autoplay="autoplay"></audio>
Пример применения
<!DOCTYPE html>
<html>
<head>
<title>Атрибут autoplay</title>
</head>
<body>
<audio autoplay>
<source src="/html/audio/monetki.ogg" >
</audio>
</body>
</html>

Атрибут controls

Атрибут controls добавляет панель управления к установленному плееру в виде плейлиста и кнопок навигации

Синтаксис атрибута controls


<audio controls="controls"></audio>
Пример применения
<!DOCTYPE html>
 <html>
<head>
<title>Атрибут controls</title>
</head>
<body>
<audio controls>
<source src="/html/audio/monetki.ogg" >
</audio>
</body>
</html>

Атрибут loop

Атрибут loop воспроизводит установленную композицию как repeat в обычном плеере ( крутит по кругу )

Синтаксис атрибута loop


<audio loop="loop"></audio>
Пример применения
<!DOCTYPE html>
<html>
<head>
<title>Атрибут loop</title>
</head>
<body>
<audio loop>
<source src="/html/audio/monetki.ogg" >
</audio>
</body>
</html>

Атрибут preload

Атрибут preload воспроизводит установленную композицию как repeat в обычном плеере ( крутит по кругу )

Синтаксис атрибута preload


<audio preload="none | metadata | auto"></audio>

Значения атрибута preload

none - файл не будет загружаться

metadata - загрузится только дополнительная информация о файле

auto - установленный файл музыки загрузится сразу после загрузки страницы

Пример применения
<!DOCTYPE html>
<html>
<head>
<title>Атрибут preload</title>
</head>
<body>
<audio autoplay preload="auto">
<source src="/html/audio/monetki.ogg" controls autobuffer>
</audio>
</body>
</html>

Атрибут src

Атрибут src указывает путь к файлу который будет воспроизводится.Можно так же использовать тег <source>

Синтаксис атрибута src


<audio src="URL"></audio>
Пример применения
<!DOCTYPE html>
<html>
<head>
<title>Атрибут src</title>
</head>
<body>
<audio src="/html/audio/monetki.ogg" controls autobuffer</audio>
</body>
</html>



Русские шрифты





Категория: Звук | Добавил: IZOTOP (06.06.2012) | Автор: Меренков Михаил W
Просмотров: 4403 | Теги: Audio, HTML5, HTML, пример, тег, хтмл5, аудио | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]