播放多个本地音频文件的响应式频谱播放器（2.5更新）

红影

马黑黑 发表于 2025-2-1 22:21
那是自然

结果又忍不住去听歌了

马黑黑

红影 发表于 2025-2-2 11:11
结果又忍不住去听歌了

听歌有益健康

马黑黑

花飞飞 发表于 2025-2-2 10:58
这个好喝。。热腾腾的奶茶来一杯

热热身子

马黑黑

花飞飞 发表于 2025-2-2 10:58
这几天天天用，完全顺手。。
突然想到卸了的火狐里不知道有没有存一些偏门的网址。。卸快了

火绒安全的软件管理里面有卸载残余的

马黑黑

花飞飞 发表于 2025-2-2 10:57
那敢情好，天荒地老

白的可能是银子，值钱

红影

马黑黑 发表于 2025-2-2 12:36
听歌有益健康

是啊，尤其喜欢的歌，听了总是那么开心呢

花飞飞

马黑黑 发表于 2025-2-2 12:38
热热身子

阴天有零星小雨

花飞飞

马黑黑 发表于 2025-2-2 12:39
火绒安全的软件管理里面有卸载残余的

火狐么，没准哪天又装回来了。这个暂时先不清。。

花飞飞

马黑黑 发表于 2025-2-2 12:39
白的可能是银子，值钱

看到银子两眼放光，提神

马黑黑

花飞飞 发表于 2025-2-2 19:04
看到银子两眼放光，提神

马黑黑

花飞飞 发表于 2025-2-2 19:01
阴天有零星小雨

雨伞俺有的

花飞飞

马黑黑 发表于 2025-2-2 20:16

比咖啡效果好

花飞飞

马黑黑 发表于 2025-2-2 20:18
雨伞俺有的

毛毛雨。。

马黑黑

花飞飞 发表于 2025-2-2 20:45
毛毛雨。。

毛毛雨也是雨

马黑黑

花飞飞 发表于 2025-2-2 20:45
比咖啡效果好

那不错

马黑黑

2月4日更新：


（一）鼠标指针移动到背景图片地址栏自动获焦并选中地址（若有）；
（二）音乐列表：
        一是设置一定透明度，鼠标指针移动到其上时恢复不透明度为0即没有透明度；
        二是滚动条自动隐藏，仅在鼠标指针经过其上时出现（若有）。

完整代码：

1. <style>
   
2. /* 父元素 */
   
3. #papa {
   
4.         margin: 30px auto 0;
   
5.         padding: 10px;
   
6.         width: 800px;
   
7.         height: 400px;
   
8.         font-size: 16px;
   
9.         background: linear-gradient(to bottom right, #000, #ffc);
   
10.         box-shadow: 3px 6px 20px #000;
    
11.         border-radius: 6px;
    
12.         display: grid;
    
13.         place-items: center;
    
14.         position: relative;
    
15. }
    
16. 
    
17. /* 选择本地音乐父元素 */
    
18. #openFile {
    
19.         position: absolute;
    
20.         left: 15px;
    
21.         top: 15px;
    
22.         width: calc(100% - 30px);
    
23. }
    
24. 
    
25. /* 选择音乐控件 */
    
26. #mfile { display: none; }
    
27. 
    
28. /* 选择音乐按钮 */
    
29. #selectSong {
    
30.         margin-right: 8px;
    
31.         border: 2px solid #ccc;
    
32.         border-radius: 6px;
    
33.         outline: none;
    
34.         background: none;
    
35.         color: snow;
    
36.         cursor: pointer;
    
37. }
    
38. 
    
39. /* 背景图片地址栏 */
    
40. #bgurl {
    
41.         position: absolute;
    
42.         right: 0;
    
43.         display: none;
    
44. }
    
45. 
    
46. 
    
47. #openFile:hover #bgurl {
    
48.         display: inline;
    
49. }
    
50. 
    
51. /* 选择音乐按钮指针经过 */
    
52. #selectSong:hover { background: darkred; }
    
53. 
    
54. /* 当前播放曲目 */
    
