Аудио в HTML

Урок про video показал клипы с картинкой. Аудио — родственник только со звуком: подкасты, голосовые заметки, вступления к урокам и короткие эффекты. Элемент — audio. Начинайте с controls, чтобы посетитель сам запускал воспроизведение — та же вежливость, что и у video — без poster, кадра на экране и зарезервированного видео-блока. Тонкая панель берёт файл из media/ и держит вёрстку спокойнее полного клипа.

Что делает audio

audio просит браузер загрузить звуковой файл и показать компактный плеер. Можно указать один файл через src или перечислить несколько дочерних <source>, чтобы браузер выбрал понятный формат. Визуального холста как у video нет; при controls обычно видна тонкая панель. Таймлайн, mute и громкость важны: звук так же прерывает тихую комнату, как громкое видео. Считайте плеер инструментом, которым управляет посетитель, а не фоном, который стартует сам.

Прямой ответ

Напишите <audio controls src="sound.mp3"> или вложите несколько тегов <source> для форматов вроде MP3 и Ogg. Внутри элемента оставьте короткий запасной текст (и при желании ссылку на скачивание). Предпочитайте сжатые файлы для веба. Избегайте неожиданного автозапуска со звуком. Если клип учит речью, спланируйте транскрипт или ясные заметки рядом с плеером.

Форматы для новичков

Не все браузеры предпочитают один кодек. Новички обычно начинают с MP3 и добавляют Ogg вторым кандидатом. WAV удобен для локального монтажа, но часто слишком велик как единственная веб-копия. Таблица ниже — практическая стартовая карта, не энциклопедия кодеков.

Простое аудио с controls

Короткий MP3 плюс controls хватает для многих учебных страниц. Положите файл в media/, проверьте путь как у URL картинок. Если панель есть, а воспроизведения нет, откройте инструменты разработчика или откройте URL файла напрямую — битые пути молча ломаются.

Чтение простого примера

• controls показывает play, pause, перемотку и часто громкость
• src указывает на звуковой файл относительно страницы (здесь под media/)
• Внутренний текст — запасной вариант, если элемент не играет
• Здесь нет poster — это атрибут video
• Для простой аудиопанели обычно не нужен width, как у видео

Несколько источников и ссылка на скачивание

Список Ogg и MP3 со значениями MIME в type повышает шанс найти воспроизводимый кандидат. Порядок важен: браузер идёт по списку, пока не найдёт то, что умеет декодировать. Ссылка на скачивание помогает при сбое или если посетитель хочет сохранить файл. При экспорте двух форматов держите одно и то же содержание урока в каждом файле.

Чтение примера с несколькими источниками

• Источники пробуются по порядку, пока браузер не найдёт воспроизводимый
• type помогает быстро пропускать неподдерживаемые форматы
• Ссылка на скачивание — человекочитаемый запасной контент внутри audio
• Держите имена и папки точными — опечатка в src выглядит как «сломанный плеер»
• Для крошечных демо можно оставить один src; несколько источников — шаг к надёжности

Уважайте уши и трафик

Автозапуск звука без явного действия пользователя часто блокируется и обычно невежлив. Без controls посетитель не может честно поставить паузу. Длинный несжатый WAV тратит мобильный трафик, когда компактный MP3 учит тому же. Экспортируйте веб-размер аудио так же, как веб-размер видео. Фоновая музыка позже — отдельное дизайнерское решение с согласием и mute, не значение по умолчанию для страницы новичка.

Транскрипт, когда речь учит

Если клип объясняет понятие словами, спланируйте транскрипт или ясные заметки на странице. У audio нет alt, как у img. Доступность речи — текстовые альтернативы, ясные заголовки рядом с плеером и контроль пользователя, а не poster-картинка. Даже короткий абзац, пересказывающий сказанный совет, помогает тем, кто сейчас не может слушать.

Аудио против video против вставок

• Самохостируемый звуковой файл → audio
• Самохостируемый клип с картинкой → video
• Страница плеера с другого сайта → часто iframe (поздний урок про вставки вроде YouTube)
  Не кладите подкаст в video только потому, что сначала увидели controls там. Не оборачивайте локальный MP3 в iframe, когда хватает audio. Сопоставляйте элемент с типом медиа.

Практика в редакторе

1. Добавьте короткий .mp3 в media/ (десяти–тридцати секунд достаточно).
2. Встройте через audio controls с верным относительным путём.
3. Воспроизведите, поставьте на паузу, перемотайте и настройте громкость в UI браузера.
4. По желанию добавьте второй тип source и ссылку на скачивание.
5. Напишите одно предложение транскрипта или заметок рядом с плеером, если клип говорит.
6. Убедитесь, что страница понятна, даже если никто не нажал play.

Лёгкие ошибки

• Автозапуск звука без явного действия пользователя
• Отсутствие controls
• Ссылка на огромный несжатый WAV, когда хватает MP3
• Ожидание poster у audio
• Забытый запасной текст или путь скачивания
• Путаница вставок iframe вроде YouTube с самохостируемым audio
• Разный устный текст в каждом source при тестах
• Битый путь media/ и обвинение браузера

Кратко

• audio встраивает звуковые файлы, которые вы хостите
• С controls посетитель может включать, ставить на паузу и перематывать
• Несколько форматов source с type улучшают поддержку
• Предпочитайте сжатые файлы и воспроизведение по действию пользователя
• Планируйте транскрипт или заметки, когда речь несёт урок
• Аудио для звука, video для картинки+звука, iframe для чужих плееров