Атрибут autoplay тега <audio>
Описание
Атрибут autoplay для тега <audio> указывает, что аудиофайл должен начать воспроизводиться автоматически, как только это станет возможным. Это булевый атрибут (не требует значения).
<audio autoplay controls>
<source src="sound.mp3" type="audio/mpeg">
Ваш браузер не поддерживает аудио элемент.
</audio>
Особенности работы:
| Браузер | Поведение | Требования |
|---|---|---|
| Chrome | Блокирует с звуком | Требуется muted или взаимодействие |
| Firefox | Блокирует с звуком | Настройки пользователя |
| Safari | Полная блокировка | Только после взаимодействия |
| Edge | Аналогично Chrome | muted или взаимодействие |
Рекомендации по использованию:
- Важно: Всегда добавляйте атрибут
controls - Для гарантированного автовоспроизведения используйте
muted - Учитывайте пользовательский опыт (может раздражать)
- Тестируйте на разных платформах
<audio autoplay muted loop>
<source src="background.mp3" type="audio/mpeg">
</audio>
Обходные решения (JavaScript):
<audio id="myAudio" controls>
<source src="notification.mp3" type="audio/mpeg">
</audio>
<script>
// Запуск после взаимодействия с сайтом
document.addEventListener('click', function() {
document.getElementById('myAudio').play();
}, {once: true});
</script>
Ограничения: Современные браузеры блокируют автовоспроизведение со звуком без предварительного взаимодействия пользователя с сайтом.
Лучшие практики:
- Избегайте для важного контента
- Предоставляйте кнопку отключения
- Учитывайте автономность (не кэширует медиа)
Политики автовоспроизведения:
// Проверка возможности автовоспроизведения
const promise = document.querySelector('audio').play();
if (promise !== undefined) {
promise.catch(error => {
console.log('Автовоспроизведение заблокировано:', error);
// Показать кнопку воспроизведения
});
}
Совет: Для музыкальных сайтов используйте интерактивное воспроизведение (после клика по области страницы).
Примечание: Спецификация HTML5 разрешает браузерам игнорировать autoplay для улучшения пользовательского опыта.