range播放器（初稿）

马黑黑 · 发表于 2025-3-22 18:52

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

00:00/00:00

马黑黑 · 发表于 2025-3-22 18:52

代码：

<style>
#mplayer {
--track: lightgreen;
--prog: darkgreen;
width: 400px;
height: fit-content;
font-size: 16px;
color: var(--prog);
background: none;
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
margin: 20px auto;
}
#prog {
-webkit-appearance: none;
flex-grow: 1;
background: none;
}
#prog::-webkit-slider-runnable-track {
background: linear-gradient(90deg, var(--track), var(--track)) no-repeat center / 100% 2px;
}
#prog::-webkit-slider-thumb {
-webkit-appearance: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: radial-gradient(var(--track) 30%, var(--prog) 40%, var(--prog) 100%);
cursor: pointer;
}
#prog::-moz-range-track {
background: linear-gradient(90deg, lightgreen, lightgreen) no-repeat center / 100% 6px;
}
#prog::-moz-range-thumb {
-webkit-appearance: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: radial-gradient(lightgreen 40%, green 45%, darkgreen 100%);
cursor: pointer;
}
#btnPlay {
width: 28px;
height: 28px;
border-radius: 25%;
box-shadow: inset 0 0 3px 0 var(--prog);
cursor: pointer;
display: grid;
place-items: center;
}
#btnPlay:hover::after {
opacity: .7;
}
#btnPlay::after {
content:'';
width: 16px;
height: 16px;
background: var(--prog);
clip-path: var(--clip);
}
.play {
--clip: polygon(10% 0, 100% 50%, 10% 100%);
}
.pause {
--clip: polygon(40% 0, 40% 100%, 20% 100%, 20% 0, 80% 0, 80% 100%, 60% 100%, 60% 0);
}
</style>
<div id="mplayer">
<div id="btnPlay" class="pause" title="Alt+X"></div>
<input id="prog" type="range" step="0.5" value="0" min="0" max="100" />
<div id="timebox">00:00/00:00</div>
</div>
<audio src="https://music.163.com/song/media/outer/url?id=1436384887" autoplay loop></audio>
<script>
let busy = false;
const aud = document.querySelector('audio');
const mState = () => {
if (aud.paused) {
btnPlay.className = 'play';
} else {
btnPlay.className = 'pause';
}
};
const formatTime = (seconds) => {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
aud.addEventListener('timeupdate', (e) => {
if (!busy) {
prog.value = aud.currentTime / aud.duration * 100;
timebox.innerText = formatTime(aud.currentTime) + '/' + formatTime(aud.duration);
}
});
btnPlay.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
prog.addEventListener('mousedown', () => busy = true);
prog.addEventListener('mouseup', () => {
aud.currentTime = aud.duration * prog.value / 100;
busy = false;
});
prog.addEventListener('input', () =>
timebox.innerText = formatTime(aud.duration * prog.value / 100) +
'/' + formatTime(aud.duration)
);
document.addEventListener('keydown', (e) => {
if (e.altKey && e.key === 'x') btnPlay.click();
});
</script>