Атрибут class тега <audio>
Описание
Атрибут class для тега <audio> позволяет назначать один или несколько CSS-классов аудио-элементу для стилизации и управления через JavaScript. Это глобальный атрибут, доступный всем HTML-элементам.
<audio controls class="media-player primary-audio">
<source src="track.mp3" type="audio/mpeg">
Ваш браузер не поддерживает аудио элемент.
</audio>
Основные возможности:
| Применение | Пример | Преимущества |
|---|---|---|
| CSS-стилизация | .media-player { width: 100%; } |
Гибкое оформление |
| JavaScript-селекторы | document.querySelector('.primary-audio') |
Удобный доступ |
| Состояния элемента | .playing, .paused |
Визуальная обратная связь |
Практические примеры:
1. Базовая стилизация:<style>
.custom-audio {
width: 300px;
border: 2px solid #3a86ff;
border-radius: 8px;
margin: 20px 0;
}
</style>
<audio controls class="custom-audio">
<source src="song.mp3" type="audio/mpeg">
</audio>
const audio = document.querySelector('audio');
audio.addEventListener('play', function() {
this.classList.add('playing');
this.classList.remove('paused');
});
audio.addEventListener('pause', function() {
this.classList.add('paused');
this.classList.remove('playing');
});
.audio-player.playing {
box-shadow: 0 0 10px rgba(58, 134, 255, 0.5);
}
.audio-player.error {
border-color: #ff006e;
}
.audio-player.loading::before {
content: 'Загрузка...';
}
Рекомендации по именованию:
- Используйте осмысленные имена (
main-player,background-audio) - Придерживайтесь единого стиля (BEM, kebab-case)
- Избегайте слишком общих имен (
box,element) - Разделяйте слова дефисами (
media-controls)
Лучшие практики:
- Группируйте классы по функциональности
- Используйте классы-модификаторы для состояний
- Минимизируйте количество классов на элементе
- Избегайте прямой стилизации тега
audio
Ограничения: Стандартные элементы управления аудио имеют ограниченные возможности стилизации через CSS.
Кастомный аудио-плеер:
<div class="custom-player">
<audio id="audio-source">
<source src="music.mp3" type="audio/mpeg">
</audio>
<button class="play-btn">Play</button>
<input type="range" class="volume-slider">
</div>
<style>
.custom-player {
/* Стили контейнера */
}
.play-btn.playing::after {
content: '❚❚';
}
</style>
Совет: Для сложной стилизации создавайте собственные элементы управления, скрывая стандартные через audio { display: none }.
Примечание: Атрибут class поддерживает несколько значений, разделенных пробелами, что позволяет комбинировать различные стили и поведения.