又一个漂亮的单标签音频播放器
位置:
首页 >
代码集锦[ 发布时间: 2024.6.10 作者: 马黑 阅读: 94 ]
<style>
#player {
position: absolute;
left: 120px;
top: 120px;
width: 280px;
height:10px;
background: linear-gradient(to right, var(--color) var(--prg), transparent 0);
border: 1px solid var(--color);
border-radius: 6px;
display: grid;
place-items: center;
--color: #f58be8;
--prg: 0%;
--btnSize: 50px;
}
#player::before, #player::after { position: absolute; content: ''; }
#player::before {
width: var(--btnSize);
height: var(--btnSize);
top: calc(var(--btnSize) * -1 - 5px);
background: url('https://638183.freep.cn/638183/t23/btn/f5.png') no-repeat center/cover;
animation: rot 6s linear infinite var(--state);
}
#player::after {
content: attr(data-time);
inset: -30px 0 10px 0;
text-align: justify;
text-align-last: justify;
font-size: 14px;
color: var(--color);
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="player" data-time="00:00 00:00"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=28684483" autoplay loop></audio>
<script>
const vids = document.querySelectorAll('.vid');
const btnSize = parseInt(window.getComputedStyle(player).getPropertyValue('--btnSize'));
const mState = () => {
player.style.setProperty('--state',['running','paused'][+aud.paused]);
if(vids.length > 0) vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};
const s2m = (s) => (Math.floor(s / 60)).toString().padStart(2, '0') + ':' + (Math.floor(s % 60)).toString().padStart(2, '0');
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
player.style.setProperty('--prg', (aud.currentTime / aud.duration * 100 || 0) + '%');
player.dataset.time = s2m(aud.currentTime) + ' ' + s2m(aud.duration);
}
player.onclick = (e) => {
if(e.offsetY > 0) aud.currentTime = aud.duration * e.offsetX / player.offsetWidth;
if(e.offsetY < 0 && e.offsetX > player.offsetWidth / 2 - btnSize / 2 && e.offsetX < player.offsetWidth / 2 + btnSize / 2) aud.paused ? aud.play() : aud.pause();
}
player.onmousemove = (e) => {
if(e.offsetY < 0) {
if(e.offsetX > player.offsetWidth / 2 - btnSize / 2 && e.offsetX < player.offsetWidth / 2 + btnSize / 2) {
player.title = aud.paused ? '播放' : '暂停';
player.style.cursor = 'pointer';
}
}else{
player.title = '调节进度';
player.style.cursor = 'pointer';
}
};
</script>
前一篇: JS：节点克隆演示
下一篇: CSS关键帧动画实现小球循环碰撞
发表评论:
评论列表 [1条]
#1 | 悄然 于 2024-6-10 16:34 发布: 这个小播着实小巧可爱，颜值满分。。
