晨曲

马黑黑

晨曲

00:00 | 00:00

马黑黑

参考代码（本地测试模式）

1. <style>
   
2. #papa { margin: auto; width: 1024px; height: 640px; background: gray url('quiet.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; user-select: none; position: relative; z-index: 1; }
   
3. #mplayer { position: absolute; bottom: 0; right: 100px; width: 300px; height: 60px; display: grid; place-items: center; cursor: pointer; }
   
4. #mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
   
5. #mplayer:hover #btnwrap { opacity: .75; }
   
6. #btnwrap { --yy: -20px; padding: 0; background: none; box-sizing: border-box; transition: .3s; position: absolute; display: grid; place-items: center; opacity: 0; }
   
7. #btnwrap::before { content: ''; position: absolute; width: 40px; height: 40px; border: 3px dotted olive; border-radius: 50%; transform: translateX(-10px); }
   
8. #btnwrap:hover { border-left-color: olive; }
   
9. .play { height: 20px; border: 0px solid transparent; border-left-color: hsla(50,100%,90%,.55); border-width: 12px 0 12px 18px; }
   
10. .pause { border-style: double; border-width: 0 0 0 18px; }
    
11. #prog { --yy: 15px; width: 300px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, hsla(50,10%,0%,.65), hsla(50,100%,40%,.55) 100%, transparent 0); border: 1px solid hsla(25,100%,95%,.45); font: normal 14px / 16px sans-serif; text-align: center; color: hsl(168,100%,50%); transition: .3s }
    
12. #tit { position: absolute; top: 0; padding: 20px; text-align: center; font: bold 3.6em sans-serif; color: hsla(25,100%,95%,.65); letter-spacing: 3px; text-shadow: 0 8px 9px hsla(25,20%,50%,.55), 0px -2px 1px hsla(25,100%,100%,.75); }
    
13. </style>
    
14. 
    
15. <div id="papa">
    
16.         <img src="fish.gif" alt="" style="width: 100px; transform: translate(160px, 200px); mix-blend-mode: screen; "/>
    
17.         <div id="tit">晨曲</div>
    
18.         <div id="mplayer">
    
19.                 <div id="prog">00:00 | 00:00</div>
    
20.                 <div id="btnwrap" class="play"></div>
    
21.         </div>
    
22. </div>
    
23. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1487066170.mp3" loop="loop" autoplay="autoplay"></audio>
    
24. 
    
25. <script>
    
26. prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
    
27. btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
    
28. aud.addEventListener('pause', () => mState());
    
29. aud.addEventListener('play', () => mState());
    
30. aud.addEventListener('seeked', () => aud.play());
    
31. aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, hsla(50,20%,0%,.65), hsla(50,100%,40%,.55) ' + aud.currentTime / aud.duration * 100 + '%, hsla(50,100%,100%,.5) 0)';prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);});
    
32. let mState = () => btnwrap.className = aud.paused ? 'play' : 'play pause';
    
33. 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;};
    
34. </script>

复制代码

马黑黑

本帖尝试：

一、单标签播放暂停按钮的实际应用

二、论坛支持 webp 附件情况

红影

晨光笼罩着晨曲两字，水边的女孩很悠然自在，那两条半透明的小鱼也很灵动，漂亮

红影

马黑黑 发表于 2022-10-6 07:43
本帖尝试：

一、单标签播放暂停按钮的实际应用

单标签播放按钮也很漂亮的

马黑黑

红影 发表于 2022-10-6 07:58 单标签播放按钮也很漂亮的

本来不想做，小辣椒预言要“横空出世”，那就做做吧，不好打击预言家

马黑黑

红影 发表于 2022-10-6 07:58
晨光笼罩着晨曲两字，水边的女孩很悠然自在，那两条半透明的小鱼也很灵动，漂亮

那鱼是神鱼，修炼了一万年

山人

评分后音乐能继续，进度条、按钮失效

红影

马黑黑 发表于 2022-10-6 08:00
本来不想做，小辣椒预言要“横空出世”，那就做做吧，不好打击预言家

这个语言现在很准确呢

红影

马黑黑 发表于 2022-10-6 08:01
那鱼是神鱼，修炼了一万年

一万年早成精了，怎么还会在水里

马黑黑

醉美水芙蓉 发表于 2022-10-6 11:46
景色很漂亮！鱼儿游得很欢喔！谢谢黑黑老师分享佳作！

马黑黑

红影 发表于 2022-10-6 11:32
这个语言现在很准确呢

照顾一下情绪

马黑黑

红影 发表于 2022-10-6 11:33
一万年早成精了，怎么还会在水里

这不国庆放假吗？来人间仙境旅游旅游，拉动疫情下的内需

小辣椒

马黑黑 发表于 2022-10-6 08:00
本来不想做，小辣椒预言要“横空出世”，那就做做吧，不好打击预言家

果然~~黑黑武威的

马黑黑

小辣椒 发表于 2022-10-6 12:25
果然~~黑黑武威的

小辣椒

马黑黑 发表于 2022-10-6 12:43

哈哈~~秒做出来了，但我暂时不能完成作业。。。。。休息几天再说

马黑黑

小辣椒 发表于 2022-10-6 12:57
哈哈~~秒做出来了，但我暂时不能完成作业。。。。。休息几天再说

不急慢慢来

三月的阳光

黑黑老师制作漂亮，音乐好听~~

闲言不语

厉害了马黑黑！