Please add a volume slider for chat pings

Question

Would it be possible to have a slider to control the volume of the chat pings?

I know I could use the Volume Mixer on Windows to lower my web browsers volume but then that affects everything (such as YouTube, Twitch, etc.) which is troublesome.

Since the volume icon is already used to set when pings should occur (or if they should occur at all) by clicking on it, my proposal would be to make the slider appear when hovering over said icon. I realize there probably would need to be more changes to it (for instance a way to show the volume level unambiguously from the Sound Notifications - None option).

Answer 1

As this feature request is still open we have to assume that the 6 to 8 weeks planning was a little bit to ambitious (or something else came up).

Until this feature gets added to the official code-base you can use the following userscript to enhance your sound experience while chatting:

// ==UserScript==
// @name         Chat Volume
// @namespace    http://stackoverflow.com/users/578411/rene
// @version      0.1
// @description  Chat Volume control
// @author       rene
// @match        *://chat.meta.stackexchange.com/rooms/*
// @match        *://chat.stackexchange.com/rooms/*
// @match        *://chat.stackoverflow.com/rooms/*
// @grant        none
// ==/UserScript==

// slider inspired on http://stackoverflow.com/a/7191095 from RoToRa

(function ($, window) {
    var slider = $('<div style=" border-radius: 2px;background-color: white;height: 7px;width:0%"></div>'), // slider div
        key = 'ChatVolume-' + window.CHAT.CURRENT_ROOM_ID,
        storedVolume = window.localStorage.getItem(key);

    // set the volume on the slider
    function setVolume(vol) {
        slider.css('width', (vol * 100).toString() +'%');
    }

    if (storedVolume !== null) {
        $('#jplayer').jPlayer('volume', storedVolume); // set our volume from localStorage
    }

    $('#sound').on('click', function () { 
        // wait for the dialog to be inserted in the dom
        window.setTimeout(function() { 
            setVolume($('#jplayer').jPlayer('option','volume')); // current volume
            $('div.popup > ul').append( 
                $('<li style="margin-top: 2px;"></li>').append(  // in our li ...
                    $('<div style="background-color: #4e82c2;padding: 2px; border-radius: 5px;box-shadow: 0px 2px 0 #3767a1"></div>').append( // outer div
                        slider                  
                    ).on('click', function (e) {
                        // clicking the outer div set the volume
                        var volnew = e.offsetX / $(e.delegateTarget).width(); // between 0 and 1
                        volnew = volnew < 0 ? 0: volnew > 1 ? 1 : volnew;  // normalize
                        $('#jplayer').jPlayer('volume', volnew); // set our new volume
                        window.localStorage.setItem(key, volnew);
                        setVolume(volnew);
                    })
                )
            ); 
        }, 100);
    });
} ($|| unsafeWindow.$, window || unsafeWindow));

I've added a very basic slider (I'm not at all a front-end dev) to the dialog that pops-up when you click the speaker icon:

Clicking anywhere in the blue bar sets the sound accordingly (left being 0, right being 100%) and as a bonus the setting is stored in the localStorage of your browser. Next time you enter this chatroom the sound-level is set to the last stored level. And yes, that is correct, the setting is stored per chatroom.

This is tested on Google Chrome on a Win7 with Tamper Monkey but should work on Firefox with Grease Monkey as well.

^{... but I don't want to install a script to control the volume, just make it less loud ... in that case just run $('#jplayer').jPlayer('volume',0.2); (any value between 0 and 1 will work) in the console of your browser every time you (re)load the chatroom}