audio — плеер для аудиофайлов

  • 25 января 2023

Анастасия Ткачева

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Тег <audio> используется для вставки аудиофайлов: музыки, звуковых эффектов, аудиокниг и других аудиоматериалов. Он позволяет управлять воспроизведением файла, изменять громкость и перемотку.

<audio src="audio_file.mp3" controls></audio>

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

  • src — указывает путь к аудиофайлу.
  • controls — добавляет на страницу стандартный набор элементов управления, таких как кнопки воспроизведения, паузы и громкости.
  • autoplay — указывает на автоматическое воспроизведение аудиофайла при загрузке страницы.
  • loop — указывает на повторение воспроизведения аудиофайла.
  • preload — определяет, как аудиофайл будет загружаться на страницу. Возможные значения: none, metadata, auto.

Примеры использования

В этом примере аудиофайл с названием audio_file.mp3 будет воспроизводиться на странице с помощью стандартного HTML5-плеера. Атрибут src задаёт путь к файлу, который нужно воспроизвести. Атрибут controls добавляет на страницу элементы управления плеером.

<audio src="audio_file.mp3" controls>
  Ваш браузер не поддерживает тег audio
</audio>

Здесь мы добавляем альтернативный источник для аудиофайла. Таким образом, если браузер не поддерживает формат Ogg, то он будет использовать MP3-версию файла.

<audio src="audio_file.ogg">
  <p>Ваш браузер не поддерживает тег audio</p>
  <source src="audio_file.mp3" type="audio/mpeg">
  <source src="audio_file.ogg" type="audio/ogg">
</audio>

В этом примере мы размещаем элементы source внутри тега audio вместо использования атрибута src. Можно добавить несколько альтернативных источников в разных форматах, и браузер автоматически выберет подходящий.

<audio controls>
  <source src="audio_file.mp3" type="audio/mpeg">
  <source src="audio_file.ogg" type="audio/ogg">
  <p>Ваш браузер не поддерживает тег audio</p>
</audio>

Для чего использовать тег <audio>

  • Воспроизвести музыку или звуки на странице.
  • Создать аудиокниги или подкасты для веб-сайта.
  • Добавить звуковые эффекты на страницу.
  • Воспроизвести речь или звуковые инструкции на сайте, созданном для людей с нарушениями зрения.
  • Использовать в обучающих программах для воспроизведения аудиоматериалов.
  • Использовать в играх для воспроизведения звуковых эффектов или фоновой музыки.
  • Воспроизвести звук в видео на веб-страницах.

Ограничения тега <audio>

Тег <audio> поддерживается большинством современных браузеров. Однако не все форматы аудиофайлов могут быть воспроизведены во всех браузерах, поэтому рекомендуется использовать несколько форматов аудиофайлов и указывать их через атрибут source внутри тега <audio>.

Нюансы

  • При использовании атрибута autoplay важно не забывать о том, что автовоспроизведение может раздражать посетителей сайта и снижать удобство пользования им.
  • Тег <audio> можно использовать совместно с тегом <source>, чтобы предоставить несколько форматов аудиофайлов и обеспечить поддержку во всех браузерах.
  • Браузеры могут поддерживать разные форматы аудиофайлов. Некоторые форматы, такие как MP3, не являются свободными от лицензионных ограничений и могут не поддерживаться в некоторых браузерах. Рекомендуется использовать форматы, которые поддерживаются большинством браузеров, такие как WAV, OGG или AAC.
  • Большие аудиофайлы могут занимать много места на сервере и замедлять время загрузки страницы. Рекомендуется оптимизировать размер файла, используя сжатие без потерь.
  • Атрибуты тега <audio> позволяют настроить различные параметры, такие как автоматическое воспроизведение, повторение и громкость. Важно использовать атрибуты с умом, чтобы не нарушать пользовательский опыт.
  • Современные браузеры хорошо поддерживают тег <audio>, но некоторые старые браузеры могут не поддерживать некоторые атрибуты или форматы файлов.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

details — раскрывающийся список

details — раскрывающийся список

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

В современном веб-дизайне ключевую роль играет не только визуальная привлекательность, но и удобство использования. Одним из инструментов, значительно улучшающих пользовательский опыт на веб-страницах, являются теги <details> и <summary>. Эти элементы HTML позволяют создавать раскрывающиеся списки, что делает контент более структурированным и удобным для восприятия.

Что такое
и ?

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

