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 Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • By
    Google-Style Element Fading Using MooTools or jQuery

    Google recently introduced an interesting effect to their homepage: the top left and top right navigation items don't display until you move your mouse or leave the search term box. Why? I can only speculate that they want their homepage as...

  • By
    Printing MooTools Accordion Items

    Sometimes we're presented with unforeseen problems when it comes to our JavaScript effects. In this case, I'm talking about printing jQuery and MooTools accordions. Each "closed" accordion content element has its height set to 0 which means it will be hidden when the...

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!