Атрибут style тега <audio>
Описание
Атрибут style позволяет задавать CSS-стили непосредственно для элемента <audio>. Однако стандартные элементы управления аудио имеют ограниченные возможности стилизации.
<audio controls style="width: 100%; max-width: 500px; margin: 20px 0; border: 1px solid #ddd;">
<source src="audio.mp3" type="audio/mpeg">
</audio>
Что можно стилизовать:
| Свойство | Эффект | Поддержка |
|---|---|---|
width, height |
Размеры контейнера | ✓ Все браузеры |
margin, padding |
Отступы вокруг | ✓ Все браузеры |
border, border-radius |
Рамка элемента | ✓ Все браузеры |
background |
Фон (частично) | ⨁ Частичная |
Ограничения стилизации:
- Кнопки и полосы прогресса стилизуются через псевдоэлементы (браузерно-специфично)
- Внешний вид элементов управления различается между браузерами
- Многие свойства CSS не применяются к нативным контролам
<style>
audio::-webkit-media-controls-panel {
background-color: #f0f8ff;
}
audio::-webkit-media-controls-play-button {
background-color: #4CAF50;
border-radius: 50%;
}
</style>
<audio controls style="box-shadow: 0 2px 5px rgba(0,0,0,0.2);">
<source src="song.mp3" type="audio/mpeg">
</audio>
Лучшие практики:
- Используйте внешние CSS-файлы вместо инлайновых стилей
- Для сложной стилизации создавайте кастомные контролы
- Тестируйте во всех целевых браузерах
- Избегайте !important в стилях
Важно: Глубокая стилизация нативных элементов управления возможна только с браузерными префиксами (-webkit-, -moz-) и не стандартизирована.
Альтернатива - кастомный плеер:
<div class="custom-player" style="background: #333; padding: 10px; border-radius: 8px;">
<audio id="audio-src"><source src="music.mp3" type="audio/mpeg"></audio>
<button class="play-btn" style="background: #4CAF50; color: white;">Play</button>
</div>
<script>
document.querySelector('.play-btn').addEventListener('click', function() {
const audio = document.getElementById('audio-src');
audio.paused ? audio.play() : audio.pause();
});
</script>
Совет: Для полного контроля над внешним видом создавайте собственные элементы управления, полностью скрывая стандартные через audio { display: none }.
Примечание: Инлайновые стили имеют наивысший приоритет, что может затруднять переопределение в медиа-запросах и разных состояниях.