音乐上下代码

屿风

网易云音乐地址
https://music.163.com/#/song?id=3223895

玛卡瑞纳

海龟先生

我早就肯定我的身体
被罪恶领入死亡里

00:0003:03

屿风

适配网易云播放器版本-点击封面查看歌曲地址

1. <style>
   
2. :root{--bg-color:#A9DF8459;--progress-color:#A9DF84;}
   
3. .music-card{max-width:420px;margin:10px auto;background:var(--bg-color);backdrop-filter:blur(14px);border-radius:34px;padding:24px;font-family:system-ui}
   
4. .music-cover{width:100%;aspect-ratio:1/1;margin-bottom:18px;perspective:1000px;cursor:pointer}
   
5. .music-cover-inner{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}
   
6. .music-cover.flip .music-cover-inner{transform:rotateY(180deg)}
   
7. .cover-front,.cover-back{position:absolute;width:100%;height:100%;border-radius:16px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;overflow:hidden}
   
8. .cover-front{background:#eee}
   
9. .cover-back{background:#f7fbeb;color:#333;transform:rotateY(180deg);padding:20px;box-sizing:border-box;text-align:center;font-size:14px}
   
10. .cover-front img{max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important;object-fit:cover!important;pointer-events:none!important}
    
11. .music-title-row{display:flex;justify-content:space-between;margin-bottom:6px;gap:8px}
    
12. .music-card .music-title{font-size:28px !important;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    
13. .music-like{width:26px;height:26px;cursor:pointer;flex-shrink:0;margin-top:8px}
    
14. .music-singer{font-size:18px;color:#444;margin:0 0 14px}
    
15. .music-lyric{font-size:15px;color:#666;margin:0 0 16px}
    
16. .music-time-row{display:flex;justify-content:space-between;font-size:12px;color:#666;margin-bottom:6px}
    
17. .music-progress{width:100%;height:4px;background:#ffffff;border-radius:99px}
    
18. .music-progress-bar{height:100%;width:0;background:var(--progress-color);border-radius:99px}
    
19. .music-btn-row{display:flex;justify-content:space-between;align-items:center}
    
20. .music-btn-row img,.music-play img{width:26px;height:26px;cursor:pointer}
    
21. .music-play{width:56px;height:56px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #00000012;cursor:pointer}
    
22. </style>
    
23. <div class="music-card">
    
24. <div class="music-cover" id="coverFlip">
    
25.   <div class="music-cover-inner">
    
26.     <div class="cover-front">封面</div>
    
27.     <div class="cover-back">网易云音乐直链<br>地址</div>
    
28.   </div>
    
29. </div>
    
30. <div class="music-title-row">
    
31. <h2 class="music-title">歌名</h2>
    
32. <img class="music-like" id="likeBtn" src="https://www.qqmcc.net/data/attachment/album/202610/22/160519yh2qmxmyrh2xcqmc.png">
    
33. </div>
    
34. <div class="music-singer">歌手</div>
    
35. <div class="music-lyric">歌词<br>歌词</div>
    
36. <div class="music-time-row"><span id="curTime">00:00</span><span id="totalTime">03:03</span></div>
    
37. <div class="music-progress"><div class="music-progress-bar" id="progressBar"></div></div>
    
38. <br>
    
39. <div class="music-btn-row">
    
40. <img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730vnammnln61bttn5g.png">
    
41. <img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730a4pbp8pnep7ppp47.png">
    
42. <div class="music-play" id="playBtn"><img id="playIcon" src="https://www.qqmcc.net/data/attachment/album/202610/22/155730rm7ldu8jdgd87y0g.png"></div>
    
43. <img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730f3yog1tdtdkx40wg.png">
    
44. <img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730wr9t66s1lb19mdz4.png">
    
45. </div>
    
46. <网易云外链播放器>
    
47. </div>
    
48. <script>
    
49. (function(){
    
50. const $=id=>document.getElementById(id);
    
51. const c=$('curTime'),b=$('progressBar'),t=$('totalTime');
    
52. const playBtn=$('playBtn'),playIcon=$('playIcon'),likeBtn=$('likeBtn'),coverFlip=$('coverFlip');
    
53. const playSrc="https://www.qqmcc.net/data/attachment/album/202610/22/155731nb5pk2epp2dmmzc5.png";
    
54. const pauseSrc="https://www.qqmcc.net/data/attachment/album/202610/22/155730rm7ldu8jdgd87y0g.png";
    
55. const likeOff="https://www.qqmcc.net/data/attachment/album/202610/22/160519yh2qmxmyrh2xcqmc.png";
    
56. const likeOn="https://www.qqmcc.net/data/attachment/album/202610/22/160812nt71pzittbuetpfx.png";
    
57. let isPlay=true,isLike=false,timer=null;
    
58. const s=x=>x.split(':').map(Number).reduce((a,v,i)=>i?a+v:a+v*60,0);
    
59. const f=x=>[Math.floor(x/60),Math.floor(x%60)].map(n=>String(n).padStart(2,'0')).join(':');
    
60. let total=s(t.innerText),now=0;
    
61. const run=()=>{
    
62.   now+=0.1;
    
63.   if(now>=total){
    
64.     now=total;
    
65.     pausePlay();
    
66.   }
    
67.   c.innerText=f(now);
    
68.   b.style.width=now/total*100+'%'
    
69. };
    
70. const pausePlay=()=>{
    
71.   isPlay=false;
    
72.   playIcon.src=playSrc;
    
73.   clearInterval(timer);
    
74. };
    
75. const startPlay=()=>{
    
76.   isPlay=true;
    
77.   playIcon.src=pauseSrc;
    
78.   timer=setInterval(run,100);
    
79. };
    
80. playBtn.onclick=()=>isPlay?pausePlay():startPlay();
    
81. likeBtn.onclick=()=>{
    
82.   isLike=!isLike;
    
83.   likeBtn.src=isLike?likeOn:likeOff
    
84. };
    
85. coverFlip.onclick=()=>coverFlip.classList.toggle('flip');
    
86. // 页面加载自动启动进度
    
87. startPlay();
    
88. })();
    
89. </script>
    

复制代码