0:00 / –:––
body {
margin: 0;
background: #1a3a6b;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: sans-serif;
}
.player {
background: #1e4080;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 8px;
padding: 14px 18px;
display: flex;
flex-direction: column;
gap: 10px;
width: 300px;
}
.controls {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
button {
background: none;
border: none;
cursor: pointer;
color: #c8deff;
padding: 0;
display: flex;
align-items: center;
line-height: 1;
}
button:hover { color: #fff; }
.bottom {
display: flex;
align-items: center;
gap: 8px;
}
input[type=range] {
-webkit-appearance: none;
appearance: none;
height: 3px;
border-radius: 2px;
background: rgba(255,255,255,0.2);
outline: none;
cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 10px; height: 10px;
border-radius: 50%;
background: #fff;
cursor: pointer;
}
#scrubber { width: 100%; }
#volSlider { width: 70px; flex-shrink: 0; }
.time {
font-family: monospace;
font-size: 10px;
color: rgba(200,222,255,0.55);
white-space: nowrap;
margin-left: auto;
}
const audio = document.getElementById(‘audio’);
const playBtn = document.getElementById(‘playBtn’);
const iconPlay = document.getElementById(‘iconPlay’);
const iconPause = document.getElementById(‘iconPause’);
const scrubber = document.getElementById(‘scrubber’);
const volSlider = document.getElementById(‘volSlider’);
const cur = document.getElementById(‘cur’);
const dur = document.getElementById(‘dur’);
function fmt(s) {
if (!isFinite(s)) return ‘–:––’;
return Math.floor(s/60) + ‘:’ + Math.floor(s%60).toString().padStart(2,’0′);
}
playBtn.addEventListener(‘click’, () => audio.paused ? audio.play() : audio.pause());
audio.addEventListener(‘play’, () => { iconPlay.style.display=’none’; iconPause.style.display=”; });
audio.addEventListener(‘pause’, () => { iconPlay.style.display=”; iconPause.style.display=’none’; });
audio.addEventListener(‘ended’, () => { iconPlay.style.display=”; iconPause.style.display=’none’; });
audio.addEventListener(‘loadedmetadata’, () => { dur.textContent = fmt(audio.duration); });
audio.addEventListener(‘timeupdate’, () => {
scrubber.value = audio.duration ? (audio.currentTime / audio.duration) * 100 : 0;
cur.textContent = fmt(audio.currentTime);
});
scrubber.addEventListener(‘input’, () => { if (audio.duration) audio.currentTime = (scrubber.value/100) * audio.duration; });
volSlider.addEventListener(‘input’, () => { audio.volume = volSlider.value; });
document.getElementById(‘rwdBtn’).addEventListener(‘click’, () => { audio.currentTime = Math.max(0, audio.currentTime – 10); });
document.getElementById(‘fwdBtn’).addEventListener(‘click’, () => { audio.currentTime = Math.min(audio.duration||0, audio.currentTime + 10); });
eleftherioskrysalis.info 
Leave a comment