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 спрацьовує як при зміні рівня гучності користувачем, так і при програмних змінах через код. Це дозволяє забезпечити зручну синхронізацію між інтерфейсом користувача та внутрішньою логікою програми.
Зазвичай ця подія використовується для оновлення елементів управління звуком у програвачах відео та аудіо, де потрібно динамічно відображати рівень гучності або зміну стану звуку.
автор: Bond
- Порада
-
Можна додати власні контроли для гучності і вимкнення звуку, використовуючи прості повзунки або перемикачі, а подію
автор: Bondvolumechange— для синхронізації між цими контролями та поведінкою елемента. - Порада
-
Важливо враховувати, що гучність може змінюватися поступово (через затримку між кліками або перетягуванням повзунка), тому реакцію на подію варто оптимізувати, щоб уникнути частого виклику важких операцій.
автор: Bond - Порада
-
Для збереження налаштувань гучності користувача після оновлення сторінки можна використовувати локальне сховище (localStorage). При кожній події
автор: Bondvolumechangeзберігайте поточне значення, а при завантаженні сторінки використовуйте його для налаштування елемента.
Синтаксис
element.addEventListener('volumechange', function(event) {
// Дії після зміни гучності
});Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 3 | 6 | 3.1 | ≤12.1 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 6 | 3 |
Приклади
+ запропонувати свій приклад у пісочниці
HTML
<video id="videoElement" width="320" height="180" controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%23264653'/%3E%3Cpath d='M138 62 192 90 138 118Z' fill='%23e9c46a'/%3E%3Ctext x='160' y='138' font-family='sans-serif' font-size='15' text-anchor='middle' fill='%23e9c46a'%3Eлише звук%3C/text%3E%3C/svg%3E">
Ваш браузер не відтворює відео.
</video>JS
const videoElement = document.getElementById('videoElement');
videoElement.src = silentWav(30);
// Зберігаємо налаштування гучності користувача в localStorage
videoElement.addEventListener('volumechange', () => {
const userVolume = {
volume: videoElement.volume,
muted: videoElement.muted,
};
try {
localStorage.setItem('userVolume', JSON.stringify(userVolume));
} catch (error) {
// у рамці прикладу сховище недоступне — воно тут і не головне
console.log(`Сховище недоступне (${error.name})`);
}
});
// Встановлюємо збережені налаштування при завантаженні сторінки
let savedVolume = null;
try {
savedVolume = JSON.parse(localStorage.getItem('userVolume'));
} catch (error) {
// у рамці прикладу сховища немає — просто нічого не відновлюємо
}
if (savedVolume) {
videoElement.volume = savedVolume.volume;
videoElement.muted = savedVolume.muted;
}
// — службове: беззвучний WAV замість медіафайла, збирається просто тут —
function silentWav(seconds = 3, rate = 8000) {
const size = seconds * rate; // 8-бітний моно PCM: один байт на семпл
const le = (value, bytes) => String.fromCharCode(...Array.from({ length: bytes }, (_, i) => value >> 8 * i & 255));
const head = `RIFF${le(36 + size, 4)}WAVEfmt ${le(16, 4)}${le(1, 2)}${le(1, 2)}${le(rate, 4)}${le(rate, 4)}${le(1, 2)}${le(8, 2)}data${le(size, 4)}`;
return `data:audio/wav;base64,${btoa(head + '\u0080'.repeat(size))}`;
}HTML
<div id="volume-indicator">Гучність поки не змінювали</div>
<video id="videoElement" width="320" height="180" controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%23264653'/%3E%3Cpath d='M138 62 192 90 138 118Z' fill='%23e9c46a'/%3E%3Ctext x='160' y='138' font-family='sans-serif' font-size='15' text-anchor='middle' fill='%23e9c46a'%3Eлише звук%3C/text%3E%3C/svg%3E">
Ваш браузер не відтворює відео.
</video>JS
const videoElement = document.getElementById('videoElement');
const volumeIndicator = document.getElementById('volume-indicator');
// Відображаємо рівень гучності на індикаторі
videoElement.addEventListener('volumechange', () => {
const volumePercent = Math.round(videoElement.volume * 100);
volumeIndicator.textContent = `Гучність: ${volumePercent}%`;
if (videoElement.muted) {
volumeIndicator.textContent = 'Звук вимкнено';
}
});
videoElement.src = silentWav(30);
// — службове: беззвучний WAV замість медіафайла, збирається просто тут —
function silentWav(seconds = 3, rate = 8000) {
const size = seconds * rate; // 8-бітний моно PCM: один байт на семпл
const le = (value, bytes) => String.fromCharCode(...Array.from({ length: bytes }, (_, i) => value >> 8 * i & 255));
const head = `RIFF${le(36 + size, 4)}WAVEfmt ${le(16, 4)}${le(1, 2)}${le(1, 2)}${le(rate, 4)}${le(rate, 4)}${le(1, 2)}${le(8, 2)}data${le(size, 4)}`;
return `data:audio/wav;base64,${btoa(head + '\u0080'.repeat(size))}`;
}HTML
<header>
<h2 class="title">volumechange</h2>
<p class="description">Відслідковує зміни гучності та вимкнення звуку для відео елемента</p>
</header>
<main>
<div class="result">
<!-- Відео елемент -->
<video id="videoElement" controls width="400" poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%23264653'/%3E%3Cpath d='M138 62 192 90 138 118Z' fill='%23e9c46a'/%3E%3Ctext x='160' y='138' font-family='sans-serif' font-size='15' text-anchor='middle' fill='%23e9c46a'%3Eлише звук%3C/text%3E%3C/svg%3E">
Ваш браузер не підтримує відтворення відео.
</video>
<!-- Повзунок для регулювання гучності -->
<div>
<label for="volumeSlider">Гучність:</label>
<input type="range" id="volumeSlider" min="0" max="100" value="50">
</div>
<!-- Кнопка для вимкнення/ввімкнення звуку -->
<div>
<button id="muteButton">Вимкнути звук</button>
</div>
<!-- Текстовий індикатор гучності -->
<p id="volumeDisplay">Поточна гучність: 50%</p>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
video {
display: block;
margin-bottom: 15px;
}
input[type="range"] {
width: 100%;
max-width: 300px;
margin-top: 10px;
}
button {
margin-top: 10px;
padding: 8px 16px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#volumeDisplay {
margin-top: 15px;
color: #333;
}JS
const videoElement = document.getElementById('videoElement');
const volumeSlider = document.getElementById('volumeSlider');
const muteButton = document.getElementById('muteButton');
const volumeDisplay = document.getElementById('volumeDisplay');
// Джерело: беззвучний WAV, зібраний тут-таки (див. silentWav нижче)
videoElement.src = silentWav(30);
// Встановлюємо початкову гучність для відео
videoElement.volume = 0.5;
// Обробник події зміни гучності через повзунок
volumeSlider.addEventListener('input', () => {
const volumeValue = volumeSlider.value / 100;
videoElement.volume = volumeValue;
});
// Обробник події для вимкнення/ввімкнення звуку
muteButton.addEventListener('click', () => {
videoElement.muted = !videoElement.muted;
muteButton.textContent = videoElement.muted ? 'Увімкнути звук' : 'Вимкнути звук';
});
// Обробник події 'volumechange' для відстеження змін гучності або статусу звуку
videoElement.addEventListener('volumechange', () => {
if (videoElement.muted) {
volumeDisplay.textContent = 'Звук вимкнено';
volumeSlider.value = 0;
} else {
const volumePercent = Math.round(videoElement.volume * 100);
volumeDisplay.textContent = `Поточна гучність: ${volumePercent}%`;
volumeSlider.value = volumePercent;
}
});
// — службове: беззвучний WAV замість медіафайла, збирається просто тут —
function silentWav(seconds = 3, rate = 8000) {
const size = seconds * rate; // 8-бітний моно PCM: один байт на семпл
const le = (value, bytes) => String.fromCharCode(...Array.from({ length: bytes }, (_, i) => value >> 8 * i & 255));
const head = `RIFF${le(36 + size, 4)}WAVEfmt ${le(16, 4)}${le(1, 2)}${le(1, 2)}${le(rate, 4)}${le(rate, 4)}${le(1, 2)}${le(8, 2)}data${le(size, 4)}`;
return `data:audio/wav;base64,${btoa(head + '\u0080'.repeat(size))}`;
}Коментарі
Коментарів ще немає — будьте першим!