User:Toad64/Sandbox

Using Javascript (and a set of ::root colors i had), It is possible to modify the default audio element used to play audio.

// gemini code 

// In your Common.js
$(document).ready(function() {
    // Find every native audio player generated by the wiki
    $('audio').each(function() {
        // Create your custom component
        const myPlayer = document.createElement('audio-player');
        
        // Transfer the source
        myPlayer.setAttribute('track', $(this).attr('src'));
        
        // Replace the native player with your custom one
        $(this).replaceWith(myPlayer);
    });
});

// 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 = `
        <style>
          .player-controls {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            max-width: 400px;
            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>
        
        <div class="player-controls">
          <audio class="audio"><source src="${src}" type="${mime}"></audio>
          <button class="playBtn">▶</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.textContent = '⏸'; }
        else { audio.pause(); playBtn.textContent = '▶'; }
      });

      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);
}

This code creates a styleized media player (in this example the Curiosity Shop Music):