55. #curSong { color: #eee; }
    
56. 
    
57. /* 播放器 */
    
58. #mplayer {
    
59.         --bg1: teal;
    
60.         --bg2: snow;
    
61.         --ppLen: 4px;
    
62.         --prog: white;
    
63.         --track: silver;
    
64.         --prg: 0%;
    
65.         --ppCap: white;
    
66.         position: absolute;
    
67.         right: 180px;
    
68.         width: 100px;
    
69.         height: 100px;
    
70.         border-radius: 50%;
    
71.         background: linear-gradient(
    
72.                 to right,
    
73.                 var(--prog) var(--prg),
    
74.                 var(--track) var(--prg),
    
75.                 var(--track) 0
    
76.         ) no-repeat 0 50% / 100% 2px;
    
77.         cursor: pointer;
    
78.         display: grid;
    
79.         place-items: center;
    
80. }
    
81. 
    
82. /* 播放器指针经过 */
    
83. #mplayer:hover {
    
84.         filter: hue-rotate(90deg) drop-shadow(0 0 26px black);
    
85. }
    
86. 
    
87. /* 播放器伪元素 ：音频时间信息 */
    
88. #mplayer::before, #mplayer::after {
    
89.         position: absolute;
    
90.         color: snow;
    
91. }
    
92. 
    
93. /* 播放器伪元素一 ：当前播放时间 */
    
94. #mplayer::before {
    
95.         content: attr(data-cu);
    
96.         top: 20%;
    
97. }
    
98. 
    
99. /* 播放器伪元素二 ：音频时长 */
    
100. #mplayer::after {
     
101.         content: attr(data-du);
     
102.         top: 56%;
     
103. }
     
104. 
     
105. /* 频谱条 */
     
106. .pp {
     
107.         position: absolute;
     
108.         left: calc(50% - 2px);
     
109.         bottom: 50%;
     
110.         width: var(--ppLen);
     
111.         height: 20px;
     
112.         background: linear-gradient(to top, var(--bg1), var(--bg2));
     
113.         transform-origin: 50% 100%;
     
114.         transform: rotate(var(--deg)) translate(-50px, 0);
     
115.         display: grid;
     
116.         place-items: center;
     
117. }
     
118. 
     
119. /* 频谱条伪元素 ：频谱帽 */
     
120. .pp::after {
     
121.         position: absolute;
     
122.         content: '';
     
123.         width: calc(var(--ppLen) + 4px);
     
124.         height: calc(var(--ppLen) + 4px);
     
125.         top: 0px;
     
126.         background: var(--bg2);
     
127.         border-radius: 50%;
     
128. }
     
129. 
     
130. /* 音乐列表 */
     
131. #mlist {
     
132.         position: absolute;
     
133.         left: 20px;
     
134.         top: 60px;
     
135.         min-width: 40%;
     
136.         max-width: 50%;
     
137.         min-height: 20%;
     
138.         max-height: calc(100% - 80px);
     
139.         color: silver;
     
140.         font-size: 14px;
     
141.         line-height: 20px;
     
142.         overflow: hidden;
     
143.         opacity: .4;
     
144. }
     
145. 
     
146. /* 音乐列表鼠标经过 */
     
147. #mlist:hover {
     
148.         overflow: auto;
     
149.         opacity: 1;
     
150. }
     
151. 
     
152. /* 音乐列表项目一 ：待播放曲目 */
     
153. .list1 { cursor: pointer; }
     
154. 
     
155. /* 音乐列表项目二 ：正在播放曲目 */
     
156. .list2 {
     
157.         color: cyan;
     
158.         cursor:default;
     
159. }
     
160. 
     
161. /* 音乐列表项目一指针经过 */
     
162. .list1:hover { color: white; }
     
163. </style>
     
164. 
     
165. <div id="papa">
     
166.         <div id="openFile">
     
167.                 <input id="selectSong" type="button" value="选择音乐" />
     
168.                 <input type="file" id="mfile" accept=".mp3,.ogg,.wav,.acc,.webm,.flac" multiple />
     
