Атрибут muted тега <audio>

Описание

Атрибут muted для тега <audio> указывает, что аудио должно воспроизводиться без звука (с отключенной громкостью). Это булевый атрибут, который активируется при его наличии.

Пример использования:
<audio controls muted> <source src="soundtrack.mp3" type="audio/mpeg"> Ваш браузер не поддерживает аудио элемент. </audio>

Основные сценарии применения:

Сценарий Преимущество Пример
Автовоспроизведение Обход ограничений браузеров Фоновые видео со звуком
Интерфейсные звуки Контроль пользователя Клики, уведомления
Тестирование Без раздражения Разработка игр/приложений

Технические особенности:

  • Громкость устанавливается в 0, но audio-поток активен
  • Не влияет на возможность программного включения звука
  • Состояние можно изменить через JavaScript
  • Иконка звука в контролах перечеркнута
Пример с автовоспроизведением:
<audio autoplay muted loop> <source src="ambient.mp3" type="audio/mpeg"> </audio> <button onclick="document.querySelector('audio').muted = false"> Включить звук </button>

JavaScript управление:

const audio = document.querySelector('audio'); // Включить беззвучный режим audio.muted = true; // Выключить беззвучный режим audio.muted = false; // Переключить состояние audio.muted = !audio.muted; // Проверить состояние console.log('Беззвучный режим:', audio.muted);

Лучшие практики:

  • Всегда предоставляйте кнопку включения звука
  • Сохраняйте состояние muted в localStorage
  • Для важного контента не полагайтесь только на autoplay+muted
  • Тестируйте на мобильных устройствах

Ограничения: Некоторые мобильные браузеры могут блокировать любое автовоспроизведение, даже с muted.

Определение поддержки автовоспроизведения:

const audio = document.createElement('audio'); audio.muted = true; audio.autoplay = true; audio.src = 'data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBIAAAABAAEARKwAAIhYAQACABAAAABkYXRhAgAAAAEA'; audio.play().then(() => { console.log('Автовоспроизведение с muted поддерживается'); }).catch(e => { console.log('Автовоспроизведение заблокировано:', e); });

Совет: Для фоновой музыки используйте сочетание autoplay muted loop с кнопкой включения звука.

Примечание: Атрибут muted не сохраняется при перезагрузке страницы - состояние нужно управлять через JavaScript.