Добавление аудио на страницу (audio)

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 32
Автор
Рек. время прохождения 3 минуты
Упражнений 9
Комментарии 0
Тренажер HTML
В этой серии заданий вы попрактикуетесь в добавлении аудиоконтента на веб-страницу с помощью HTML-тега `<audio>`. Этот тег позволяет встраивать звуковые файлы, такие как музыка, подкасты или звуковые эффекты, прямо в ваш документ. Вы научитесь не только вставлять сам плеер, но и управлять его поведением: добавлять элементы управления, настраивать автоматическое воспроизведение, зацикливание и предварительную загрузку. Задания построены по принципу 'от простого к сложному', что позволит вам постепенно освоить все основные атрибуты и возможности тега `<audio>`, включая использование нескольких форматов для лучшей совместимости с разными браузерами.
Список тем

Базовый тег для аудио

id: 37878_audio-basic-tag

Ваша первая задача — создать на странице контейнер для будущего аудиоплеера. Пока он будет невидимым, так как у него нет ни источника звука, ни элементов управления. Просто добавьте на страницу соответствующий HTML-тег.

CSS
body {
  background-color: #f0f2f5;
  font-family: sans-serif;
  padding: 15px;
}

.audio-container {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.audio-container p {
  margin-top: 15px;
  color: #555;
}

audio {
  width: 100%;
  max-width: 300px;
  margin-top: 10px;
}
HTML
<div class="audio-container">
  <input1></input1>
  <p>Плеер готов к настройке!</p>
</div>
Для встраивания аудиоконтента в HTML используется парный тег `<audio>`. Вставьте `audio` вместо макроса, чтобы создать элемент.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавление источника звука

id: 37878_audio-src-attribute

Теперь, когда у вас есть элемент `<audio>`, нужно указать ему, какой звуковой файл воспроизводить. Для этого используется специальный атрибут, в значении которого указывается путь к файлу. Добавьте этот атрибут, чтобы 'подключить' музыку.

CSS
body {
  background-color: #f0f2f5;
  font-family: sans-serif;
  padding: 15px;
}

.audio-container {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.audio-container p {
  margin-top: 15px;
  color: #555;
}

audio {
  width: 100%;
  max-width: 300px;
  margin-top: 10px;
}
HTML
<div class="audio-container">
  <audio input1="https://naytikurs.ru/img/1.mp3"></audio>
  <p>Источник звука добавлен, но плеера все еще не видно.</p>
</div>
Чтобы указать путь к аудиофайлу, используйте атрибут `src`. Вставьте `src` в качестве имени атрибута.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Отображение элементов управления

id: 37878_audio-controls-attribute

Плеер есть, музыка подключена, но управлять воспроизведением невозможно. Добавьте атрибут, который включит стандартный интерфейс плеера: кнопку play/pause, регулятор громкости и полосу прокрутки.

CSS
body {
  background-color: #f0f2f5;
  font-family: sans-serif;
  padding: 15px;
}

.audio-container {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

audio {
  width: 100%;
  max-width: 300px;
}
HTML
<div class="audio-container">
  <audio src="https://naytikurs.ru/img/1.mp3" input1></audio>
</div>
Для отображения стандартных элементов управления плеером используется логический атрибут `controls`. Просто добавьте это слово в тег `<audio>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Зацикливание воспроизведения

id: 37878_audio-loop-attribute

Сделайте так, чтобы музыка начинала играть заново сразу после окончания. Для этого существует специальный логический атрибут.

CSS
body {
  background-color: #f0f2f5;
  font-family: sans-serif;
  padding: 15px;
}

.audio-container {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

audio {
  width: 100%;
  max-width: 300px;
}
HTML
<div class="audio-container">
  <audio src="https://naytikurs.ru/img/1.mp3" controls input1></audio>
</div>
Чтобы зациклить воспроизведение, добавьте в тег `<audio>` атрибут `loop`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37878_audio-autoplay-muted

Настройте плеер так, чтобы музыка начинала играть сразу после загрузки страницы. Современные браузеры блокируют автовоспроизведение со звуком, поэтому вам понадобится добавить два атрибута: один для запуска, а другой — для отключения звука по умолчанию.

CSS
body {
  background-color: #f0f2f5;
  font-family: sans-serif;
  padding: 15px;
}

.audio-container {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

audio {
  width: 100%;
  max-width: 300px;
}
HTML
<div class="audio-container">
  <audio src="https://naytikurs.ru/img/1.mp3" controls input1 input2></audio>
</div>
Используйте атрибут `autoplay` для автоматического старта воспроизведения и атрибут `muted`, чтобы отключить звук при старте (это требование большинства браузеров).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Предварительная загрузка аудио

id: 37878_audio-preload-attribute

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

CSS
body {
  background-color: #f0f2f5;
  font-family: sans-serif;
  padding: 15px;
}

.audio-container {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

audio {
  width: 100%;
  max-width: 300px;
}
HTML
<div class="audio-container">
  <audio src="https://naytikurs.ru/img/1.mp3" controls input1="metadata"></audio>
</div>
Используйте атрибут `preload` со значением `metadata`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Использование тега <source>

id: 37878_audio-source-tag

Более гибкий способ указать источник звука — использовать вложенный тег `<source>` внутри `<audio>`. Это особенно полезно, когда нужно предложить браузеру несколько форматов аудиофайлов. Замените атрибут `src` у тега `<audio>` на вложенный тег `<source>` с таким же адресом файла.

CSS
body {
  background-color: #f0f2f5;
  font-family: sans-serif;
  padding: 15px;
}

.audio-container {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

audio {
  width: 100%;
  max-width: 300px;
}
HTML
<div class="audio-container">
  <audio controls>
    <input1 src="https://naytikurs.ru/img/1.mp3">
  </audio>
</div>
Внутри тега `<audio>` добавьте тег `<source>`. У этого тега должен быть атрибут `src` с URL-адресом аудиофайла. В данном случае, просто введите `source`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Несколько форматов и MIME-типы

id: 37878_audio-multiple-sources

Чтобы обеспечить максимальную совместимость, можно указать несколько источников с разными форматами. Добавьте к каждому тегу `<source>` атрибут `type`, который явно указывает <span class="cfb-tt-hover" data-title="Стандарт, который определяет тип и формат документа, файла или данных. Например, `audio/mpeg` для MP3 файлов.">MIME-тип</span> файла. Это помогает браузеру быстрее выбрать подходящий формат.

CSS
body {
  background-color: #f0f2f5;
  font-family: sans-serif;
  padding: 15px;
}

.audio-container {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

audio {
  width: 100%;
  max-width: 300px;
}
HTML
<div class="audio-container">
  <audio controls>
    <source src="audio.ogg" type="input1">
    <source src="https://naytikurs.ru/img/1.mp3" type="input2">
  </audio>
</div>
Для OGG формата используется MIME-тип `audio/ogg`. Для MP3 — `audio/mpeg`. Укажите их в качестве значений атрибута `type`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Запасной контент

id: 37878_audio-fallback-content

Что если браузер пользователя настолько старый, что не поддерживает тег `<audio>`? На этот случай можно предусмотреть запасной контент, который будет показан вместо плеера. Добавьте текстовое сообщение внутрь тега `<audio>`, после всех тегов `<source>`.

CSS
body {
  background-color: #f0f2f5;
  font-family: sans-serif;
  padding: 15px;
}

.audio-container {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

audio {
  width: 100%;
  max-width: 300px;
}
HTML
<div class="audio-container">
  <audio controls>
    <source src="https://naytikurs.ru/img/1.mp3" type="audio/mpeg">
    <input1>Ваш браузер не поддерживает тег audio.</input1>
  </audio>
</div>
Любой контент, помещенный внутрь тега `<audio>` (но не в тег `<source>`), будет отображаться только в браузерах, не поддерживающих воспроизведение аудио. Просто вставьте `p` вместо макроса, чтобы обернуть текст в параграф.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру