黑氏时钟播改进版关联音乐

马黑黑 · 发表于 2023-3-16 20:05

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

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

x

00:00 00:00

马黑黑 · 发表于 2023-3-16 20:06

代码

<style>
#clock {
margin: 50px auto;
width: 200px;
height: 200px;
background: lightgreen;
box-shadow: 0 0 40px black inset, 0 0 60px snow inset;
filter: drop-shadow(0 0 20px #000);
border-radius: 50%;
border: 8px solid black;
display: grid;
place-items: center;
position: relative;
cursor: pointer;
opacity: .8;
--state: paused;
}
#clock::before, #clock::after {
position: absolute;
content: '';
width: 6px;
height: 98px;
}
#clock::after {
--deg: 360deg;
bottom: 50%;
background: green;
opacity: .75;
transform-origin: 50% 100%;
animation: rot var(--time) infinite linear var(--state);
}
#clock::before {
--deg: 15deg;
top: 50%;
background: black;
transform: rotate(-15deg);
transform-origin: 50% 0;
animation: rot .5s infinite alternate linear var(--state);
}
#clock > span {
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
background: black;
z-index: 2;
}
#clock > span:nth-of-type(2) {
top: -7px;
width: 6px;
height: 6px;
background: lightgreen;
}
@keyframes rot {
to {transform: rotate(var(--deg)); }
}
</style>
<div id="clock">00:00 00:00<span></span><span></span></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5237700" loop autoplay></audio>
<script>
let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
clock.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => clock.style.setProperty('--state','running'));
aud.addEventListener('pause', () => clock.style.setProperty('--state','paused'));
aud.addEventListener('canplay', () => clock.style.setProperty('--time',aud.duration + 's'));
aud.addEventListener('timeupdate', () => clock.innerHTML = toMin(aud.currentTime) + ' ' + toMin(aud.duration) + '<span></span><span></span>');
</script>

复制代码

马黑黑 · 发表于 2023-3-16 20:26

很容易会发现，音频播放进度指针的运行是平滑的。这是使用关键帧动画实现进度指示的缘故，和之前的相比，不再是监听audio的timeupdate事件完成进度指示——timeupdate基本以秒为频率单位，进度指示的运行因此不太可能平滑。

且，本次改进，节拍器和进度指示的指针共享同一个CSS关键帧动画，通过CSS变量，必要之处结合JS，静态或动态传达变量值，达成整体动态效果。

时钟仍然是单元素构成，但加入了两个子元素 span 作为附件，用于修饰时钟：其一是播放进度的起点（也是终点），其二是两个指针的根。