| Latest revision |
Your text |
| Line 1: |
Line 1: |
| 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]] |
|
| |
|
| <syntaxhighlight lang="javascript">
| |
| // gemini code
| |
|
| |
|
| // In your Common.js
| | <div class="custom-audio-player"> |
| $(document).ready(function() {
| | <button id="p-play" style="background:#36c; color:white; border:none; border-radius:50%; width:30px; height:30px; cursor:pointer;">▶</button> |
| $('audio').each(function() {
| | <span id="p-current" style="font-size:12px; font-family:monospace;">0:00</span> |
| const $this = $(this);
| | <input type="range" id="p-seeker" class="mw-seeker" min="0" value="0" step="0.1"> |
| const src = $this.attr('src');
| | <audio id=" p-audio" src=" URL_HERE" preload=" metadata"></audio> |
|
| | </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]]
| |