☰

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-05 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Diep.io audio/music/sound beta
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.01
  5. // @homepage     https://greasyfork.org/en/scripts/461192
  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.     ];
  28.  
  29.     let currentTrack = 0;
  30.  
  31.     audioPlayer.src = sources[currentTrack];
  32.     document.body.appendChild(audioPlayer);
  33.  
  34.     const container = document.createElement("div");
  35.     container.style.opacity = "0.5";
  36.     container.style.display = "flex";
  37.     container.style.alignItems = "center";
  38.     container.style.justifyContent = "center";
  39.     container.style.position = "fixed";
  40.     container.style.top = "10px";
  41.     container.style.left = "350px";
  42.     container.style.backgroundImage = "url('https://media.tenor.com/images/f3f5354b7c304bc61882dbb1183885e7/tenor.gif')";
  43.     container.style.backgroundRepeat = "repeat";
  44.     container.style.backgroundAttachment = "fixed";
  45.     container.style.backgroundSize = "160px 100px";
  46.     container.style.padding = "5px";
  47.     container.style.borderRadius = "5 5px 5px 5";
  48.     container.style.borderStyle = "solid";
  49.     container.style.borderWidth = "thick";
  50.     container.style.borderTopRightRadius = "20px 50px";
  51.     container.style.borderTopLeftRadius = "20px 50px";
  52.     container.style.borderStyle = "double";
  53.     container.style.borderBottomRightRadius = "20px 50px";
  54.     container.style.borderBottomLeftRadius = "20px 50px";
  55.     container.style.borderTopColor = "lightpink";
  56.     container.style.borderLeftColor = "lightgray";
  57.     container.style.borderBottomColor = "lightpink";
  58.     container.style.borderRightColor = "lightgray";
  59.     document.body.appendChild(container);
  60.  
  61.     const previousButton = document.createElement("button");
  62.     previousButton.innerText = "⏪";
  63.     previousButton.style.fontSize = "24px";
  64.     previousButton.style.marginRight = "10px";
  65.     previousButton.style.borderTopColor = "lightpink";
  66.     previousButton.style.backgroundTransparent = "0.01";
  67.     container.appendChild(previousButton);
  68.  
  69.     const playButton = document.createElement("button");
  70.     playButton.innerText = "▶️";
  71.     playButton.style.fontSize = "24px";
  72.     playButton.style.marginRight = "10px";
  73.     playButton.style.borderTopColor = "lightpink";
  74.     playButton.style.backgroundTransparent = "0.01";
  75.     container.appendChild(playButton);
  76.  
  77.     const volumeBar = document.createElement("input");
  78.     volumeBar.type = "range";
  79.     volumeBar.min = "0";
  80.     volumeBar.max = "1";
  81.     volumeBar.step = "0.01";
  82.     volumeBar.value = audioPlayer.volume;
  83.     volumeBar.style.width = "100px";
  84.     volumeBar.style.marginRight = "10px";
  85.     container.appendChild(volumeBar);
  86.  
  87.     const skipButton = document.createElement("button");
  88.     skipButton.innerText = "⏩";
  89.     skipButton.style.fontSize = "24px";
  90.     skipButton.style.marginRight = "10px";
  91.     skipButton.style.borderTopColor = "lightpink";
  92.     skipButton.style.backgroundTransparent = "0.01";
  93.     container.appendChild(skipButton);
  94.  
  95.     function playPause() {
  96.         if (audioPlayer.paused) {
  97.             audioPlayer.play();
  98.             playButton.innerText = "⏸";
  99.         } else {
  100.             audioPlayer.pause();
  101.             playButton.innerText = "▶️";
  102.         }
  103.     }
  104.  
  105.     function previousTrack() {
  106.         currentTrack = (currentTrack - 1 + sources.length) % sources.length;
  107.         audioPlayer.src = sources[currentTrack];
  108.         audioPlayer.play();
  109.         playButton.innerText = "⏸";
  110.     }
  111.  
  112.     function skipTrack() {
  113.         currentTrack = (currentTrack + 1) % sources.length;
  114.         audioPlayer.src = sources[currentTrack];
  115.         audioPlayer.play();
  116.         playButton.innerText = "⏸";
  117.     }
  118.  
  119.     playButton.addEventListener("click", playPause);
  120.     previousButton.addEventListener("click", previousTrack);
  121.     skipButton.addEventListener("click", skipTrack);
  122.     volumeBar.addEventListener("input", function() {
  123.         audioPlayer.volume = volumeBar.value;
  124.     });
  125. })();