JS властивість Event.volumechange

Загальний опис

Подія volumechange виникає, коли змінюється рівень гучності аудіо або відео елемента, або коли звук вимикається чи вмикається (mute/unmute). Ця подія може бути корисною для реалізації динамічних елементів інтерфейсу, наприклад, оновлення візуальних індикаторів гучності або для зберігання налаштувань користувача.

Щоб відстежити подію volumechange, використовується метод addEventListener, приклад:

const videoElement = document.querySelector('video');
videoElement.addEventListener('volumechange', (event) => {
  console.log('Гучність змінилася:', videoElement.volume);
});

У цьому прикладі, коли гучність змінюється, у консоль виводиться нове значення рівня гучності. Рівень гучності можна отримати через властивість volume елемента, яка знаходиться у діапазоні від 0.0 (мінімум, без звуку) до 1.0 (максимум). Якщо звук повністю вимкнено, властивість muted буде дорівнювати true.

Окрім прослуховування зміни гучності, можна також програмно змінювати гучність за допомогою властивості volume:

videoElement.volume = 0.5; // встановлення гучності на 50%

Також можна ввімкнути або вимкнути звук за допомогою властивості muted:

videoElement.muted = true; // вимкнення звуку

Подія volumechange спрацьовує як при зміні рівня гучності користувачем, так і при програмних змінах через код. Це дозволяє забезпечити зручну синхронізацію між інтерфейсом користувача та внутрішньою логікою програми.

Зазвичай ця подія використовується для оновлення елементів управління звуком у програвачах відео та аудіо, де потрібно динамічно відображати рівень гучності або зміну стану звуку.

правити

Порада

Можна додати власні контроли для гучності і вимкнення звуку, використовуючи прості повзунки або перемикачі, а подію volumechange — для синхронізації між цими контролями та поведінкою елемента.

автор: Bond правити

Порада

Важливо враховувати, що гучність може змінюватися поступово (через затримку між кліками або перетягуванням повзунка), тому реакцію на подію варто оптимізувати, щоб уникнути частого виклику важких операцій.

автор: Bond правити

Порада

Для збереження налаштувань гучності користувача після оновлення сторінки можна використовувати локальне сховище (localStorage). При кожній події volumechange зберігайте поточне значення, а при завантаженні сторінки використовуйте його для налаштування елемента.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.addEventListener('volumechange', function(event) {
  // Дії після зміни гучності
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	66	57	11.1	53	16

Підтримка: мобільні переглядачі

Переглядач
	66	66	57	11.3

Підтримка: серверні переглядачі

Переглядач
	15.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<video width="320" height="180" controls>
    <source src="film.mp4" type="video/mp4">
</video>

const videoElement = document.querySelector('video');

// Зберігаємо налаштування гучності користувача в localStorage
videoElement.addEventListener('volumechange', () => {
  const userVolume = {
    volume: videoElement.volume,
    muted: videoElement.muted,
  };
  localStorage.setItem('userVolume', JSON.stringify(userVolume));
});

// Встановлюємо збережені налаштування при завантаженні сторінки
const savedVolume = JSON.parse(localStorage.getItem('userVolume'));
if (savedVolume) {
  videoElement.volume = savedVolume.volume;
  videoElement.muted = savedVolume.muted;
}

<div id="volume-indicator">Демонстраційний елемент</div>
<video width="320" height="180" controls>
    <source src="film.mp4" type="video/mp4">
</video>

const videoElement = document.querySelector('video');
const volumeIndicator = document.getElementById('volume-indicator');

// Відображаємо рівень гучності на індикаторі
videoElement.addEventListener('volumechange', () => {
  const volumePercent = Math.round(videoElement.volume * 100);
  volumeIndicator.textContent = `Гучність: ${volumePercent}%`;

  if (videoElement.muted) {
    volumeIndicator.textContent = 'Звук вимкнено';
  }
});