Bootstrap UI Sounds

[coliff]

I recently released Web DevTools+, an iOS app which brings desktop-class web developer tools to your iPad or iPhone. It includes a DOM element inspector, accessibility audits, network inspector, SEO tools, OpenGraph previews, console and much more. All the CSS used to create it is Bootstrap v5 :-)
https://apps.apple.com/us/app/web-devtools/id6759253731

In the app's settings I added a switch to turn on UI sounds (subtle effects when tapping buttons, switches, accordions etc) which I really liked and started to add as option in other projects.

I started this as a fun experiment but then thought others might be interested in it so I put a quick demo and code on GitHub to share. Every component that can be interacted with has a sound using the Web Audio API. I like that the range slider's volume changes depending on the value. (zero is silent and 100 is max). I think many of the sounds could be tweaked to be nicer and may work on that in a future update.

Demo:
https://coliff.github.io/bootstrap-ui-sounds/#

GitHub:
https://github.com/coliff/bootstrap-ui-sounds

npm:
https://npmx.dev/package/bootstrap-ui-sounds