В свою очередь, <summary> служит заголовком для контента, скрытого внутри <details>, и отображается независимо от состояния (открыт/закрыт) родительского тега.

Преимущества использования

Использование <details> и <summary> на веб-страницах имеет ряд преимуществ:

  • Улучшение навигации: помогает организовать контент, делая его более доступным и понятным для пользователей.
  • Экономия места: позволяет компактно разместить большой объем информации, предоставляя доступ к ней по мере необходимости.
  • Увеличение взаимодействия: поощряет пользователей к активному взаимодействию с контентом, повышая общее вовлечение.

Как использовать?

Разметка с использованием <details> и <summary> достаточно проста:

<details>
  <summary>Заголовок</summary>
  Здесь располагается скрытый контент, который будет отображен после клика по заголовку.
</details>

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

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

SEO-оптимизация и доступность

С точки зрения SEO и доступности, использование <details> и <summary> также имеет свои преимущества.

Текст, скрытый внутри <details>, по-прежнему доступен для поисковых систем, что позволяет включать важные ключевые слова и фразы без перегрузки видимой части страницы избыточной информацией. Кроме того, правильное использование этих элементов способствует улучшению структуры контента и его индексации поисковыми системами.

Заключение

Теги <details> и <summary> — это мощные инструменты для создания интерактивных веб-страниц, способствующие улучшению пользовательского опыта и SEO-оптимизации. Их использование позволяет сделать контент более доступным и интересным, стимулируя пользователей к дальнейшему взаимодействию с вашим сайтом.

Используя эти элементы в своих проектах, вы не только облегчите навигацию по сайту для посетителей, но и улучшите его позиции в поисковой выдаче, благодаря более эффективной индексации контента.

  • 24 марта 2024
body — тело страницы

body — тело страницы

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Тег <body> используется для размещения всего содержимого, которое отображается на веб-странице.

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок страницы</title>
  </head>
  <body>
    <h1>Заголовок 1</h1>
    <p>Это параграф.</p>
  </body>
</html>

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

  • onbeforeunload — сценарий, который выполнится, когда пользователь соберётся покинуть страницу.
  • onhashchange — сценарий, который выполнится при изменении URL.
  • onmessage — сценарий, который выполнится при получении сообщения от приложения.
  • onoffline — сценарий, который выполнится, когда браузер начнёт работать в автономном режиме.
  • ononline — сценарий для запуска, когда браузер начинает работать в режиме онлайн.
  • onpagehide — сценарий, который выполняется, когда пользователь переходит со страницы.
  • onpageshow — сценарий, который выполняется, когда пользователь переходит на страницу.
  • onunload — сценарий, который выполняется, когда пользователь покидает страницу.
  • onafterprint — сценарий, который выполнится после печати веб-страницы.
  • onbeforeprint — сценарий, который выполнится перед печатью веб-страницы.
  • onlanguagechange — сценарий, который выполнится при изменении языка документа.
  • onmessageerror — сценарий, который выполнится при возникновении ошибки в сообщении, полученном с помощью API Messaging.
  • onpopstate — сценарий, который выполнится при изменении состояния истории браузера.
  • onrejectionhandled — сценарий, который выполнится при обработке отклоненного обещания в объекте Promise.
  • onstorage — сценарий, который выполнится при изменении данных в объекте localStorage или sessionStorage.
  • onunhandledrejection — сценарий, который выполнится при возникновении отклоненного обещания в объекте Promise без обработки.
Читать дальше
  • 13 марта 2024
b — полужирный текст

b — полужирный текст

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Тег <b> используется для выделения текста без дополнительного акцента или значимости. В результате содержимое этого тега обычно отображается жирным шрифтом. Несмотря на это, этот тег не должен использоваться для стилизации; для таких задач лучше использовать CSS.

<p>Сегодня мы <b>не</b> будем работать допоздна!</p>

Сегодня мы не будем работать допоздна!

Читать дальше
  • 2 марта 2024
html — главный элемент в HTML

html — главный элемент в HTML

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Тег <html> является корневым элементом веб-страницы. Все содержимое документа, включая <head> и <body>, находится внутри этого тега. Тег <html> сообщает браузеру, что документ является HTML-документом.

💡 <html> — обязательный элемент структуры HTML-документа.

Пример использования

Убедитесь, что перед тегом <html> всегда указан корректный DOCTYPE (<!DOCTYPE html>), который сообщает браузеру о версии HTML-документа.

<!DOCTYPE html>
<html lang="ru">
<head>
    <title>Мой сайт</title>