169.                 <span id="curSong"></span>
     
170.                 <input id="bgurl" type="text" placeholder="背景 : 网络图片地址" value="" />
     
171.         </div>
     
172.         <div id="mplayer" class="mplayer"></div>
     
173.         <div id="mlist"></div>
     
174.         <audio id="aud"></audio>
     
175. </div>
     
176. <p style="text-align:right"><br>更新 ：2025年2月4日 &nbsp;&nbsp;&nbsp;<br></p>
     
177. 
     
178. <script>
     
179. 
     
180. //选择的文件, 播放列表, 波形数据, 频谱
     
181. let files=[], playAr = [], output = [], pps = [];
     
182. //打开文件次数, 频谱条总数
     
183. let openIdx = 0, total = 30;
     
184. 
     
185. //获取波形数据
     
186. const getDatas = () => {
     
187.         if(openIdx > 0) return;
     
188.         openIdx ++;
     
189.         Ac = new AudioContext;
     
190.         source = Ac.createMediaElementSource(aud);
     
191.         analyser = Ac.createAnalyser();
     
192.         source.connect(analyser);
     
193.         analyser.connect(Ac.destination);
     
194.         output = new Uint8Array(total);
     
195. };
     
196. 
     
197. //生成频谱条
     
198. Array(total).fill(0).forEach((_, k) => {
     
199.         let pp = document.createElement('span');
     
200.         pp.className = 'pp';
     
201.         pp.style.cssText += `--deg: ${360 / total * k}deg`;
     
202.         mplayer.appendChild(pp);
     
203.         pps.push(pp);
     
204. });
     
205. 
     
206. //波形数据刷新
     
207. (function update() {
     
208.         if(aud.src) analyser.getByteFrequencyData(output);
     
209.         for(let j = 0; j < total ; j++) {
     
210.                 pps[j].style.height = output[j] / 2 + 'px';
     
211.         }
     
212.         window.requestAnimationFrame(update);
     
213. })();
     
214. 
     
215. //播放 ：idx为空时随机播放
     
216. const mplay = (idx = null) => {
     
217.         if(files.length === 0) return;
     
218.         let isScrolling = false;
     
219.         if(idx === null) {
     
220.                 if(playAr.length === 0) playAr = ranNum(files.length);
     
221.                 let tmpIdx = Math.floor(Math.random() * playAr.length);
     
222.                 idx = playAr[tmpIdx];
     
223.                 playAr.splice(tmpIdx, 1);
     
224.                 isScrolling = true;
     
225.         }
     
226.         aud.src = URL.createObjectURL(files[idx]);
     
227.         let name = files[idx].name;
     
228.         curSong.innerText = name.substring(0, name.lastIndexOf('.')) + `（${files.length}/${idx+1}）`;
     
229.         aud.play();
     
230.         mlist.innerHTML = showList(files, idx);
     
231.         if(isScrolling) mlist.scrollTop = 20 * idx; //scrolling(20, idx);
     
232. };
     
233. 
     
234. //显示音乐列表
     
235. const showList = (ar, idx) => {
     
236.         let res = '';
     
237.         for(let j = 0; j < ar.length; j ++) {
     
238.                 let item = (j + 1) + '. ';
     
239.                 item += j === idx ?
     
240.                         `<span class="list2">${ar[j].name}</span>` :
     
241.                         `<span class="list1" onclick="mplay(${j})">${ar[j].name}</span>`;
     
242.                 res += item + '<br>';
     
243.         }
     
244.         return res;
     
245. };
     
246. 
     
247. //生成不重复随机数组
     
248. const ranNum = (total) => {
     
249.         let ar = Array(total).fill().map((_,key) => key);
     
250.         ar.sort(() => 0.5 - Math.random());
     
251.         return ar;
     
252. };
     
253. 
     
254. //秒转分
     
255. const s2m = (seconds) => {
     
256.         if (!seconds) return '00:00';
     
257.         let min = parseInt(seconds / 60), sec = parseFloat(Math.floor(seconds) % 60);
     
258.         if(min < 10) min = '0' + min;
     
259.         if(sec < 10) sec = '0' + sec;
     
260.         return min + ':' + sec;
     
261. };
     
