Элемент audio: src controls loop autoplay
Встраивайте аудиопроигрыватели с помощью встроенных атрибутов HTML5
«Элемент audio: src controls loop autoplay» — бесплатный урок HTML Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Нативное аудио в HTML5
В HTML5 появился элемент <audio> для встраивания аудио без плагинов:
<audio src="podcast.mp3" controls>
Your browser does not support audio.
</audio>
<!-- controls: show the default player UI (play, pause, volume) -->
<!-- Fallback text is shown to browsers that don't support audio -->Атрибут управления
Атрибут controls отображает встроенный аудиопроигрыватель браузера:
<!-- Without controls: audio plays but no UI is visible -->
<audio src="bg-music.mp3"></audio>
<!-- With controls: browser shows play/pause, volume, scrubber -->
<audio src="podcast.mp3" controls></audio>
<!-- Always include controls for user-accessible audio
Unless it is a background ambient sound (use controls anyway for accessibility) -->Атрибут циклического воспроизведения
Атрибут loop перезапускает аудио после завершения:
<audio src="bg-music.ogg" controls loop></audio>
<!-- loop is a boolean attribute -->
<!-- Good for: background music, demo soundscapes -->
<!-- Bad UX: loops without user consent are annoying -->Атрибут автоматического воспроизведения
Атрибут autoplay запускает воспроизведение при загрузке страницы:
<audio src="alert.mp3" autoplay></audio>
<!-- Most modern browsers BLOCK autoplay for audio by default -->
<!-- Exception: autoplay + muted is allowed -->
<!-- Browsers allow autoplay if the user has interacted with the page -->
<!-- The muted workaround: -->
<audio src="bg.mp3" autoplay muted loop></audio>Атрибут отключения звука
Атрибут muted запускает аудио без звука:
<!-- Muted audio can autoplay in most browsers: -->
<audio src="ambient.mp3" autoplay muted loop></audio>
<!-- User can unmute with the controls -->
<audio src="ambient.mp3" autoplay muted loop controls></audio>Атрибут предварительной загрузки
Атрибут preload указывает, какой объём данных следует загрузить:
<audio src="podcast.mp3" controls preload="none">...</audio>
<!-- none: don't preload anything (saves bandwidth on mobile) -->
<audio src="short-clip.mp3" controls preload="auto">...</audio>
<!-- auto: preload the entire file (browser decides) -->
<audio src="song.mp3" controls preload="metadata">...</audio>
<!-- metadata: preload only duration and basic info (good default) -->Управление аудио с помощью JavaScript
Управляйте аудио с помощью JavaScript:
const audio = document.getElementById('my-audio');
// Play:
audio.play();
// Pause:
audio.pause();
// Current time (seconds):
audio.currentTime = 30; // jump to 30 seconds
// Volume (0 to 1):
audio.volume = 0.5;
// Duration:
console.log(audio.duration);События аудио
Распространённые события аудио:
audio.addEventListener('play', () => console.log('Playing'));
audio.addEventListener('pause', () => console.log('Paused'));
audio.addEventListener('ended', () => console.log('Finished'));
audio.addEventListener('timeupdate', () => {
console.log('Position:', audio.currentTime);
});
audio.addEventListener('error', () => console.log('Error loading audio'));Пользовательский аудиопроигрыватель
Создайте пользовательский проигрыватель с помощью JavaScript и CSS:
<div class="audio-player">
<audio id="player" src="podcast.mp3" preload="metadata"></audio>
<button id="play-btn" aria-label="Play">▶</button>
<input type="range" id="scrubber" value="0" min="0" max="100">
<span id="time">0:00</span>
</div>
<script>
const audio = document.getElementById('player');
document.getElementById('play-btn').addEventListener('click', () => {
audio.paused ? audio.play() : audio.pause();
});
</script>Доступность аудио
Требования доступности для аудио:
- Предоставляйте расшифровку для любого аудиосодержимого
- Для подкастов добавляйте ссылку на текстовую расшифровку
- Автоматически воспроизводимое аудио нарушает WCAG 1.4.2, если длится более 3 секунд
- Убедитесь, что элементами управления можно пользоваться с клавиатуры (нативные элементы управления соответствуют этому требованию)
Элемент src и элемент source
Указывайте альтернативные форматы с помощью <source> (в следующем уроке):
<!-- Single format: -->
<audio controls src="podcast.mp3">...</audio>
<!-- Multiple formats: -->
<audio controls>
<source src="podcast.opus" type="audio/ogg; codecs=opus">
<source src="podcast.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>Быстрая проверка
Какой атрибут аудио отображает встроенный интерфейс проигрывателя браузера?
Повторение: элемент audio
Основные сведения об элементе audio:
controls— показывает интерфейс проигрывателя (почти всегда добавляйте этот атрибут)loop— перезапускает воспроизведение после завершенияautoplay— воспроизводит при загрузке (большинство браузеров блокирует эту возможность)muted— запускает без звука (в большинстве браузеров разрешает автоматическое воспроизведение)preload="metadata"— хороший вариант по умолчанию для подкастов и музыки- Для доступности предоставляйте расшифровки
Часто задаваемые вопросы
Урок «Элемент audio: src controls loop autoplay» бесплатный?
Да — полный текст урока «Элемент audio: src controls loop autoplay» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «Элемент audio: src controls loop autoplay»?
Встраивайте аудиопроигрыватели с помощью встроенных атрибутов HTML5 Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Элемент audio: src controls loop autoplay»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Элемент audio: src controls loop autoplay
- Элемент video и соотношение сторон
- Элемент source для нескольких форматов
- Субтитры с track и WebVTT