Теория урока

Звук в HTML5, элемент AUDIO

До появления HTML5 и flash было тяжело вставить аудио на страницу. После вставляли аудио при помощи flash. Вместе с HTML5 появился тег audio, благодаря которому легко можно вставить аудио на страницу. В примере один показано, как добавить аудио файл на страницу HTML.

Пример 1

<audio src = "click.mp3"></audio>

Вставить музыку также просто, как и вставить картинку в HTML страницу. В атрибут src записывается путь к файлу.

Некоторые форматы поддерживают не все браузеры, дабы не было проблем с кроссбраузерностью, можно поступить следующим образом, как во втором примере.

Пример 2

<audio>
    <source src = "click.mp3">
    <source src = "click.ogg">
</audio>

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

Пример 3

<audio autoplay>
    <source src = "click.mp3">
    <source src = "click.ogg">
</audio>

Многих (всех у кого включен звук) раздражает самовоспроизводящийся звук!

Можем добавить кнопки управления, для этого пишем атрибут controls.

Пример 4

<audio controls>
    <source src = "click.mp3">
    <source src = "click.ogg">
</audio>

А еще мы можем зациклить аудио на нашей HTML странице. Для этого используем атрибут loop.

Пример 5

<audio loop>
    <source src = "click.mp3">
    <source src = "click.ogg">
</audio>

Возможно, вам это будет интересно: Селекторы и свойства в CSS

HTML

CSS

Браузер

Вернуть расположение блоков

Код HTML

Код CSS

Браузер×

Задание

Восстановить код

Чтобы использовать все функции сайта (например, сохранение прогресса прохождения уроков), вам нужно авторизоваться

Практики нет, просто нажмите "Проверить задание".

– Не пропускайте новостей, подпишитесь на нашу страницу ВК, Facebook или Twitter. Кстати, не забудьте посетить блог по саморазвитию.

– Не знаете как сделать? Спросите на нашем форуме или на одном из популярных форумов: (1) cyberforum.ru, (2) ru.stackoverflow.com, (3) programmersforum.ru, (4) forum.vingrad.ru, (5) php.ru/forum, (6) html.by.

Проверить задание