262. 
     
263. //判断进度条区域
     
264. const innerH = (e, h) => e.offsetY > h / 2 - 5 && e.offsetY < h / 2 + 5;
     
265. 
     
266. //audio timeupdate监听事件
     
267. aud.addEventListener('timeupdate', () => {
     
268.         mplayer.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
     
269.         mplayer.dataset.cu = s2m(aud.currentTime);
     
270.         mplayer.dataset.du = s2m(aud.duration);
     
271. });
     
272. 
     
273. //单曲播放结束
     
274. aud.addEventListener('ended',() => mplay());
     
275. 
     
276. //选择歌曲
     
277. selectSong.onclick = () => mfile.click();
     
278. 
     
279. //文件选择器改变
     
280. mfile.onchange = () => {
     
281.         let filelist = mfile.files;
     
282.         if(filelist.length === 0) return;
     
283.         files.length = 0;
     
284.         for(let j = 0; j < filelist.length; j ++) {
     
285.                 files.push(filelist[j]);
     
286.         }
     
287.         playAr = ranNum(files.length);
     
288.         mplay();
     
289.         getDatas();
     
290. }
     
291. 
     
292. //播放器点击
     
293. mplayer.onclick = (e) => {
     
294.         if(files.length < 1) return;
     
295.         if(innerH(e,mplayer.clientHeight)) {
     
296.                 aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
     
297.         }else{
     
298.                 aud.paused ? aud.play() : aud.pause();
     
299.         }
     
300. };
     
301. 
     
302. //播放器鼠标移过
     
303. mplayer.onmousemove = (e) => {
     
304.         mplayer.title = innerH(e,mplayer.clientHeight) ?
     
305.                 s2m(aud.duration * e.offsetX / mplayer.offsetWidth) :
     
306.                 (aud.paused ? '点击播放' : '点击暂停');
     
307. };
     
308. 
     
309. //背景图地址栏输入事件
     
310. bgurl.oninput = () => {
     
311.         let img = new Image(), src = bgurl.value.trim();
     
312.         img.src = src;
     
313.         img.onload = () => {
     
314.                 papa.style.cssText += `background: url(${src}) no-repeat center/cover;`;
     
315.                 localStorage.setItem('player_url', src)
     
316.         };
     
317. };
     
318. 
     
319. //背景图地址栏鼠标经过事件
     
320. bgurl.onmouseover = () => {
     
321.         bgurl.focus();
     
322.         bgurl.setSelectionRange(0,bgurl.value.length);
     
323. };
     
324. 
     
325. //加载背景图
     
326. const player_url = bgurl.value = localStorage.getItem('player_url');
     
327. if(player_url) papa.style.cssText += `background: url(${player_url}) no-repeat center/cover;`;
     
328. 
     
329. </script>

复制代码

马黑黑

2月5日更新内容：改进音乐列表滚动条样式（支持chrome和Firefox）

1. <style>
   
2. /* 父元素 */
   
3. #papa {
   
4.         margin: 30px auto 0;
   
5.         padding: 10px;
   
6.         width: 800px;
   
7.         height: 400px;
   
8.         font-size: 16px;
   
9.         background: linear-gradient(to bottom right, #000, #ffc);
   
10.         box-shadow: 3px 6px 20px #000;
    
11.         border-radius: 6px;
    
12.         display: grid;
    
13.         place-items: center;
    
14.         position: relative;
    
15. }
    
16. 
    
17. /* 选择本地音乐父元素 */
    
18. #openFile {
    
19.         position: absolute;
    
20.         left: 15px;
    
21.         top: 15px;
    
22.         width: calc(100% - 30px);
    
23. }
    
24. 
    
25. /* 选择音乐控件 */
    
26. #mfile { display: none; }
    
27. 
    
28. /* 选择音乐按钮 */
    
29. #selectSong {
    
30.         margin-right: 8px;
    
31.         border: 2px solid #ccc;
    
