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 спрацьовує як при зміні рівня гучності користувачем, так і при програмних змінах через код. Це дозволяє забезпечити зручну синхронізацію між інтерфейсом користувача та внутрішньою логікою програми.
Зазвичай ця подія використовується для оновлення елементів управління звуком у програвачах відео та аудіо, де потрібно динамічно відображати рівень гучності або зміну стану звуку.
| Порада: | Можна додати власні контроли для гучності і вимкнення звуку, використовуючи прості повзунки або перемикачі, а подію |
| Порада: | Важливо враховувати, що гучність може змінюватися поступово (через затримку між кліками або перетягуванням повзунка), тому реакцію на подію варто оптимізувати, щоб уникнути частого виклику важких операцій. |
| Порада: | Для збереження налаштувань гучності користувача після оновлення сторінки можна використовувати локальне сховище (localStorage). При кожній події |
Синтаксис
element.addEventListener('volumechange', function(event) {
// Дії після зміни гучності
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі користувач може взаємодіяти з відео за допомогою повзунка для регулювання гучності та кнопки для вимкнення/ввімкнення звуку. При кожній зміні гучності (через повзунок або вимкнення звуку) подія volumechange автоматично оновлює індикатор поточної гучності і змінює текст кнопки залежно від стану звуку. Це дозволяє користувачеві легко керувати звуком відео і бачити зміни в реальному часі.
Цей приклад показує, як динамічно відображати рівень гучності або статус вимкнення звуку в HTML-елементі, наприклад, текстовому індикаторі. При кожній зміні гучності (включаючи вимкнення звуку) індикатор оновлюється, показуючи актуальний стан.
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 = 'Звук вимкнено';
}
});У цьому прикладі поточні налаштування гучності користувача зберігаються в localStorage при кожній зміні. Коли сторінка завантажується, ці налаштування відновлюються, дозволяючи зберігати користувацький досвід після перезавантаження сторінки або повернення до неї.
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;
}