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
updated codeblock
Toad64 (talk | contribs)
Contributors
480 edits
No edit summary
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
Using Javascript (and a set of ::root colors i had), It is possible to modify the default audio element used to play audio.
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() {
         // Create your custom component
         const $this = $(this);
         const myPlayer = document.createElement('audio-player');
         const src = $this.attr('src');
          
          
         // Transfer the source
         // Log what we found to the console so we can see why it's undefined
         myPlayer.setAttribute('track', $(this).attr('src'));
         console.log("Processing element:", this);
          
        console.log("Source found:", src);
        // Replace the native player with your custom one
 
        $(this).replaceWith(myPlayer);
         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);
        }
     });
     });
});
});
Line 28: Line 33:


       this.innerHTML = `
       this.innerHTML = `
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   
         <style>
         <style>
           .player-controls {
           .player-controls {
Line 33: Line 40:
             align-items: center;
             align-items: center;
             gap: 12px;
             gap: 12px;
           
             width: 100%;
             width: 100%;
             max-width: 400px;
             max-width: 400px;
            background: var(--box-color, #222);
padding: 10px 15px;
            padding: 10px 15px;
             border-radius: 50px;
             border-radius: 50px;
             color: white;
           
            background: var(--background-color-base-subtle);
             color: var(--color-base);
             font-family: sans-serif;
             font-family: sans-serif;
            box-sizing: border-box;
overflow: hidden;
           }
           }
         
           .playBtn {
           .playBtn {
            flex-shrink: 0;
         
             width: 30px;
             width: 30px;
             height: 30px;
             height: 30px;
            background: var(--green-color, #4caf50);
             border: none;
             border: none;
            color: white;
             border-radius: 50%;
             border-radius: 50%;
           
            align-items: center;
    justify-content: center;
           
            background: var(--background-color-interactive);
            color: var(--color-base);
             cursor: pointer;
             cursor: pointer;
             flex-shrink: 0;
              
          }
         
          .playBtn:hover {
        background: var(--background-color-interactive-subtle);
           }
           }
         
           .seek {
           .seek {
            -webkit-appearance: none;
        flex: 1;
             flex: 1;
        -webkit-appearance: none;
             appearance: none;
           
             height: 6px;
             height: 6px;
            background: #7e7e7e;
             border-radius: 5px;
             border-radius: 5px;
           
            background: var(--color-base);
             cursor: pointer;
             cursor: pointer;
           }
           }
           .time { font-size: 12px; opacity: 0.8; white-space: nowrap; }
         
          .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>
         </style>
          
          
         <div class="player-controls">
         <div class="player-controls">
           <audio class="audio"><source src="${src}" type="${mime}"></audio>
           <audio class="audio"><source src="${src}" type="${mime}"></audio>
           <button class="playBtn">▶</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>
Line 76: Line 131:


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


Line 101: Line 156:
</syntaxhighlight>
</syntaxhighlight>


This code creates a styleized media player (in this example the Curiosity Shop Music):
In this example, the Old Deadlock Title Screen:
[[File:Curio music.mp3]]
 
</div>
[[File:Music menu lp.mp3]]
Retrieved from "https://deadlock.wiki/User:Toad64/Sandbox"