HTML Аудио

Элемент <audio>, который позволяет встраивать звук на Web; - страницу.

Аудио в HTML

Тег – <audio> вставляет аудио ролик на Web – Страницу.

<audio src="sound.mp3" controls preload="metadata">
<p>Ваш Web - браузер не поддерживает элемент audio</p>
</audio>

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

src – Интернет адрес мультимедийного файла с роликом.

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

<audio src="sound.mp3" autoplay></audio>

controls - Если указан, на экране будут присутствовать элементы управления воспроизведением ролика.

loop – Воспроизводиться бесконечно .

<audio src="sound.mp3" autoplay loop>

muted – Звук приглушен при загрузке Web – страницы

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

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

none – Не выполнить предзагрузку.

metadata – Загрузит только самое начало файла , где храняться сведения о ролике, в частности, его продолжительность.

auto – Загрузит весь файл, значение по умолчанию.

Вставки аудио ролика

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Вставки аудио ролика</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height: auto;
}
}
body {     /* Стиль для всего документа */
     font-size: 12pt;     /* Размер шрифта */
     font-family: "Verdana", sans-serif;    /* Название шрифта */
   }
h1 {
    color: blue;   /* Цвет шрифта */
}

  </style> 
  </head>
  <body>
<h1>Вставки аудио ролика</h1>
  <audio src="audio/enigma.mp3" controls preload="metadata">
<p>Ваш Web-браузер не поддерживает элемент audio</p>
</audio>   
</body>
</html>

Открыть пример в новом окне

Вставки аудио ролика

Рекомендуемые материалы

Спецификации