The Deadlock Wiki

User:Toad64/Sandbox: Difference between revisions

Browse history interactively
← Older editNewer edit →

Toad64 (talk | contribs)

1 user group
480 edits
undo
VisualWikitext
Toad64 (talk | contribs)
Contributors
480 edits
IT WORKS
Toad64 (talk | contribs)
Contributors
480 edits
updated codeblock
Line 1: Line 1:
Using Javascript (and a set of ::root colors i had), It is possible to modify the default audio element used to play audio.
<div class="my-custom-player-wrapper"><syntaxhighlight lang="javascript">
<div class="my-custom-player-wrapper"><syntaxhighlight lang="javascript">
// gemini code  
// gemini code  
Line 17: Line 19:
});
});


// audioplayer.js (pulled from website)
// audioplayer.js (pulled and modified from website)
if (!customElements.get('audio-player')) {
if (!customElements.get('audio-player')) {
class AudioPlayer extends HTMLElement {
  class AudioPlayer extends HTMLElement {
 
    connectedCallback() {
  connectedCallback() {
      const src = this.getAttribute("track") || "";
 
       const ext = src.split(".").pop().toLowerCase();
    const song = this.getAttribute("song") || "";
      const mime = ext === "wav" ? "audio/wav" : "audio/mpeg";
    const artist = this.getAttribute("artist") || "";
    const src = this.getAttribute("track") || "";
    const cover = this.getAttribute("artcover") || "";
 
    const originalArtist =
       this.getAttribute("originalartist") || "";
 
    const originalSource =
      this.getAttribute("originalsource") || "";
 
    const ext = src.split(".").pop().toLowerCase();
 
    let mime = "audio/mpeg";
 
    if (ext === "wav") {
      mime = "audio/wav";
    }
 
    this.innerHTML = `
   
    <style>
 
      .player {
        display: flex;
        width: 100%;
        max-width: 500px;
        min-height: 150px;
        background: var(--box-color);
        color: white;
        border-radius: 12px;
        overflow: hidden;
        font-family: Arial, sans-serif;
      }
 
      .cover {
        width: 40%;
        object-fit: cover;
        background-color: #333;
        display: block;
      }
 
      .info {
        width: 60%;
        padding: 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 10px;
      }
 
      .meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }
 
      .leftmeta,
      .rightmeta {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
 
      h3 {
        margin: 0;
        font-size: 16px;
      }
 
      p {
        margin: 0;
        font-size: 12px;
        opacity: 0.7;
      }
 
      .credit {
        font-size: 11px;
        opacity: 0.6;
        line-height: 1.4;
      }
 
      .controls {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
      }


       .playBtn {
       this.innerHTML = `
        width: 24px;
        <style>
        height: 24px;
          .player-controls {
        background: var(--green-color);
            display: flex;
        border: none;
            align-items: center;
        color: white;
            gap: 12px;
        padding: 3px 8px;
            width: 100%;
        border-radius: 50px;
            max-width: 400px;
        cursor: pointer;
            background: var(--box-color, #222);
            padding: 10px 15px;
            border-radius: 50px;
            color: white;
            font-family: sans-serif;
          }
          .playBtn {
            width: 30px;
            height: 30px;
            background: var(--green-color, #4caf50);
            border: none;
            color: white;
            border-radius: 50%;
            cursor: pointer;
            flex-shrink: 0;
          }
          .seek {
            -webkit-appearance: none;
            flex: 1;
            height: 6px;
            background: #7e7e7e;
            border-radius: 5px;
            cursor: pointer;
          }
          .time { font-size: 12px; opacity: 0.8; white-space: nowrap; }
        </style>
          
          
         flex-shrink: 0;
         <div class="player-controls">
      }
           <audio class="audio"><source src="${src}" type="${mime}"></audio>
 
           <button class="playBtn">▶</button>
      .playBtn:hover {
           <input class="seek" type="range" value="0" min="0" max="100">
        background: var(--green-hover);
      }
 
      .playBtn:active {
        background: var(--green-active);
      }
 
      .seek {
        -webkit-appearance: none;
        appearance: none;
        border-radius: 50px;
        flex: 1;
        background-color: #7e7e7e;
        height: 7px;
        min-width: 0;
      }
 
      .seek::-webkit-slider-thumb {
        -webkit-appearance: none; /* Override default look */
        appearance: none;
        border-radius: 50px;
        width: 15px;
        height: 15px;
        background: var(--green-color);
        cursor: pointer;
      }
 
      .seek::-moz-range-thumb {
        border-radius: 50px;
        width: 15px;
        height: 15px;
        background: var(--green-color);
        cursor: pointer;
      }
 
      .time {
        font-size: 12px;
        opacity: 0.8;
        white-space: nowrap;
      }
 
      @media (max-width: 800px) {
 
        .player {
          flex-direction: column;
        }
 
        .cover {
          width: 100%;
          height: 180px;
        }
 
        .info {
          width: auto;
        }
 
        .meta {
          grid-template-columns: 1fr;
        }
 
        .controls {
          flex-wrap: wrap;
        }
 
        .time {
          width: 100%;
        }
 
      }
 
    </style>
 
    <div class="player">
 
      <img class="cover" src="${cover}" alt="${song} cover art">
 
      <div class="info">
 
        <div class="meta">
 
          <div class="leftmeta">
 
            <h3>${song}</h3>
 
            <p>${artist}</p>
 
           </div>
 
          <div class="rightmeta">
 
            <div class="credit">
              Original Artist: ${originalArtist}
            </div>
 
            <div class="credit">
              Original Source: ${originalSource}
            </div>
 
          </div>
 
        </div>
 
        <audio class="audio">
          <source src="${src}" type="${mime}">
        </audio>
 
        <div class="controls">
 
           <button class="playBtn"><i class="fa-solid fa-play"></i></button>
 
           <input
            class="seek"
            type="range"
            value="0"
            min="0"
            max="100">
 
           <span class="time">0:00 / 0:00</span>
           <span class="time">0:00 / 0:00</span>
         </div>
         </div>
      `;


       </div>
       const audio = this.querySelector(".audio");
 
      const playBtn = this.querySelector(".playBtn");
    </div>
      const seek = this.querySelector(".seek");
    `;
      const time = this.querySelector(".time");
 
    // component-local elements
    const audio = this.querySelector(".audio");
    const playBtn = this.querySelector(".playBtn");
    const seek = this.querySelector(".seek");
    const time = this.querySelector(".time");


    // play / pause
      playBtn.addEventListener("click", () => {
    playBtn.addEventListener("click", () => {
        if (audio.paused) { audio.play(); playBtn.textContent = '⏸'; }
        else { audio.pause(); playBtn.textContent = '▶'; }
      });


       if (audio.paused) {
       audio.addEventListener("timeupdate", () => {
        seek.value = (audio.currentTime / audio.duration) * 100 || 0;
        time.textContent = formatTime(audio.currentTime) + " / " + formatTime(audio.duration);
      });


        audio.play();
      seek.addEventListener("input", () => {
        playBtn.innerHTML = '⏸';
         audio.currentTime = (seek.value / 100) * audio.duration;
 
      });
      } else {
 
         audio.pause();
        playBtn.innerHTML = '▶';


      function formatTime(sec) {
        if (isNaN(sec)) return "0:00";
        const m = Math.floor(sec / 60);
        const s = Math.floor(sec % 60).toString().padStart(2, "0");
        return `${m}:${s}`;
       }
       }
    });
    // update seek bar + time
    audio.addEventListener("timeupdate", () => {
      seek.value =
        (audio.currentTime / audio.duration) * 100 || 0;
      time.textContent =
        formatTime(audio.currentTime)
        + " / " +
        formatTime(audio.duration);
    });
    // seeking
    seek.addEventListener("input", () => {
      audio.currentTime =
        (seek.value / 100) * audio.duration;
    });
    // reset button when song ends
    audio.addEventListener("ended", () => {
      playBtn.innerHTML = '▶';
    });
    // format time helper
    function formatTime(sec) {
      if (isNaN(sec)) return "0:00";
      const m = Math.floor(sec / 60);
      const s = Math.floor(sec % 60)
        .toString()
        .padStart(2, "0");
      return `${m}:${s}`;
     }
     }
   }
   }
 
  customElements.define("audio-player", AudioPlayer);
}
}
</syntaxhighlight>


customElements.define("audio-player", AudioPlayer);
This code creates a styleized media player (in this example the Curiosity Shop Music):
}
</syntaxhighlight>This code creates this (visually bugged but code is functional):
  [[File:Curio music.mp3]]
  [[File:Curio music.mp3]]
</div>
</div>
Retrieved from "https://deadlock.wiki/User:Toad64/Sandbox"