Атрибут hidden тега <audio>
Описание
Атрибут hidden для тега <audio> указывает, что аудио-элемент должен быть скрыт от пользовательского интерфейса. Это глобальный атрибут HTML5, который можно использовать с любым элементом.
<audio hidden src="background.mp3" autoplay loop></audio>
Основные характеристики:
| Параметр | Описание | Примечания |
|---|---|---|
| Визуальное отображение | Полностью скрыт | Эквивалентно display: none |
| Доступность | Скрыт от скринридеров | В отличие от aria-hidden="true" |
| Воспроизведение | Продолжает работать | Если не отключено вручную |
Типичные сценарии использования:
1. Фоновое аудио:<audio hidden autoplay loop src="ambient.mp3"></audio>
<button id="toggle-audio">Включить звук</button>
<script>
document.getElementById('toggle-audio').addEventListener('click', function() {
const audio = document.querySelector('audio');
audio.hidden = !audio.hidden;
audio.muted = !audio.muted;
});
</script>
// Инициализация скрытого плеера
const audioPlayer = new Audio();
audioPlayer.hidden = true;
audioPlayer.src = 'notification.mp3';
document.body.appendChild(audioPlayer);
// Программное управление
function playNotification() {
audioPlayer.currentTime = 0;
audioPlayer.play();
}
Сравнение методов скрытия:
| Метод | Визуально | Доступность | DOM |
|---|---|---|---|
hidden |
Скрыт | Скрыт | Присутствует |
display: none |
Скрыт | Скрыт | Присутствует |
visibility: hidden |
Скрыт | Видим | Присутствует |
aria-hidden="true" |
Видим | Скрыт | Присутствует |
Лучшие практики:
- Используйте для фонового аудио, не требующего управления
- Сочетайте с
autoplayиloopдля атмосферного звука - Предусматривайте кнопку управления для важного контента
- Не используйте для скрытия функциональных элементов
Важно: Автовоспроизведение скрытого аудио может быть заблокировано браузерами. Всегда проверяйте состояние.
Определение возможности автовоспроизведения:
const audio = document.querySelector('audio');
audio.play().then(() => {
console.log('Автовоспроизведение разрешено');
}).catch(error => {
console.log('Автовоспроизведение заблокировано:', error);
audio.hidden = false; // Показываем элементы управления
});
Совет: Для фоновой музыки в играх используйте Web Audio API вместо скрытых audio-элементов.
Примечание: Скрытый audio-элемент продолжает потреблять ресурсы, пока не будет удален из DOM или остановлен.