User:Toad64/Sandbox: Difference between revisionsGive feedback

Browse history interactively

← Older edit

VisualWikitext

@@ Line 1: / Line 1: @@
-<div class="my-custom-player-wrapper">
+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)
- [[File:Curio music.mp3]]
-</div>
-<audio-player
+<syntaxhighlight lang="javascript">
-song="Curio Shop"
+// gemini code
-artist="Valve Orchestra" originalartist="N/A"
-originalsource="N/A"
+// In your Common.js
-track="https://deadlock.wikiFile:Curio_music.mp3" artcover="">
+$(document).ready(function() {
+    $('audio').each(function() {
+        const $this = $(this);
+        const src = $this.attr('src');
+        // 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]]

User:Toad64/Sandbox: Difference between revisionsGive feedback

Toad64 (talk | contribs)