☰

Diep.io audio/music/sound beta

Please sent me game music ideas in the feedback! Plays background music with custom controls for skipping tracks, adjusting volume, and playing/pausing the music.

当前为 2023-03-06 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Diep.io audio/music/sound beta
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.1
  5. // @homepage     https://greasyfork.org/en/scripts/461192-diep-io-audio-music-sound-beta/code
  6. // @description  Please sent me game music ideas in the feedback! Plays background music with custom controls for skipping tracks, adjusting volume, and playing/pausing the music.
  7. // @author       -{Abyss⌬}-ora
  8. // @match        https://diep.io
  9. // @grant        none
  10. // @license      GNU GPLv3
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     const audioPlayer = document.createElement("audio");
  17.     audioPlayer.id = "audioPlayer";
  18.     audioPlayer.controls = false;
  19.     audioPlayer.loop = true;
  20.     audioPlayer.autoplay = true;
  21.     audioPlayer.volume = 0.05;
  22.  
  23.     const sources = [
  24.         "https://github.com/Abyss-ora/dpaudio/raw/main/8-bit-arcade-138828.mp3",
  25.         "https://github.com/Abyss-ora/dpaudio/raw/main/kim-lightyear-angel-eyes-chiptune-edit-110226.mp3",
  26.         "https://github.com/Abyss-ora/dpaudio/raw/main/kim-lightyear-legends-109307.mp3",
  27.         "https://github.com/Abyss-ora/dpaudio/raw/main/Cipher2.mp3"
  28.     ];
  29.  
  30.     let currentTrack = 0;
  31.  
  32.     audioPlayer.src = sources[currentTrack];
  33.     document.body.appendChild(audioPlayer);
  34.  
  35.     const container = document.createElement("div");
  36.     container.style.opacity = "0.5";
  37.     container.style.display = "flex";
  38.     container.style.alignItems = "center";
  39.     container.style.justifyContent = "center";
  40.     container.style.position = "fixed";
  41.     container.style.top = "10px";
  42.     container.style.left = "350px";
  43.     container.style.backgroundImage = "url('https://media.tenor.com/images/f3f5354b7c304bc61882dbb1183885e7/tenor.gif')";
  44.     container.style.backgroundRepeat = "repeat";
  45.     container.style.backgroundAttachment = "fixed";
  46.     container.style.backgroundSize = "160px 100px";
  47.     container.style.padding = "5px";
  48.     container.style.borderRadius = "5 5px 5px 5";
  49.     container.style.borderStyle = "solid";
  50.     container.style.borderWidth = "thick";
  51.     container.style.borderTopRightRadius = "20px 50px";
  52.     container.style.borderTopLeftRadius = "20px 50px";
  53.     container.style.borderStyle = "double";
  54.     container.style.borderBottomRightRadius = "20px 50px";
  55.     container.style.borderBottomLeftRadius = "20px 50px";
  56.     container.style.borderTopColor = "lightpink";
  57.     container.style.borderLeftColor = "lightgray";
  58.     container.style.borderBottomColor = "lightpink";
  59.     container.style.borderRightColor = "lightgray";
  60.     document.body.appendChild(container);
  61.  
  62.     const previousButton = document.createElement("button");
  63.     previousButton.innerText = "⏪";
  64.     previousButton.style.fontSize = "24px";
  65.     previousButton.style.marginRight = "10px";
  66.     previousButton.style.borderTopColor = "lightpink";
  67.     previousButton.style.backgroundTransparent = "0.01";
  68.     container.appendChild(previousButton);
  69.  
  70.     const playButton = document.createElement("button");
  71.     playButton.innerText = "▶️";
  72.     playButton.style.fontSize = "24px";
  73.     playButton.style.marginRight = "10px";
  74.     playButton.style.borderTopColor = "lightpink";
  75.     playButton.style.backgroundTransparent = "0.01";
  76.     container.appendChild(playButton);
  77.  
  78.     const volumeBar = document.createElement("input");
  79.     volumeBar.type = "range";
  80.     volumeBar.min = "0";
  81.     volumeBar.max = "1";
  82.     volumeBar.step = "0.01";
  83.     volumeBar.value = audioPlayer.volume;
  84.     volumeBar.style.width = "100px";
  85.     volumeBar.style.marginRight = "10px";
  86.     volumeBar.style.backgroundTransparent = "0.01";
  87.     container.appendChild(volumeBar);
  88.  
  89.     const skipButton = document.createElement("button");
  90.     skipButton.innerText = "⏩";
  91.     skipButton.style.fontSize = "24px";
  92.     skipButton.style.marginRight = "10px";
  93.     skipButton.style.borderTopColor = "lightpink";
  94.     skipButton.style.backgroundTransparent = "0.01";
  95.     container.appendChild(skipButton);
  96.  
  97.     function playPause() {
  98.         if (audioPlayer.paused) {
  99.             audioPlayer.play();
  100.             playButton.innerText = "⏸";
  101.         } else {
  102.             audioPlayer.pause();
  103.             playButton.innerText = "▶️";
  104.         }
  105.     }
  106.  
  107.     function previousTrack() {
  108.         currentTrack = (currentTrack - 1 + sources.length) % sources.length;
  109.         audioPlayer.src = sources[currentTrack];
  110.         audioPlayer.play();
  111.         playButton.innerText = "⏸";
  112.     }
  113.  
  114.     function skipTrack() {
  115.         currentTrack = (currentTrack + 1) % sources.length;
  116.         audioPlayer.src = sources[currentTrack];
  117.         audioPlayer.play();
  118.         playButton.innerText = "⏸";
  119.     }
  120.  
  121.     playButton.addEventListener("click", playPause);
  122.     previousButton.addEventListener("click", previousTrack);
  123.     skipButton.addEventListener("click", skipTrack);
  124.     volumeBar.addEventListener("input", function() {
  125.         audioPlayer.volume = volumeBar.value;
  126.     });
  127.  
  128.     document.addEventListener("keydown", function(event) {
  129.   if (event.keyCode === 82) {
  130.       container.style.opacity = container.style.opacity === "0.2" ? "1" : "0.2";
  131.       container.style.pointerEvents = "none";
  132.       previousButton.style.pointerEvents = "none";
  133.       playButton.style.pointerEvents = "none";
  134.       volumeBar.style.pointerEvents = "none";
  135.       skipButton.style.pointerEvents = "none";
  136.       container.disabled = !container.disabled;
  137.       previousButton.disabled = !previousButton.disabled;
  138.       playButton.disabled = !playButton.disabled;
  139.       volumeBar.disabled = !volumeBar.disabled;
  140.       skipButton.disabled = !skipButton.disabled;
  141.     if (previousButton.disabled) {
  142.       previousButton.style.opacity = "1";
  143.       playButton.style.opacity = "1";
  144.       volumeBar.style.opacity = "0.5";
  145.       skipButton.style.opacity = "1";
  146.     } else {
  147.         container.style.opacity = "0.5";
  148.         volumeBar.style.backgroundTransparent = "0.01";
  149.         previousButton.style.backgroundTransparent = "0.01";
  150.         playButton.style.backgroundTransparent = "0.01";
  151.         skipButton.style.backgroundTransparent = "0.01";
  152.         container.style.pointerEvents = "auto";
  153.         previousButton.style.pointerEvents = "auto";
  154.         playButton.style.pointerEvents = "auto";
  155.         volumeBar.style.pointerEvents = "auto";
  156.         skipButton.style.pointerEvents = "auto";
  157.  
  158.     }
  159.     event.preventDefault();
  160.   }
  161. });
  162. })();