32.         border-radius: 6px;
    
33.         outline: none;
    
34.         background: none;
    
35.         color: snow;
    
36.         cursor: pointer;
    
37. }
    
38. 
    
39. /* 背景图片地址栏 */
    
40. #bgurl {
    
41.         position: absolute;
    
42.         right: 0;
    
43.         display: none;
    
44. }
    
45. 
    
46. 
    
47. #openFile:hover #bgurl {
    
48.         display: inline;
    
49. }
    
50. 
    
51. /* 选择音乐按钮指针经过 */
    
52. #selectSong:hover { background: darkred; }
    
53. 
    
54. /* 当前播放曲目 */
    
55. #curSong { color: #eee; }
    
56. 
    
57. /* 播放器 */
    
58. #mplayer {
    
59.         --bg1: teal;
    
60.         --bg2: snow;
    
61.         --ppLen: 4px;
    
62.         --prog: white;
    
63.         --track: silver;
    
64.         --prg: 0%;
    
65.         --ppCap: white;
    
66.         position: absolute;
    
67.         right: 180px;
    
68.         width: 100px;
    
69.         height: 100px;
    
70.         border-radius: 50%;
    
71.         background: linear-gradient(
    
72.                 to right,
    
73.                 var(--prog) var(--prg),
    
74.                 var(--track) var(--prg),
    
75.                 var(--track) 0
    
76.         ) no-repeat 0 50% / 100% 2px;
    
77.         cursor: pointer;
    
78.         display: grid;
    
79.         place-items: center;
    
80. }
    
81. 
    
82. /* 播放器指针经过 */
    
83. #mplayer:hover {
    
84.         filter: hue-rotate(90deg) drop-shadow(0 0 26px black);
    
85. }
    
86. 
    
87. /* 播放器伪元素 ：音频时间信息 */
    
88. #mplayer::before, #mplayer::after {
    
89.         position: absolute;
    
90.         color: snow;
    
91. }
    
92. 
    
93. /* 播放器伪元素一 ：当前播放时间 */
    
94. #mplayer::before {
    
95.         content: attr(data-cu);
    
96.         top: 20%;
    
97. }
    
98. 
    
99. /* 播放器伪元素二 ：音频时长 */
    
100. #mplayer::after {
     
101.         content: attr(data-du);
     
102.         top: 56%;
     
103. }
     
104. 
     
105. /* 频谱条 */
     
106. .pp {
     
107.         position: absolute;
     
108.         left: calc(50% - 2px);
     
109.         bottom: 50%;
     
110.         width: var(--ppLen);
     
111.         height: 20px;
     
112.         background: linear-gradient(to top, var(--bg1), var(--bg2));
     
113.         transform-origin: 50% 100%;
     
114.         transform: rotate(var(--deg)) translate(-50px, 0);
     
115.         display: grid;
     
116.         place-items: center;
     
117. }
     
118. 
     
119. /* 频谱条伪元素 ：频谱帽 */
     
120. .pp::after {
     
121.         position: absolute;
     
122.         content: '';
     
123.         width: calc(var(--ppLen) + 4px);
     
124.         height: calc(var(--ppLen) + 4px);
     
125.         top: 0px;
     
126.         background: var(--bg2);
     
127.         border-radius: 50%;
     
128. }
     
129. 
     
130. /* 音乐列表 */
     
131. #mlist {
     
132.         position: absolute;
     
133.         left: 20px;
     
134.         top: 60px;
     
135.         min-width: 40%;
     
136.         max-width: 50%;
     
137.         min-height: 20%;
     
138.         max-height: calc(100% - 80px);
     
139.         color: silver;
     
140.         font-size: 14px;
     
141.         line-height: 20px;
     
142.         opacity: .4;
     
143.         /* 滚动条 */
     
144.         overflow: hidden;
     
145.         scrollbar-width: thin;
     
146.         scrollbar-color: teal rgba(255,255,255,.2);
     
147. }
     
148. 
     
149. /* 音乐列表鼠标经过 */
     
150. #mlist:hover {
     