</head>
<body>
    <h1>Добро пожаловать на мой сайт!</h1>
    <p>Это демонстрационная страница.</p>
</body>
</html>

Добавьте атрибут lang в тег <html>, чтобы указать язык содержимого, например: <html lang="ru"> для русскоязычного контента.

Связанные теги

  • <head>: содержит мета-информацию, стили и скрипты.
  • <body>: содержит всё видимое содержимое страницы.

Больше о теге

  • 1 марта 2024
div — универсальный контейнер

div — универсальный контейнер

Тег <div> определяет раздел или секцию в HTML-документе. Это контейнер, который используется для группировки других элементов, таких как текст, изображения или другие теги, в разделы или блоки.

<div class="section">
  <h2>Заголовок секции</h2>
  <p>Какое-нибудь содержимое секции</p>
</div>
Читать дальше
  • 6 октября 2023
figcaption — подпись к figure

figcaption — подпись к figure

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Тег <figcaption> используется для добавления подписи к элементу <figure>. Обычно он размещается после других медиа-элементов, например, после <img>, и содержит описание либо название изображения или другого контента, находящегося внутри <figure>.

<figure>
  <img src="image.jpg" alt="Image">
  <figcaption>Описание изображения</figcaption>
</figure>

Устаревший атрибут align — выравнивание подписи относительно элемента <figure>.

Тег <figcaption> может использоваться только внутри элемента <figure>.

Валидный HTML требует, чтобы тег <figcaption> находился после элемента <img> или других медиа-элементов внутри <figure>. Однако это необязательное правило, и подпись может располагаться перед медиа-элементом или даже внутри него.

Читать дальше
  • 6 октября 2023
meta — метаданные страницы

meta — метаданные страницы

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Тег <meta> содержит метаданные о документе HTML. Он может включать такую информацию, как имя автора, название документа, ключевые слова и набор символов.

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Это описание веб-страницы">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Иван Иванов">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Тег <meta> помещается в <head> HTML-документа.

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

  • charset — кодировка символов в документе.
  • name — имя метаданных.
  • content — значение метаданных.
  • http-equiv — HTTP-заголовок для значения атрибута content.

Атрибут charset должен быть первым атрибутом в теге <meta>, а name и http-equiv нельзя использовать вместе.

Читать дальше
  • 4 октября 2023
button — просто кнопка

button — просто кнопка

Тег <button> создаёт кликабельную кнопку, которая может запускать действия или события на веб-странице. Например, отправку или перезагрузку формы, запуск функции, открытие нового окна или добавление товара в корзину.

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

  • name — имя кнопки.
  • type — тип кнопки, по умолчанию — submit. Атрибут type необходим, если указан атрибут value.
  • value — значение, которое будет отправлено на сервер при нажатии на кнопку.
  • disabled — указывает, что кнопка должна быть отключена.
  • form — одна или несколько форм, к которым принадлежит кнопка.
  • formaction — URL-адрес файла, который будет обрабатывать ввод при нажатии кнопки.
  • formenctype — указывает, как данные формы должны быть закодированы при отправке на сервер.
  • formmethod — метод HTTP, используемый при отправке данных формы.
  • formnovalidate — устанавливает, что данные формы не должны проверяться при отправке на сервер.
  • formtarget — указывает, где отображать ответ после отправки формы.
Читать дальше
  • 4 октября 2023
article — независимый контент

article — независимый контент

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Тег <article> в HTML используется для выделения содержимого, которое является независимым и самодостаточным. Это означает, что такой контент может быть переиспользоваться в разных местах без потери смысла.

<article>
  <h2>Заголовок статьи</h2>
  <p>Текст статьи...</p>
</article>

Тегом <article> размечают статьи в блогах, сообщения на форумах и другие материалы, которые имеют смысл и ценность, даже если они прочитаны вне контекста, в котором были созданы.

Не используйте <article> для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.

Читать дальше
  • 3 октября 2023
iframe — встроенная страница

iframe — встроенная страница

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Тег <iframe> позволяет встраивать контент (например, веб-страницы, видео) прямо в ваш документ HTML.

Простейший пример использования <iframe>:

<iframe src="https://example.com" width="600" height="400"></iframe>

Атрибут src задаёт URL-адрес страницы, которую вы хотите встроить.

Атрибуты width и height — ширина и высота фрейма (можно задавать как в пикселях, так и в процентах).

Читать дальше
  • 3 октября 2023