Атрибут controls тега <audio>
Описание
Атрибут controls для тега <audio> добавляет стандартный интерфейс управления воспроизведением аудио в браузере. Это булевый атрибут, который активируется при его наличии (не требует значения).
<audio controls>
<source src="track.mp3" type="audio/mpeg">
Ваш браузер не поддерживает аудио элемент.
</audio>
Элементы управления:
| Кнопка | Функция | Доступность |
|---|---|---|
| Play/Pause | Запуск/пауза воспроизведения | ✓ Во всех браузерах |
| Громкость | Регулировка уровня звука | ✓ Во всех браузерах |
| Прогресс-бар | Показ и перемотка трека | ✓ Во всех браузерах |
| Скорость | Изменение скорости (не везде) | Chrome, Firefox |
Особенности отображения:
- Внешний вид отличается в разных браузерах
- Можно стилизовать через CSS (ограниченно)
- Ширина зависит от родительского контейнера
- Высота фиксирована (~50px в большинстве браузеров)
<style>
audio {
width: 100%;
background: #f0f0f0;
border-radius: 8px;
}
</style>
<audio controls>
<source src="song.ogg" type="audio/ogg">
</audio>
Рекомендации:
- Всегда используйте для доступности
- Сочетайте с
preload="metadata" - Для кастомного интерфейса создавайте свои контролы через JavaScript API
- Тестируйте в разных браузерах
Ограничения стилизации: Полная кастомизация стандартных контролов требует использования JavaScript и скрытия родных элементов.
Альтернатива - кастомные контролы:
<audio id="custom-audio">
<source src="sound.mp3" type="audio/mpeg">
</audio>
<div class="custom-controls">
<button id="play-btn">Play</button>
<input type="range" id="volume" min="0" max="1" step="0.1" value="1">
</div>
<script>
const audio = document.getElementById('custom-audio');
document.getElementById('play-btn').addEventListener('click', () => {
audio.paused ? audio.play() : audio.pause();
});
</script>
Лучшие практики:
- Дублируйте управление клавиатурой (Space для play/pause)
- Добавляйте ARIA-атрибуты для доступности
- Оптимизируйте для мобильных устройств
- Предусматривайте состояние загрузки
Совет: Для кросс-браузерности добавляйте несколько источников в разных форматах (MP3, OGG).
Примечание: В мобильных браузерах могут действовать дополнительные ограничения на автовоспроизведение даже при наличии controls.