Adds a volume slider to Instagram.

instagram-volume-slider.user.js

// Volume slider from: https://codepen.io/emilcarlsson/pen/PPNLPy

// ==UserScript==
// @name         Instagram volume slider
// @namespace    https://delivator.me/
// @version      0.5
// @description  Adds a volume slider to Instagram
// @author       Delivator.me
// @match        https://www.instagram.com/*
// @homepage     https://gist.github.com/Delivator/902cdaff0f21186b514e576e4670ff70
// @grant        GM_addStyle
// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
// @require      https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
// @icon         https://www.instagram.com/static/images/ico/apple-touch-icon-180x180-precomposed.png/85a358fb3b7d.png
// ==/UserScript==


(function () {
  'use strict';

  GM_addStyle(`
#volume {
  position: fixed !important;
  left: 20px;
  bottom: 24px;
  margin: 0 auto;
  height: 5px;
  width: 300px;
  background: #424141;
  border-radius: 15px;
  z-index: 200;
}
#volume .ui-slider-range-min {
  height: 5px;
  width: 300px;
  position: absolute;
  background: #a4a6a9;
  border: none;
  border-radius: 10px;
  outline: none;
}
#volume .ui-slider-handle {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: #a4a6a9;
  position: absolute;
  margin-left: -8px;
  margin-top: -8px;
  cursor: pointer;
  outline: none;
}
`);

  let settings = localStorage.getItem("volumeSettings");
  let videos = document.querySelectorAll("video");

  function saveSettings() {
    localStorage.setItem("volumeSettings", JSON.stringify(settings));
  }

  function setVolume() {
    let vids = document.querySelectorAll("video");
    vids.forEach(vid => {
      if (vid.volume !== settings.volume) vid.volume = settings.volume;
    });
  }

  function volumeChange(myVolume) {
    settings.volume = myVolume;
    setVolume();
    saveSettings();
  }

  function setup() {
    if (!settings) {
      settings = { "volume": 0.5 };
      saveSettings();
    } else {
      settings = JSON.parse(settings);
    }
    let volSlider = document.createElement("div");
    volSlider.id = "volume";
    let body = document.getElementsByTagName("BODY")[0];
    body.append(volSlider);

    $("#volume").slider({
      min: 0,
      max: 100,
      value: settings.volume * 100,
      range: "min",
      slide: (event, ui) => {
        volumeChange(ui.value / 100);
      }
    });
    setInterval(setVolume, 125);
  }

  $("document").ready(() => {
    setTimeout(setup, 250);
    if (!settings) {
      settings = { "volume": 0.5 };
      saveSettings();
    } else {
      JSON.parse(settings);
    }
  });
})();