简单模拟卡式磁带（预览版）

马黑黑

HCPlayer

马黑黑

简单模拟，没有追求逼真外观效果。网上这类作品有很逼真的，有兴趣的朋友可以去搜搜。本帖代码原创，代码如下：

1. <style>
   
2. #mplayer {
   
3.         margin: 20px auto;
   
4.         width: 200px;
   
5.         height: 120px;
   
6.         background: linear-gradient(tan,navy,transparent);
   
7.         box-shadow: 0 0 8px #666, 0 0 50px #999 inset, 0 0 20px #666;
   
8.         color: antiquewhite;
   
9.         display: grid;
   
10.         place-items: center;
    
11.         position: relative;
    
12.         --prg: 25%; --state: paused;
    
13. }
    
14. #mplayer > span { position: absolute; }
    
15. #mplayer::before, #mplayer::after {
    
16.         position: absolute;
    
17.         content: '';
    
18. }
    
19. #mplayer::before {
    
20.         left: 6px;
    
21.         top: 6px;
    
22.         width: 10px;
    
23.         height: 10px;
    
24.         border-radius: 50%;
    
25.         background: gray;
    
26.         box-shadow: 178px 0 0 gray, 0 98px 0 0 gray, 178px 98px 0 0 gray;
    
27. }
    
28. /*
    
29. #mplayer::after {
    
30.         width: 78px;
    
31.         height: 24px;
    
32.         border-radius: 24px;
    
33.         background: lightgray;
    
34. }
    
35. */
    
36. #btnP1, #btnP2 {
    
37.         width: 50px;
    
38.         height: 50px;
    
39.         border-radius: 50%;
    
40.         border: 1px solid silver;
    
41.         display: grid;
    
42.         place-items: center;
    
43.         cursor: pointer;
    
44.         animation: rot 5s infinite linear var(--state);
    
45. }
    
46. #btnP1 {
    
47.         left: 20px;
    
48.         background: gray radial-gradient(
    
49.                 transparent,
    
50.                 transparent 20%,
    
51.                 #000 calc(20% + 1px),
    
52.                 #000 calc(100% - var(--prg)),
    
53.                 transparent calc(100% - var(--prg) + 1px),
    
54.                 transparent 0
    
55.         );
    
56. }
    
57. #btnP2 {
    
58.         right: 20px;
    
59.         background: gray radial-gradient(
    
60.                 transparent,
    
61.                 transparent 20%,
    
62.                 #000 calc(20% + 1px),
    
63.                 #000 var(--prg),
    
64.                 transparent calc(var(--prg) + 1px),
    
65.                 transparent 0
    
66.         );
    
67. }
    
68. #btnP1::after, #btnP2::after {
    
69.         position: absolute;
    
70.         content: '';
    
71.         width: 18px;
    
72.         height: 18px;
    
73.         border-radius: 50%;
    
74.         border: 2px dotted rgba(250,250,250,.7);
    
75. }
    
76. #titP { top: 10px; font-size: 12px; }
    
77. 
    
78. @keyframes rot { to { transform: rotate(1turn); } }
    
79. </style>
    
80. 
    
81. <div id="mplayer">
    
82.         <span id="titP">HCPlayer</span>
    
83.         <span id="btnP1"></span>
    
84.         <span id="btnP2"></span>
    
85. </div>
    
86. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1488294593" loop autoplay></audio>
    
87. 
    
88. <script>
    
89. 
    
90. let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
91. 
    
92. aud.addEventListener('play', mState, false);
    
93. aud.addEventListener('pause', mState, false);
    
94. aud.addEventListener('timeupdate', () => {
    
95.         let prg = aud.currentTime / aud.duration * 100 + 20;
    
96.         mplayer.style.setProperty('--prg', prg + '%');
    
97. });
    
98. btnP1.onclick = btnP2.onclick = () => aud.paused ? aud.play() : aud.pause();
    
99. 
    
100. </script>

复制代码

马黑黑

代码略多，没办法，旧式磁带其实很多细节都还木有去还原，只是做个大概。

两个卡轮速度没有区别对待，它们应该是不同的。

红影

已经很像了，这个好玩

红影

支持原创

红影

好像一曲播完，两个卡轮颜色还换了换呢。
其实可以直接用个卡带图片加两个卡轮也可以的吧，这样就不用去用代码模拟底板了啊

花飞飞

老师又写了个新的小播。。。实物式的。。这个好看。。

梦油

看到了卡式磁带，又勾起了我对往事的回忆。那个时候，卡什磁带是多么时髦啊。

马黑黑

醉美水芙蓉 发表于 2023-8-14 11:35
这个设计漂亮！

谢谢

马黑黑

红影 发表于 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
已经很像了，这个好玩

感谢

花飞飞

马黑黑 发表于 2023-8-14 12:10
网上有更逼真的

网上照片见过不少。代 友写的没见过，只见过这个。。。

小辣椒

老磁带老古董，黑黑厉害，很仿真，非常像了

小辣椒

我收藏的磁带音乐专辑都是老掉牙的歌曲，声音没有现在的那么清透，但味道不一样，这个就是怀旧的感觉

马黑黑

小辣椒 发表于 2023-8-14 12:54
我收藏的磁带音乐专辑都是老掉牙的歌曲，声音没有现在的那么清透，但味道不一样，这个就是怀旧的感觉