音乐左右代码

屿风

281公里

谢霆锋

追逐里程，或者选择追逐雨
逃避人群，不是有心逃避你。

00:00 03:00

屿风

1. <br>
   
2. <style>
   
3. .music-card-neon{
   
4.     width:100%;
   
5.     max-width:620px;
   
6.     margin:10px auto;
   
7.     backdrop-filter:blur(14px);
   
8.     border-radius:34px;
   
9.     padding:18px;
   
10.     box-sizing:border-box;
    
11.     overflow:hidden;
    
12.     font-family:system-ui,sans-serif;
    
13. }
    
14. .music-card-row{
    
15.     display:flex;
    
16.     align-items:center;
    
17.     gap:14px;
    
18. }
    
19. .music-cover{
    
20.     width:220px;
    
21.     height:220px;
    
22.     min-width:110px;
    
23.     border-radius:20px;
    
24.     overflow:hidden;
    
25.     background:#eee;
    
26. }
    
27. .music-cover img{
    
28.     width:100%;
    
29.     height:100%;
    
30.     object-fit:cover;
    
31.     display:block;
    
32. }
    
33. .music-info{
    
34.     flex:1;
    
35.     min-width:0;
    
36. }
    
37. .music-title-wrap{
    
38.     display:flex;
    
39.     align-items:center;
    
40.     justify-content:space-between;
    
41.     gap:8px;
    
42.     margin-bottom:4px;
    
43. }
    
44. .music-title{
    
45.     font-size:22px !important;
    
46.     font-weight:700;
    
47.     color:#222;
    
48.     margin:0;
    
49.     white-space:nowrap;
    
50.     overflow:hidden;
    
51.     text-overflow:ellipsis;
    
52. }
    
53. .like-wrap{
    
54.     position:relative;
    
55.     cursor:pointer;
    
56.     flex-shrink:0;
    
57. }
    
58. .like-icon{
    
59.     width:24px;
    
60.     height:24px;
    
61.     display:block;
    
62. }
    
63. .music-artist{
    
64.     font-size:14px;
    
65.     color:#444;
    
66.     margin:0 0 6px;
    
67. }
    
68. .music-lyric-tip{
    
69.     font-size:12px;
    
70.     color:#666;
    
71.     margin:0 0 10px;
    
72.     line-height:1.4;
    
73.     display:-webkit-box;
    
74.     -webkit-line-clamp:2;
    
75.     -webkit-box-orient:vertical;
    
76.     overflow:hidden;
    
77. }
    
78. .music-progress-box{
    
79.     width:100%;
    
80. }
    
81. .music-time-row{
    
82.     display:flex;
    
83.     justify-content:space-between;
    
84.     font-size:11px;
    
85.     color:#666;
    
86.     margin-bottom:4px;
    
87. }
    
88. .music-progress{
    
89.     width:100%;
    
90.     height:3px;
    
91.     background:#dddddd;
    
92.     border-radius:99px;
    
93.     cursor:pointer;
    
94.     position:relative;
    
95. }
    
96. .music-progress-bar{
    
97.     height:100%;
    
98.     width:0%;
    
99.     background:#222;
    
100.     border-radius:99px;
     
101. }
     
102. .music-control{
     
103.     display:flex;
     
104.     align-items:center;
     
105.     justify-content:space-between;
     
106.     margin-top:10px;
     
107. }
     
108. .music-icon-btn{
     
109.     border:none;
     
110.     background:transparent;
     
111.     padding:0;
     
112.     cursor:pointer;
     
113. }
     
114. .music-icon-btn img{
     
115.     width:22px;
     
116.     height:22px;
     
117.     display:block;
     
118. }
     
119. .music-play-btn{
     
120.     border:none;
     
121.     background:#ffffff;
     
122.     width:46px;
     
123.     height:46px;
     
124.     border-radius:50%;
     
125.     padding:0;
     
126.     display:flex;
     
127.     align-items:center;
     
128.     justify-content:center;
     
129.     box-shadow:0 2px 8px rgba(0,0,0,0.12);
     
130.     cursor:pointer;
     
131. }
     
132. .music-play-btn img{
     
133.     width:22px;
     
134.     height:22px;
     
135.     display:block;
     
136. }
     
137. .music-audio{
     
138.     display:none;
     
139. }
     
140. </style>
     
141. <div class="music-card-neon" id="musicCard">
     
142.     <div class="music-card-row">
     
143.         <div class="music-cover">
     
144.             
     
145.         </div>
     
146. 
     
147.         <div class="music-info">
     
148.             <div class="music-title-wrap">
     
149.                 <h2 class="music-title">281公里</h2>
     
150.                 <div class="like-wrap" id="likeWrap">
     
151.                     <img class="like-icon" id="likeIcon" src="https://www.qqmcc.net/data/attachment/album/202610/22/160519yh2qmxmyrh2xcqmc.png" alt="收藏">
     
152.                 </div>
     
153.             </div>
     
154. 
     
155.             <div class="music-artist">谢霆锋</div>
     
156.             <div class="music-lyric-tip">追逐里程，或者选择追逐雨<br>逃避人群，不是有心逃避你。</div>
     
157. 
     
158.             <div class="music-progress-box">
     
159.                 <div class="music-time-row">
     
160.                     <span id="curTime">00:00</span>
     
161.                     <span id="totalTime">03:00</span>
     
162.                 </div>
     
163.                 <div class="music-progress" id="progressWrap">
     
