Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

87. Звук в 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>

Похожие уроки и записи блога

Первое знакомство с PythonЗнакомство с Python
Написание модулей в PythonЗнакомство с Python
Свойство background для работы с фономЦвета и фон
Модули в PythonЗнакомство с Python
Универсальные атрибуты в HTMLРазметка текста
Видео в HTML5, элемент VIDEOHTML5
Что такое HTML?Знакомство с HTML
Продолжаем написание классов в PythonЗнакомство с Python
Основы объектно-ориентированного программирования (ООП) в PythonЗнакомство с Python
<
×
>
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно