简单模拟卡式磁带（预览版）
本帖最后由 马黑黑 于 2023-8-14 12:00 编辑 <br /><br /><style>#mplayer {
margin: 20px auto;
width: 200px;
height: 120px;
background: linear-gradient(tan,navy,transparent);
box-shadow: 0 0 8px #666, 0 0 50px #999 inset, 0 0 20px #666;
color: antiquewhite;
display: grid;
place-items: center;
position: relative;
--prg: 25%; --state: paused;
}
#mplayer > span { position: absolute; }
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
}
#mplayer::before {
left: 6px;
top: 6px;
width: 10px;
height: 10px;
border-radius: 50%;
background: gray;
box-shadow: 178px 0 0 gray, 0 98px 0 0 gray, 178px 98px 0 0 gray;
}
/*
#mplayer::after {
width: 78px;
height: 24px;
border-radius: 24px;
background: lightgray;
}
*/
#btnP1, #btnP2 {
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid silver;
display: grid;
place-items: center;
cursor: pointer;
animation: rot 5s infinite linear var(--state);
}
#btnP1 {
left: 20px;
background: gray radial-gradient(
transparent,
transparent 20%,
#000 calc(20% + 1px),
#000 calc(100% - var(--prg)),
transparent calc(100% - var(--prg) + 1px),
transparent 0
);
}
#btnP2 {
right: 20px;
background: gray radial-gradient(
transparent,
transparent 20%,
#000 calc(20% + 1px),
#000 var(--prg),
transparent calc(var(--prg) + 1px),
transparent 0
);
}
#btnP1::after, #btnP2::after {
position: absolute;
content: '';
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px dotted rgba(250,250,250,.7);
}
#titP { top: 10px; font-size: 12px; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="mplayer">
<span id="titP">HCPlayer</span>
<span id="btnP1"></span>
<span id="btnP2"></span>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1488294593" loop autoplay></audio>
<script>
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {
let prg = aud.currentTime / aud.duration * 100 + 20;
mplayer.style.setProperty('--prg', prg + '%');
});
btnP1.onclick = btnP2.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
本帖最后由 马黑黑 于 2023-8-14 12:00 编辑
简单模拟，没有追求逼真外观效果。网上这类作品有很逼真的，有兴趣的朋友可以去搜搜。本帖代码原创，代码如下：<style>
#mplayer {
margin: 20px auto;
width: 200px;
height: 120px;
background: linear-gradient(tan,navy,transparent);
box-shadow: 0 0 8px #666, 0 0 50px #999 inset, 0 0 20px #666;
color: antiquewhite;
display: grid;
place-items: center;
position: relative;
--prg: 25%; --state: paused;
}
#mplayer > span { position: absolute; }
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
}
#mplayer::before {
left: 6px;
top: 6px;
width: 10px;
height: 10px;
border-radius: 50%;
background: gray;
box-shadow: 178px 0 0 gray, 0 98px 0 0 gray, 178px 98px 0 0 gray;
}
/*
#mplayer::after {
width: 78px;
height: 24px;
border-radius: 24px;
background: lightgray;
}
*/
#btnP1, #btnP2 {
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid silver;
display: grid;
place-items: center;
cursor: pointer;
animation: rot 5s infinite linear var(--state);
}
#btnP1 {
left: 20px;
background: gray radial-gradient(
transparent,
transparent 20%,
#000 calc(20% + 1px),
#000 calc(100% - var(--prg)),
transparent calc(100% - var(--prg) + 1px),
transparent 0
);
}
#btnP2 {
right: 20px;
background: gray radial-gradient(
transparent,
transparent 20%,
#000 calc(20% + 1px),
#000 var(--prg),
transparent calc(var(--prg) + 1px),
transparent 0
);
}
#btnP1::after, #btnP2::after {
position: absolute;
content: '';
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px dotted rgba(250,250,250,.7);
}
#titP { top: 10px; font-size: 12px; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="mplayer">
<span id="titP">HCPlayer</span>
<span id="btnP1"></span>
<span id="btnP2"></span>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1488294593" loop autoplay></audio>
<script>
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {
let prg = aud.currentTime / aud.duration * 100 + 20;
mplayer.style.setProperty('--prg', prg + '%');
});
btnP1.onclick = btnP2.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
代码略多，没办法，旧式磁带其实很多细节都还木有去还原，只是做个大概。
两个卡轮速度没有区别对待，它们应该是不同的。 已经很像了，这个好玩{:4_199:} 支持原创{:4_178:} 好像一曲播完，两个卡轮颜色还换了换呢。
其实可以直接用个卡带图片加两个卡轮也可以的吧，这样就不用去用代码模拟底板了啊{:4_173:} 老师又写了个新的小播。。。实物式的。。这个好看。。{:4_199:}
看到了卡式磁带，又勾起了我对往事的回忆。那个时候，卡什磁带是多么时髦啊。 醉美水芙蓉 发表于 2023-8-14 11:35
这个设计漂亮！
谢谢 {:4_190:} 红影 发表于 2023-8-14 09:02
已经很像了，这个好玩
粗糙的，相关的设计、算法还没有认真弄 梦油 发表于 2023-8-14 11:26
看到了卡式磁带，又勾起了我对往事的回忆。那个时候，卡什磁带是多么时髦啊。
年轻人可能都木有卡式磁带这个概念。不过，卡式磁带没有消亡，它们还有用途。 花飞飞 发表于 2023-8-14 09:14
老师又写了个新的小播。。。实物式的。。这个好看。。
网上有更逼真的 红影 发表于 2023-8-14 09:07
好像一曲播完，两个卡轮颜色还换了换呢。
其实可以直接用个卡带图片加两个卡轮也可以的吧，这样就不用去用 ...
用图片是个好主意，不过不用图片更好控制 红影 发表于 2023-8-14 09:04
支持原创
感谢感谢，俺们这呢，绝大多数都是原创的 红影 发表于 2023-8-14 09:02
已经很像了，这个好玩
感谢 {:4_190:} 马黑黑 发表于 2023-8-14 12:10
网上有更逼真的
网上照片见过不少。代 友写的没见过，只见过这个。。。 老磁带老古董，黑黑厉害，很仿真，非常像了 我收藏的磁带音乐专辑都是老掉牙的歌曲，声音没有现在的那么清透，但味道不一样，这个就是怀旧的感觉 小辣椒 发表于 2023-8-14 12:54
我收藏的磁带音乐专辑都是老掉牙的歌曲，声音没有现在的那么清透，但味道不一样，这个就是怀旧的感觉
{:4_199:}