Get and Set Volume with JavaScript

By  on  

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!

Recent Features

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

Incredible Demos

  • By
    Multiple Background CSS Animations

    CSS background animation has been a hot topic for a long time, mostly because they look pretty sweet and don't require additional elements.  I was recently asked if it was possible to have multiple background animations on a given element and the answer is yes...with...

  • By
    Check All/None Checkboxes Using MooTools

    There's nothing worse than having to click every checkbox in a list. Why not allow users to click one item and every checkbox becomes checked? Here's how to do just that with MooTools 1.2. The XHTML Note the image with the ucuc ID -- that...

Discussion

  1. Great article! I would be curious on if this would be possible in node.js since it does have access to system files

  2. Tim

    Except on iOS, where the volume has always been read only. Apparently Apple didn’t want applications to have access to the volume knob even though the system volume is under user control via hardware.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!