☰

Adjust Instant-Buttons Sound Volume | MyInstants

Adjust Instant-Buttons Sound Volume

  1. // ==UserScript==
  2. // @name          	Adjust Instant-Buttons Sound Volume | MyInstants
  3. // @name:de			Anpassung der Instant-Button Lautstärke | MyInstants
  4. // @namespace    	https://greasyfork.org/users/928242
  5. // @version        	1.1
  6. // @description   	Adjust Instant-Buttons Sound Volume
  7. // @description:de	Anpassung der Instant-Button Lautstärke
  8. // @author       	Kamikaze (https://github.com/Kamiikaze)
  9. // @supportURL      https://github.com/Kamiikaze/Tampermonkey/issues
  10. // @icon            https://www.google.com/s2/favicons?sz=64&domain=myinstants.com
  11. // @match           https://www.myinstants.com/de/*
  12. // @grant        	none
  13. // @license        	MIT
  14. // ==/UserScript==
  15.  
  16.  
  17. /* global audio */
  18.  
  19. const savedVolume = window.localStorage.getItem("soundVol")
  20.  
  21. setTimeout(() => {
  22.  
  23.     const instantsContainer = document.querySelector("#instants_container");
  24.  
  25.     const volumeLabel = document.createElement("label");
  26.     volumeLabel.textContent = "Volume:";
  27.  
  28.     const volumeRange = document.createElement("input");
  29.     volumeRange.type = "range";
  30.     volumeRange.id = "volume-range";
  31.     volumeRange.min = "0";
  32.     volumeRange.max = "100";
  33.     volumeRange.step = "0.1";
  34.     volumeRange.value = savedVolume || "50";
  35.  
  36.     audio.volume = savedVolume / 100 || volumeRange.value / 100;
  37.  
  38.  
  39.     const volumeNumber = document.createElement("input");
  40.     volumeNumber.type = "number";
  41.     volumeNumber.id = "volume-number";
  42.     volumeNumber.min = "0";
  43.     volumeNumber.max = "100";
  44.     volumeNumber.step = "0.5";
  45.     volumeNumber.value = savedVolume || "50";
  46.  
  47.  
  48.     const volumeControlContainer = document.createElement("div");
  49.     volumeControlContainer.id = "volume-control-container"
  50.     volumeControlContainer.classList.add("sticky")
  51.     volumeControlContainer.appendChild(volumeLabel);
  52.     volumeControlContainer.appendChild(volumeRange);
  53.     volumeControlContainer.appendChild(volumeNumber);
  54.  
  55.     instantsContainer.before(volumeControlContainer);
  56.  
  57.  
  58.     volumeRange.addEventListener("input", () => {
  59.         changeVolume(volumeRange.value);
  60.     });
  61.  
  62.     volumeNumber.addEventListener("input", () => {
  63.         changeVolume(volumeNumber.value);
  64.     });
  65.  
  66.     function changeVolume(vol) {
  67.         audio.volume = vol / 100;
  68.         volumeNumber.value = vol;
  69.         volumeRange.value = vol;
  70.         window.localStorage.setItem("soundVol", parseFloat(vol).toFixed(1))
  71.     }
  72.  
  73.  
  74.     const style = document.createElement("style");
  75.     style.textContent = `
  76.  
  77.   #volume-control-container {
  78.     display: flex;
  79.     flex-direction: row;
  80.     flex-wrap: nowrap;
  81.     justify-content: center;
  82.     align-items: center;
  83.     gap: 15px;
  84.     background-color: rgb(0 0 0 / 50%);
  85.     width: fit-content;
  86.     padding: 10px 20px;
  87.     margin: auto;
  88.     border-radius: 10px;
  89.   }
  90.  
  91.   #volume-control-container.sticky {
  92.       position: fixed;
  93.       top: 90px;
  94.       right: 20px;
  95.       z-index: 100;
  96.       background-color: rgba(0, 0, 0, 0.8);
  97.   }
  98.  
  99.   #volume-control-container input:nth-child(3) {
  100.     max-width: 65px;
  101.   }
  102.  
  103. `;
  104.  
  105.     document.head.appendChild(style);
  106.  
  107.  
  108. }, 1000)