Editing User:Toad64/Sandbox

Jump to navigation Jump to search
Warning: You are not logged in. Once you make an edit, a temporary account will be created for you. Learn more. Log in or create an account to continue receiving notifications after this account expires, and to access other features.
The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then publish the changes below to finish undoing the edit.
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)
<div class="my-custom-player-wrapper"><syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
// gemini code  
// gemini code  


// In your Common.js
// In your Common.js
$(document).ready(function() {
$(document).ready(function() {
    // Find every native audio player generated by the wiki
     $('audio').each(function() {
     $('audio').each(function() {
         const $this = $(this);
        // Create your custom component
         const src = $this.attr('src');
         const myPlayer = document.createElement('audio-player');
          
        // Transfer the source
        myPlayer.setAttribute('track', $(this).attr('src'));
          
          
         // Log what we found to the console so we can see why it's undefined
         // Replace the native player with your custom one
         console.log("Processing element:", this);
         $(this).replaceWith(myPlayer);
        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)
// audioplayer.js (pulled from website)
if (!customElements.get('audio-player')) {
if (!customElements.get('audio-player')) {
  class AudioPlayer extends HTMLElement {
class AudioPlayer extends HTMLElement {
    connectedCallback() {
 
      const src = this.getAttribute("track") || "";
  connectedCallback() {
       const ext = src.split(".").pop().toLowerCase();
 
      const mime = ext === "wav" ? "audio/wav" : "audio/mpeg";
    const song = this.getAttribute("song") || "";
    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;
      }


       this.innerHTML = `
       p {
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
        margin: 0;
   
         font-size: 12px;
         <style>
        opacity: 0.7;
          .player-controls {
      }
            display: flex;
 
            align-items: center;
      .credit {
            gap: 12px;
        font-size: 11px;
           
        opacity: 0.6;
            width: 100%;
        line-height: 1.4;
            max-width: 400px;
      }
padding: 10px 15px;
 
            border-radius: 50px;
      .controls {
           
        display: flex;
            background: var(--background-color-base-subtle);
        align-items: center;
            color: var(--color-base);
        gap: 10px;
            font-family: sans-serif;
        width: 100%;
            box-sizing: border-box;  
      }
overflow: hidden;
 
          }
      .playBtn {
         
        width: 24px;
          .playBtn {
        height: 24px;
            flex-shrink: 0;
        background: var(--green-color);
         
        border: none;
            width: 30px;
        color: white;
            height: 30px;
        padding: 3px 8px;
            border: none;
        border-radius: 50px;
            border-radius: 50%;
        cursor: pointer;
           
            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">
         flex-shrink: 0;
           <audio class="audio"><source src="${src}" type="${mime}"></audio>
      }
 
      .playBtn:hover {
        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>
           <button class="playBtn"><i class="fa-solid fa-play"></i></button>
           <input class="seek" type="range" value="0" min="0" max="100">
 
           <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>
      `;


       const audio = this.querySelector(".audio");
       </div>
      const playBtn = this.querySelector(".playBtn");
 
      const seek = this.querySelector(".seek");
    </div>
      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", () => {
 
      if (audio.paused) {


      playBtn.addEventListener("click", () => {
         audio.play();
         if (audio.paused) { audio.play(); playBtn.innerHTML = '<i class="fa-solid fa-pause"></i>'; }
         playBtn.innerHTML = '⏸';
         else { audio.pause(); playBtn.innerHTML = '<i class="fa-solid fa-play"></i>'; }
      });


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


      seek.addEventListener("input", () => {
        audio.pause();
         audio.currentTime = (seek.value / 100) * audio.duration;
         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>


In this example, the Old Deadlock Title Screen:
customElements.define("audio-player", AudioPlayer);
 
}
[[File:Music menu lp.mp3]]
</syntaxhighlight>This code creates this (visually bugged but code is functional):
[[File:Curio music.mp3]]
</div>
Please note that all contributions to The Deadlock Wiki are considered to be released under the Creative Commons Attribution-NonCommercial-ShareAlike (see Deadlock:Copyrights for details). If you do not want your writing to be edited mercilessly and redistributed at will, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource. Do not submit copyrighted work without permission!
Cancel Editing help (opens in new window)
Retrieved from "https://deadlock.wiki/User:Toad64/Sandbox"