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
    How to Create a RetroPie on Raspberry Pi &#8211; Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Incredible Demos

  • By
    jQuery Countdown Plugin

    You've probably been to sites like RapidShare and MegaUpload that allow you to download files but make you wait a specified number of seconds before giving you the download link. I've created a similar script but my script allows you to animate the CSS font-size...

  • By
    Multiple File Upload Input

    More often than not, I find myself wanting to upload more than one file at a time.  Having to use multiple "file" INPUT elements is annoying, slow, and inefficient.  And if I hate them, I can't imagine how annoyed my users would be.  Luckily Safari, Chrome...

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!