User:Toad64/Sandbox: Difference between revisionsGive feedback
No edit summary |
updated code in syntaxhighlight |
||
| Line 2: | Line 2: | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
// In your Common.js | // In your Common.js | ||
$(document).ready(function() { | $(document).ready(function() { | ||
| Line 28: | Line 26: | ||
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 35: | Line 35: | ||
width: 100%; | width: 100%; | ||
max-width: 400px; | max-width: 400px; | ||
background: var(-- | background: var(--background-color-base-border); | ||
padding: 10px 15px; | padding: 10px 15px; | ||
border-radius: 50px; | border-radius: 50px; | ||
color: | color: var(--color-base); | ||
font-family: sans-serif; | font-family: sans-serif; | ||
} | } | ||
| Line 44: | Line 44: | ||
width: 30px; | width: 30px; | ||
height: 30px; | height: 30px; | ||
background: var(-- | background: var(--background-color-interactive); | ||
border: none; | border: none; | ||
color: | color: var(--color-base); | ||
border-radius: 50%; | border-radius: 50%; | ||
cursor: pointer; | cursor: pointer; | ||
| Line 55: | Line 55: | ||
flex: 1; | flex: 1; | ||
height: 6px; | height: 6px; | ||
background: | background: var(--color-base); | ||
border-radius: 5px; | border-radius: 5px; | ||
cursor: pointer; | cursor: pointer; | ||
} | |||
.seek::-webkit-slider-thumb { | |||
-webkit-appearance: none; /* Override default look */ | |||
appearance: none; | |||
border-radius: 50px; | |||
width: 15px; | |||
height: 15px; | |||
background: var(--link-color); | |||
cursor: pointer; | |||
} | |||
.seek::-moz-range-thumb { | |||
border-radius: 50px; | |||
width: 15px; | |||
height: 15px; | |||
background: var(--link-color); | |||
cursor: pointer; | |||
} | } | ||
.time { font-size: 12px; opacity: 0.8; white-space: nowrap; } | .time { font-size: 12px; opacity: 0.8; white-space: nowrap; } | ||
| Line 64: | Line 82: | ||
<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 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 94: | ||
playBtn.addEventListener("click", () => { | playBtn.addEventListener("click", () => { | ||
if (audio.paused) { audio.play(); playBtn. | if (audio.paused) { audio.play(); playBtn.innerHTML = '<i class="fa-solid fa-pause"></i>'; } | ||
else { audio.pause(); playBtn. | else { audio.pause(); playBtn.innerHTML = '<i class="fa-solid fa-play"></i>'; } | ||
}); | }); | ||