164.                     <div class="music-progress-bar" id="progressBar"></div>
     
165.                 </div>
     
166.             </div>
     
167. 
     
168.             <div class="music-control">
     
169.                 <button class="music-icon-btn" id="loopBtn">
     
170.                     <img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730vnammnln61bttn5g.png" alt="循环">
     
171.                 </button>
     
172.                 <button class="music-icon-btn" id="prevBtn">
     
173.                     <img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730a4pbp8pnep7ppp47.png" alt="上一曲">
     
174.                 </button>
     
175.                 <button class="music-play-btn" id="playBtn">
     
176.                     <img id="playIcon" src="https://www.qqmcc.net/data/attachment/album/202610/22/155731nb5pk2epp2dmmzc5.png" alt="暂停">
     
177.                 </button>
     
178.                 <button class="music-icon-btn" id="nextBtn">
     
179.                     <img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730f3yog1tdtdkx40wg.png" alt="下一曲">
     
180.                 </button>
     
181.                 <button class="music-icon-btn" id="listBtn">
     
182.                     <img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730wr9t66s1lb19mdz4.png" alt="列表">
     
183.                 </button>
     
184.             </div>
     
185.         </div>
     
186.     </div>
     
187. 
     
188.     <audio class="music-audio" id="audioPlayer">
     
189.       
     
190. </div>
     
191. 
     
192. <script>
     
193. function fmtTime(s){
     
194.     let m = Math.floor(s / 60);
     
195.     let sec = Math.floor(s % 60);
     
196.     return String(m).padStart(2,'0')+':'+String(sec).padStart(2,'0');
     
197. }
     
198. 
     
199. let timer = null;
     
200. let pos = 0;
     
201. const total = 180;
     
202. let run = true;
     
203. 
     
204. const curTimeDom = document.getElementById('curTime');
     
205. const progressBar = document.getElementById('progressBar');
     
206. const progressWrap = document.getElementById('progressWrap');
     
207. const playIcon = document.getElementById('playIcon');
     
208. const audio = document.getElementById('audioPlayer');
     
209. 
     
210. function updateView(){
     
211.     progressBar.style.width = (pos/total*100)+'%';
     
212.     curTimeDom.innerText = fmtTime(pos);
     
213. }
     
214. 
     
215. function startTimer(){
     
216.     timer = setInterval(()=>{
     
217.         pos += 0.1;
     
218.         if(pos >= total){
     
219.             pos = total;
     
220.             stopTimer();
     
221.             run = false;
     
222.             playIcon.src = 'https://www.qqmcc.net/data/attachment/album/202610/22/155730rm7ldu8jdgd87y0g.png';
     
223.         }
     
224.         updateView();
     
225.     },100);
     
226. }
     
227. function stopTimer(){
     
228.     clearInterval(timer);
     
229.     timer = null;
     
230. }
     
231. 
     
232. updateView();
     
233. audio.play().catch(()=>{});
     
234. startTimer();
     
235. 
     
236. document.getElementById('playBtn').onclick = function(){
     
237.     const icoPlay = 'https://www.qqmcc.net/data/attachment/album/202610/22/155730rm7ldu8jdgd87y0g.png';
     
238.     const icoPause = 'https://www.qqmcc.net/data/attachment/album/202610/22/155731nb5pk2epp2dmmzc5.png';
     
239. 
     
240.     if(run){
     
241.         audio.pause();
     
242.         stopTimer();
     
243.         run = false;
     
244.         playIcon.src = icoPlay;
     
245.     }else{
     
246.         audio.play().catch(()=>{});
     
247.         run = true;
     
248.         playIcon.src = icoPause;
     
249.         startTimer();
     
250.     }
     
251. }
     
252. 
     
253. progressWrap.onclick = function(e){
     
254.     const wrap = this.getBoundingClientRect();
     
255.     const p = (e.clientX - wrap.left)/wrap.width;
     
256.     pos = p * total;
     
257.     updateView();
     
258. }
     
259. 
     
260. const likeIcon = document.getElementById('likeIcon');
     
261. const heartOutline = "https://www.qqmcc.net/data/attachment/album/202610/22/160519yh2qmxmyrh2xcqmc.png";
     
262. const heartFill = "https://www.qqmcc.net/data/attachment/album/202610/22/160812nt71pzittbuetpfx.png";
     
263. let isLike = false;
     
264. document.getElementById('likeWrap').onclick = function(){
     
265.     isLike = !isLike;
     
266.     likeIcon.src = isLike ? heartFill : heartOutline;
     
267. };
     
268. 
     
269. const cardHex = '#DCF2D2';
     
270. const cardAlpha = 0.6;
     
271. function hexToRgb(hex) {
     
272.     const r = parseInt(hex.slice(1, 3),16);
     
273.     const g = parseInt(hex.slice(3, 5),16);
     
274.     const b = parseInt(hex.slice(5, 7),16);
     
275.     return `${r},${g},${b}`;
     
276. }
     
277. document.getElementById('musicCard').style.background = `rgba(${hexToRgb(cardHex)}, ${cardAlpha})`;
     
278. 
     
279. document.getElementById('loopBtn').onclick = function(){};
     
280. document.getElementById('prevBtn').onclick = function(){};
     
281. document.getElementById('nextBtn').onclick = function(){};
     
282. document.getElementById('listBtn').onclick = function(){};
     
283. </script>
     
284. <br>

复制代码