☰

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

// ==UserScript==
// @name         Diep.io audio/music/sound beta
// @namespace    http://tampermonkey.net/
// @version      1.0
// @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.
// @author       -{Abyss⌬}-ora
// @match        https://diep.io
// @license      GNU GPLv3
// ==/UserScript==

(function() {
    'use strict';

    const audioPlayer = document.createElement("audio");
    audioPlayer.id = "audioPlayer";
    audioPlayer.controls = false;
    audioPlayer.loop = true;
    audioPlayer.autoplay = true;
    audioPlayer.volume = 0.05;

    const sources = [
        "https://github.com/Abyss-ora/dpaudio/raw/main/8-bit-arcade-138828.mp3",
        "https://github.com/Abyss-ora/dpaudio/raw/main/kim-lightyear-angel-eyes-chiptune-edit-110226.mp3",
        "https://github.com/Abyss-ora/dpaudio/raw/main/kim-lightyear-legends-109307.mp3"
    ];

    let currentTrack = 0;

    audioPlayer.src = sources[currentTrack];
    document.body.appendChild(audioPlayer);

    const container = document.createElement("div");
    container.style.display = "flex";
    container.style.alignItems = "center";
    container.style.justifyContent = "center";
    container.style.position = "fixed";
    container.style.bottom = "20px";
    container.style.left = "20px";
    container.style.backgroundColor = "white";
    container.style.borderRadius = "10px";
    container.style.padding = "10px";
    document.body.appendChild(container);

    const previousButton = document.createElement("button");
    previousButton.innerText = "⏪";
    previousButton.style.fontSize = "24px";
    previousButton.style.marginRight = "10px";
    container.appendChild(previousButton);

    const playButton = document.createElement("button");
    playButton.innerText = "▶️";
    playButton.style.fontSize = "24px";
    playButton.style.marginRight = "10px";
    container.appendChild(playButton);

    const volumeBar = document.createElement("input");
    volumeBar.type = "range";
    volumeBar.min = "0";
    volumeBar.max = "1";
    volumeBar.step = "0.01";
    volumeBar.value = audioPlayer.volume;
    volumeBar.style.width = "100px";
    volumeBar.style.marginRight = "10px";
    container.appendChild(volumeBar);

    const skipButton = document.createElement("button");
    skipButton.innerText = "⏩";
    skipButton.style.fontSize = "24px";
    skipButton.style.marginRight = "10px";
    container.appendChild(skipButton);

    function playPause() {
        if (audioPlayer.paused) {
            audioPlayer.play();
            playButton.innerText = "⏸";
        } else {
            audioPlayer.pause();
            playButton.innerText = "▶️";
        }
    }

    function previousTrack() {
        currentTrack = (currentTrack - 1 + sources.length) % sources.length;
        audioPlayer.src = sources[currentTrack];
        audioPlayer.play();
        playButton.innerText = "⏸";
    }

    function skipTrack() {
        currentTrack = (currentTrack + 1) % sources.length;
        audioPlayer.src = sources[currentTrack];
        audioPlayer.play();
        playButton.innerText = "⏸";
    }

    playButton.addEventListener("click", playPause);
    previousButton.addEventListener("click", previousTrack);
    skipButton.addEventListener("click", skipTrack);
    volumeBar.addEventListener("input", function() {
        audioPlayer.volume = volumeBar.value;
    });
})();