Додати зворотний зв’язок Web Audio до компонентів Bootstrap 5 – Bootstrap UI Sounds
https://ift.tt/XUGmKAP
Bootstrap UI Sounds — це бібліотека зворотного зв’язку за допомогою аудіо на чистому JavaScript, яка додає короткі звукові сигнали за допомогою Web Audio API до компонентів Bootstrap 5.
Вбудуйте скрипт у ваш проект Bootstrap, і взаємодії з формами, модальні діалоги, випадаючі меню, каруселі, сповіщення toast та стан валідації будуть видавати тонкі звукові сигнали під час взаємодії користувача.
Функції:
- Синтезує всі звуки у браузері за допомогою Web Audio API.
- Активується глобально або в рамках певного контейнера за одним HTML-атрибутом.
- Відокремлені тональні пресети для 21 типу взаємодії, включаючи окремі звуки для увімкнення vs вимкнення, прапорця checkbox позначено vs не позначено, попередній vs наступний у каруселі та валідні vs невалідні стани форми.
- Голоси гучності від слоту діапазона пропорційно до поточного положення повзунка.
- Слухає події JavaScript Bootstrap (show.bs.modal, hide.bs.collapse, show.bs.toast та інші) під взаємодією з компонентами.
- Сирі оброблювачі кліків обробляють кнопки та елементи управління каруселем.
- Використовує MutationObserver, щоб відловлювати динамічно вставлені елементи alert і відразу програвати звук повідомлення під час вставлення в DOM.
- Автоматично відновлює призупинений AudioContext під час першої взаємодії користувача.
Як користуватися:
1. Спочатку завантажте Bootstrap CSS та JS, потім додайте скрипт Bootstrap UI Sounds перед закриваючим тегом </body>.
<!-- Bootstrap CSS --> <link href="/path/to/bootstrap.min.css" rel="stylesheet"> <!-- Ваш вміст сторінки тут --> <!-- Bootstrap JS пакет (включає Popper) --> <script src="/path/to/bootstrap.bundle.min.js"></script> <!-- Bootstrap UI Sounds — має завантажуватися після Bootstrap JS --> <script src="/path/to/js/bootstrap-ui-sounds.js" defer></script>
2. Плагін за замовчуванням вимкнено. Активуйте його, додавши data-ui-sounds до тегу <html>, тегу <body> або будь-якого контейнера, який ви хочете охопити.
<!-- Додавання data-ui-sounds до <html> активує звуки для всієї сторінки --> <html lang="en" data-ui-sounds="true">
<!-- Звуки програються лише для компонентів у цьому контейнері --> <div class="settings-panel" data-ui-sounds="true"> <button class="btn btn-primary">Save settings</button> <!-- Інші компоненти Bootstrap тут --> </div>
3. Доступні пресети звуків. Бібліотека використовує фіксовані внутрішні пресети. Кожен з них відповідає певному типу взаємодії. Усі звуки створюються за допомогою Web Audio API OscillatorNode з оголошенням амплітуди (envelope).
| Назва пресету | Частота (Гц) | Тривалість (с) | Характер хвилі | Гучність |
|---|---|---|---|---|
click |
800 | 0.05 | sine | 0.28 |
open |
520 | 0.07 | sine | 0.26 |
close |
320 | 0.06 | sine | 0.26 |
expand |
600 | 0.06 | sine | 0.26 |
collapse |
400 | 0.06 | sine | 0.26 |
alert |
660 | 0.06 | sine | 0.24 |
focus |
440 | 0.04 | sine | 0.20 |
change |
550 | 0.045 | sine | 0.22 |
toast |
580 | 0.06 | sine | 0.24 |
detail |
500 | 0.055 | sine | 0.26 |
carouselPrev |
500 | 0.055 | sine | 0.24 |
carouselNext |
660 | 0.055 | sine | 0.24 |
closeButton |
380 | 0.05 | sine | 0.24 |
switchOn |
780 | 0.05 | square | 0.25 |
switchOff |
420 | 0.055 | triangle | 0.23 |
checkboxOn |
650 | 0.05 | square | 0.24 |
checkboxOff |
400 | 0.06 | triangle | 0.22 |
radio |
680 | 0.045 | triangle | 0.23 |
range |
500 | 0.04 | sine | 0.22 |
formInvalid |
280 | 0.10 | triangle | 0.20 |
formValid |
520 | 0.10 | triangle | 0.22 |
Альтернативи:
Публікація Add Web Audio Feedback to Bootstrap 5 Components – Bootstrap UI Sounds спершу з’явилася на CSS Script.
HI-FI News
via CSS Script https://ift.tt/69LwbAF
12 травня 2026 р. о 08:55.
May 12, 2026 at 08:55AM
Залишити відповідь