真正的小播？

马黑黑

马黑黑

代码

1. <style>
   
2. #mplayer {
   
3.         position: absolute;
   
4.         width: 30px;
   
5.         height: 30px;
   
6.         border: 2px solid var(--bd);
   
7.         border-radius: 50%;
   
8.         box-shadow: 0 0 10px var(--sd);
   
9.         transition: .7s;
   
10.         cursor: pointer;
    
11.         display: grid;
    
12.         place-items: center;
    
13.         --play: 1; --pause: 0; --bd: black; --sd: black;
    
14. }
    
15. #mplayer::before, #mplayer::after {
    
16.         position: absolute;
    
17.         content: '';
    
18.         border-style: solid;
    
19.         border-color: var(--bd);
    
20.         transition: .4s;
    
21. }
    
22. #mplayer::before {
    
23.         width: 0;
    
24.         height: 0;
    
25.         left: 10px;
    
26.         border-width: 10px 12px;
    
27.         border-color: transparent transparent transparent var(--bd);
    
28.         opacity: var(--play);
    
29. }
    
30. #mplayer::after {
    
31.         width: 2px;
    
32.         height: 16px;
    
33.         border-width: 0 4px 0 4px;
    
34.         opacity: var(--pause);
    
35. }
    
36. #mplayer:hover { box-shadow: 0 0 10px var(--sd), 0 0 10px var(--sd) inset; }
    
37. </style>
    
38. 
    
39. <div id="mplayer"></div>
    
40. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=304943" loop></audio>
    
41. 
    
42. <script>
    
43. let mState = () => aud.paused ? (mplayer.style.setProperty('--play', '1'), mplayer.style.setProperty('--pause', '0')) : (mplayer.style.setProperty('--play', '0'),mplayer.style.setProperty('--pause', '1'));
    
44. mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
45. aud.addEventListener('play', mState,false);
    
46. aud.addEventListener('pause', mState,false);
    
47. 
    
48. </script>

复制代码

雨中悄然

这么小个东东，这么多代码

马黑黑

雨中悄然 发表于 2023-3-26 19:41
这么小个东东，这么多代码

都是CSS代码。CSS使用描述性属性去指定 <div id="mplayer"></div> 的样式，一个HTML单标签，它能如此交互，CSS做了大量的工作，还有多数的动态交互，由JS完成。

红影

这个还挺好看的呢

红影

opacity: var(--play); 这个做法有点不明白。这个使用透明度来回切换的么？

马黑黑

红影 发表于 2023-3-26 20:06
opacity: var(--play); 这个做法有点不明白。这个使用透明度来回切换的么？

播放按钮是三角形，暂停按钮是两个竖杠（中队长？），它们放在同一个位置，一个时间里只显示其中的一个。所以用不透明度来处理它们：

opacity: var(--play); 中，--paly 变量指播放按钮的不透明度；--pause 变量则是停止按钮的不透明度。

然后，根据音频播放状态，JS 给这些CSS变量进行赋值（mState函数）。

这样，就达成了预期的只显示一个按钮的效果。

马黑黑

红影 发表于 2023-3-26 20:04
这个还挺好看的呢

好看不好看不重要，关键是小而美

千羽

小而美的播放器，好看

马黑黑

千羽 发表于 2023-3-26 21:06
小而美的播放器，好看

谢谢

庶民

我看到一个按钮。

马黑黑

庶民 发表于 2023-3-27 05:51
我看到一个按钮。

就是一个按钮

小辣椒

这个小播放器，小巧玲珑

小辣椒

最早黑黑分享的有个播放器有加滚动条的，和这个好像差不多的

小辣椒

这个小播加了阴影效果

小辣椒

漂亮的，做小帖最合适了

马黑黑

小辣椒 发表于 2023-3-27 13:28
漂亮的，做小帖最合适了

小辣椒

马黑黑 发表于 2023-3-27 17:22

大图也是可以做的，简洁，反而漂亮

马黑黑

小辣椒 发表于 2023-3-27 17:25
大图也是可以做的，简洁，反而漂亮

说得好像也有道理

小辣椒

马黑黑 发表于 2023-3-27 17:25
说得好像也有道理

这个应该是人人喜欢的，玩纯音画的也是可以用的