151.         overflow: auto;
     
152.         opacity: 1;
     
153. }
     
154. 
     
155. /* 音乐列表项目一 ：待播放曲目 */
     
156. .list1 { cursor: pointer; }
     
157. 
     
158. /* 音乐列表项目二 ：正在播放曲目 */
     
159. .list2 {
     
160.         color: cyan;
     
161.         cursor:default;
     
162. }
     
163. 
     
164. /* 音乐列表项目一指针经过 */
     
165. .list1:hover { color: white; }
     
166. </style>
     
167. 
     
168. <div id="papa">
     
169.         <div id="openFile">
     
170.                 <input id="selectSong" type="button" value="选择音乐" />
     
171.                 <input type="file" id="mfile" accept=".mp3,.ogg,.wav,.acc,.webm,.flac" multiple />
     
172.                 <span id="curSong"></span>
     
173.                 <input id="bgurl" type="text" placeholder="背景 : 网络图片地址" value="" />
     
174.         </div>
     
175.         <div id="mplayer" class="mplayer"></div>
     
176.         <div id="mlist"></div>
     
177.         <audio id="aud"></audio>
     
178. </div>
     
179. <p style="text-align:right"><br>更新 ：2025年2月5日 &nbsp;&nbsp;&nbsp;<br></p>
     
180. 
     
181. <script>
     
182. 
     
183. //选择的文件, 播放列表, 波形数据, 频谱
     
184. let files=[], playAr = [], output = [], pps = [];
     
185. //打开文件次数, 频谱条总数
     
186. let openIdx = 0, total = 30;
     
187. 
     
188. //获取波形数据
     
189. const getDatas = () => {
     
190.         if(openIdx > 0) return;
     
191.         openIdx ++;
     
192.         Ac = new AudioContext;
     
193.         source = Ac.createMediaElementSource(aud);
     
194.         analyser = Ac.createAnalyser();
     
195.         source.connect(analyser);
     
196.         analyser.connect(Ac.destination);
     
197.         output = new Uint8Array(total);
     
198. };
     
199. 
     
200. //生成频谱条
     
201. Array(total).fill(0).forEach((_, k) => {
     
202.         let pp = document.createElement('span');
     
203.         pp.className = 'pp';
     
204.         pp.style.cssText += `--deg: ${360 / total * k}deg`;
     
205.         mplayer.appendChild(pp);
     
206.         pps.push(pp);
     
207. });
     
208. 
     
209. //波形数据刷新
     
210. (function update() {
     
211.         if(aud.src) analyser.getByteFrequencyData(output);
     
212.         for(let j = 0; j < total ; j++) {
     
213.                 pps[j].style.height = output[j] / 2 + 'px';
     
214.         }
     
215.         window.requestAnimationFrame(update);
     
216. })();
     
217. 
     
218. //播放 ：idx为空时随机播放
     
219. const mplay = (idx = null) => {
     
220.         if(files.length === 0) return;
     
221.         let isScrolling = false;
     
222.         if(idx === null) {
     
223.                 if(playAr.length === 0) playAr = ranNum(files.length);
     
224.                 let tmpIdx = Math.floor(Math.random() * playAr.length);
     
225.                 idx = playAr[tmpIdx];
     
226.                 playAr.splice(tmpIdx, 1);
     
227.                 isScrolling = true;
     
228.         }
     
229.         aud.src = URL.createObjectURL(files[idx]);
     
230.         let name = files[idx].name;
     
231.         curSong.innerText = name.substring(0, name.lastIndexOf('.')) + `（${files.length}/${idx+1}）`;
     
232.         aud.play();
     
233.         mlist.innerHTML = showList(files, idx);
     
234.         if(isScrolling) mlist.scrollTop = 20 * idx; //scrolling(20, idx);
     
235. };
     
236. 
     
237. //显示音乐列表
     
