The <audio>
and <video>
tags provide a wealth more functionality than most people know. For instance, did you know that you could detect supported video formats and audio formats using a few JavaScript tricks? It got me to thinking about the possibilities of detecting system volume with JavaScript in the browser.
I hate to be a buzzkill but unfortunately JavaScript doesn’t provide direct access to the system volume but you can, using <audio>
and/or <video>
elements, programmatically set and get the volume level.
// Getting volume level
const volume = document.querySelector("video").volume; // 1
// Setting volume level
document.querySelector("video").volume = 0.5; // set volume to 50%
You can also listen for volume changes with the “onvolumechange” event:
document.querySelector("video").addEventListener("onvolumechange", e => {
// Change your custom control UI
});
It makes sense that you can’t set system volume level from a random JavaScript snippet in a browser but I had a slight hope you could retrieve that level. Setting volume with JavaScript for a given piece of media is relative to system volume level but hey — at least we get to create custom controls for those elements with .volume
settings!
The post Get and Set Volume with JavaScript appeared first on David Walsh Blog.