The Deadlock Wiki

User:Toad64/Sandbox: Difference between revisions

Browse history interactively
← Older edit

Toad64 (talk | contribs)

1 user group
480 edits
undo
VisualWikitext
Toad64 (talk | contribs)
Contributors
480 edits
No edit summary
Toad64 (talk | contribs)
Contributors
480 edits
No edit summary
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
[[File:Curio music.mp3]]
Using Javascript, It is possible to modify the default audio element used to play audio. This code replaces the standard webkit media player with a stylized version. (Currently for chromium browsers only)


<syntaxhighlight lang="javascript">
// gemini code


<div class="custom-audio-player">
// In your Common.js
    <button id="p-play" style="background:#36c; color:white; border:none; border-radius:50%; width:30px; height:30px; cursor:pointer;">▶</button>
$(document).ready(function() {
    <span id="p-current" style="font-size:12px; font-family:monospace;">0:00</span>
    $('audio').each(function() {
    <input type="range" id="p-seeker" class="mw-seeker" min="0" value="0" step="0.1">
        const $this = $(this);
    <audio id="p-audio" src="URL_HERE" preload="metadata"></audio>
        const src = $this.attr('src');
</div>
       
        // Log what we found to the console so we can see why it's undefined
        console.log("Processing element:", this);
        console.log("Source found:", src);
 
        if (src) {
            const myPlayer = document.createElement('audio-player');
            myPlayer.setAttribute('track', src);
            $this.replaceWith(myPlayer);
        } else {
            console.warn("Skipping element because src is undefined:", this);
        }
    });
});
 
// audioplayer.js (pulled and modified from website)
if (!customElements.get('audio-player')) {
  class AudioPlayer extends HTMLElement {
    connectedCallback() {
      const src = this.getAttribute("track") || "";
      const ext = src.split(".").pop().toLowerCase();
      const mime = ext === "wav" ? "audio/wav" : "audio/mpeg";
 
      this.innerHTML = `
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   
        <style>
          .player-controls {
            display: flex;
            align-items: center;
            gap: 12px;
           
            width: 100%;
            max-width: 400px;
padding: 10px 15px;
            border-radius: 50px;
           
            background: var(--background-color-base-subtle);
            color: var(--color-base);
            font-family: sans-serif;
            box-sizing: border-box;
overflow: hidden;
          }
         
          .playBtn {
            flex-shrink: 0;
         
            width: 30px;
            height: 30px;
            border: none;
            border-radius: 50%;
           
            align-items: center;
    justify-content: center;
           
            background: var(--background-color-interactive);
            color: var(--color-base);
            cursor: pointer;
           
          }
         
          .playBtn:hover {
        background: var(--background-color-interactive-subtle);
          }
         
          .seek {
        flex: 1;
        -webkit-appearance: none;
            appearance: none;
           
            height: 6px;
            border-radius: 5px;
           
            background: var(--color-base);
            cursor: pointer;
          }
         
          .seek::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
       
        width: 15px;
        height: 15px;
        border-radius: 50px;
       
        background: var(--link-color);
        cursor: pointer;
      }
     
      .seek::-moz-range-thumb {
    -webkit-appearance: none;
        appearance: none;
       
        width: 15px;
        height: 15px;
        border-radius: 50px;
       
        background: var(--link-color);
        cursor: pointer;
          }
         
          .time {
        font-size: 12px;
        opacity: 0.8;
        white-space: nowrap;
          }
        </style>
       
        <div class="player-controls">
          <audio class="audio"><source src="${src}" type="${mime}"></audio>
          <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>
        </div>
      `;
 
      const audio = this.querySelector(".audio");
      const playBtn = this.querySelector(".playBtn");
      const seek = this.querySelector(".seek");
      const time = this.querySelector(".time");
 
      playBtn.addEventListener("click", () => {
        if (audio.paused) { audio.play(); playBtn.innerHTML = '<i class="fa-solid fa-pause"></i>'; }
        else { audio.pause(); playBtn.innerHTML = '<i class="fa-solid fa-play"></i>'; }
      });
 
      audio.addEventListener("timeupdate", () => {
        seek.value = (audio.currentTime / audio.duration) * 100 || 0;
        time.textContent = formatTime(audio.currentTime) + " / " + formatTime(audio.duration);
      });
 
      seek.addEventListener("input", () => {
        audio.currentTime = (seek.value / 100) * audio.duration;
      });
 
      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>
 
In this example, the Old Deadlock Title Screen:
 
[[File:Music menu lp.mp3]]
Retrieved from "https://deadlock.wiki/User:Toad64/Sandbox"