A- A A+
Тег audio

Благодаря новому тегу audio, в HTML5 появилась возможность добавлять и воспроизводить музыку на сайте, используя короткий синтаксис.

Шаг 1. Размещаем аудиозаписи

В папку «media» или в любой другой каталог помещаем аудиофайлы с кодеками mp3 и ogg, которые поддерживаются всеми популярными браузерами.

Тег audio

Шаг 2. Создаем аудиоплеер

Сначала сделаем заголовок, например «Музыка». Далее пишем следующий синтаксис:

<audio controls="controls">
<source src="/media/dimmi-quando.ogg" type="audio/ogg" />
<source src="/media/dimmi-quando.mp3" type="audio/mpeg" />
</audio>

Тег audio

Атрибут controls добавляет панель для управления музыкой.

Переходим в браузер, где теперь появилась панель с кнопкой воспроизведения, времени звучания и регулятором громкости.

Тег audio

Шаг 3. Автоматическое воспроизведение

Если мы добавим атрибут autoplay, то после загрузки страницы автоматически начнется воспроизведение. Правда, автоматическое воспроизведение, далеко не всем понравится.

Тег audio

При этом можно убрать атрибут controls и отсутствие панели управления не будет препятствовать воспроизведению. Просто исчезнет возможность управлять музыкой.

Тег audio

В следующий раз мы обсудим добавление видеофайлов…

 

Добавить комментарий

Защитный код Обновить

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

МОЙ TELEGRAM-КАНАЛ

ПОДПИСАТЬСЯ!


Перенос на хостинг

Перенос на хостинг

Бесплатный видео-курс по переносу готового сайта на одну из лучших хостинг-площадок РУнета.

Смотреть (бесплатно)

Бессмертный сайт

Бессмертный сайт

2 урока, 16 минут, и Ваш сайт - БЕССМЕРТНЫЙ!

Узнать подробности!