238. const showList = (ar, idx) => {
     
239.         let res = '';
     
240.         for(let j = 0; j < ar.length; j ++) {
     
241.                 let item = (j + 1) + '. ';
     
242.                 item += j === idx ?
     
243.                         `<span class="list2">${ar[j].name}</span>` :
     
244.                         `<span class="list1" onclick="mplay(${j})">${ar[j].name}</span>`;
     
245.                 res += item + '<br>';
     
246.         }
     
247.         return res;
     
248. };
     
249. 
     
250. //生成不重复随机数组
     
251. const ranNum = (total) => {
     
252.         let ar = Array(total).fill().map((_,key) => key);
     
253.         ar.sort(() => 0.5 - Math.random());
     
254.         return ar;
     
255. };
     
256. 
     
257. //秒转分
     
258. const s2m = (seconds) => {
     
259.         if (!seconds) return '00:00';
     
260.         let min = parseInt(seconds / 60), sec = parseFloat(Math.floor(seconds) % 60);
     
261.         if(min < 10) min = '0' + min;
     
262.         if(sec < 10) sec = '0' + sec;
     
263.         return min + ':' + sec;
     
264. };
     
265. 
     
266. //判断进度条区域
     
267. const innerH = (e, h) => e.offsetY > h / 2 - 5 && e.offsetY < h / 2 + 5;
     
268. 
     
269. //audio timeupdate监听事件
     
270. aud.addEventListener('timeupdate', () => {
     
271.         mplayer.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
     
272.         mplayer.dataset.cu = s2m(aud.currentTime);
     
273.         mplayer.dataset.du = s2m(aud.duration);
     
274. });
     
275. 
     
276. //单曲播放结束
     
277. aud.addEventListener('ended',() => mplay());
     
278. 
     
279. //选择歌曲
     
280. selectSong.onclick = () => mfile.click();
     
281. 
     
282. //文件选择器改变
     
283. mfile.onchange = () => {
     
284.         let filelist = mfile.files;
     
285.         if(filelist.length === 0) return;
     
286.         files.length = 0;
     
287.         for(let j = 0; j < filelist.length; j ++) {
     
288.                 files.push(filelist[j]);
     
289.         }
     
290.         playAr = ranNum(files.length);
     
291.         mplay();
     
292.         getDatas();
     
293. }
     
294. 
     
295. //播放器点击
     
296. mplayer.onclick = (e) => {
     
297.         if(files.length < 1) return;
     
298.         if(innerH(e,mplayer.clientHeight)) {
     
299.                 aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
     
300.         }else{
     
301.                 aud.paused ? aud.play() : aud.pause();
     
302.         }
     
303. };
     
304. 
     
305. //播放器鼠标移过
     
306. mplayer.onmousemove = (e) => {
     
307.         mplayer.title = innerH(e,mplayer.clientHeight) ?
     
308.                 s2m(aud.duration * e.offsetX / mplayer.offsetWidth) :
     
309.                 (aud.paused ? '点击播放' : '点击暂停');
     
310. };
     
311. 
     
312. //背景图地址栏输入事件
     
313. bgurl.oninput = () => {
     
314.         let img = new Image(), src = bgurl.value.trim();
     
315.         img.src = src;
     
316.         img.onload = () => {
     
317.                 papa.style.cssText += `background: url(${src}) no-repeat center/cover;`;
     
318.                 localStorage.setItem('player_url', src)
     
319.         };
     
320. };
     
321. 
     
322. //背景图地址栏鼠标经过事件
     
323. bgurl.onmouseover = () => {
     
324.         bgurl.focus();
     
325.         bgurl.setSelectionRange(0,bgurl.value.length);
     
326. };
     
327. 
     
328. //加载背景图
     
329. const player_url = bgurl.value = localStorage.getItem('player_url');
     
330. if(player_url) papa.style.cssText += `background: url(${player_url}) no-repeat center/cover;`;
     
331. 
     
332. </script>

复制代码

马黑黑

这个图片做做背景不错：

                               
登录/注册后可看大图

花飞飞

马黑黑 发表于 2025-2-2 22:06
毛毛雨也是雨

事实证明今年是个暖冬，几乎没冷过

花飞飞

马黑黑 发表于 2025-2-2 22:06
那不错

一杯解万愁