<style>
#mboard { margin-bottom: 170px; width: 500px; height: 40px; background: beige; border-radius: 8px; box-shadow: 2px 2px 4px rgba(0,0,0,.5); display: flex; justify-content: center; align-items: center; gap: 8px; position: relative; }
#mboard:hover #mlist { opacity: 1; }
#mboard img { width: 26px; cursor: pointer; }
#mboard img:hover { filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5)); }
#tMsg1, #tMsg2 { width: 45px; font-size: 13px; text-align: center; }
#volwrap { position: absolute; width: 60px; height: 40px; right: 75px; display: grid; place-items: center; background: none; }
#volwrap:hover #volume { display: inline; }
#btnMute:hover ~ #volwrap > #volume { display: inline; }
#volume { position: absolute; width: 50px; height: 4px; opacity: .75; display: none; }
#prog { --track: gray; --prog: red; --prg: 0%; width: 200px; height: 20px; cursor: pointer; background: linear-gradient(to right, var(--prog) var(--prg), var(--track) 0) no-repeat 0% 50%/100% 2px; }
#mlist { position: absolute; top: 45px; width: 100%; height: 160px; padding: 12px; border-radius: 0px; overflow: auto; scrollbar-width: thin; background: inherit; column-count: 2; column-rule: 2px solid #eee; column-fill: auto; box-sizing: border-box; border: 1px solid gray; opacity: 0; transition: .7s; }
.list { margin: 0 8px; padding: 0 0 0 30px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; text-align: left; position: relative; }
.list::before { position: absolute; content: attr(data-idx); width: 30px; left: 0; }
.list1 { color: black; cursor: pointer; }
.list2 { color: red; cursor: default; }
.list1:hover { color: red; }
</style>
<div id="mboard">
<div id="mlist"></div>
<img id="btnPrev" src="https://638183.freep.cn/638183/web/icon/prev.svg" title="前一曲 (Alt+↑)" alt="" />
<img id="btnPlay" src="https://638183.freep.cn/638183/web/icon/play.svg" title="播放/暂停 (Alt+X)" alt="" />
<img id="btnNext" src="https://638183.freep.cn/638183/web/icon/next.svg" title="下一曲 (Alt+↓)" alt="" />
<span id="tMsg1">00:00</span>
<span id="prog"></span>
<span id="tMsg2">00:00</span>
<img id="btnMute" src="https://638183.freep.cn/638183/web/icon/unmuted.svg" title="静音 (Alt+J)" alt="" />
<img id="btnCirc" src="https://638183.freep.cn/638183/web/icon/circs.svg" title="随机循环 (Alt+S)" alt="" />
<div id="volwrap"><input id="volume" type="range" min="0" max="1" step="0.1" value="1" /></div>
<audio id="aud"></audio>
</div>
<script>
let lastVolume = 1, currentId = null, circ = true, muted = false, playAr = [], lists = [];
const musics = [
['https://music.163.com/song/media/outer/url?id=1321297488','跟太阳系说再见'],
['https://music.163.com/song/media/outer/url?id=1380590400','优雅的邂逅－致丁仪'],
['https://music.163.com/song/media/outer/url?id=1406003054','逝去的时间（time is over）'],
['https://music.163.com/song/media/outer/url?id=1421093308','人列计算机'],
['https://music.163.com/song/media/outer/url?id=1482053654','地球反抗军'],
['https://music.163.com/song/media/outer/url?id=1488362358','黑暗战役A'],
['https://music.163.com/song/media/outer/url?id=1488360994','黑暗战役B'],
['https://music.163.com/song/media/outer/url?id=1322066478','歌行者'],
['https://music.163.com/song/media/outer/url?id=524406882','地下世界－Without Spiccato'],
['https://music.163.com/song/media/outer/url?id=534254637','水滴－摧毁舰队＋metal drums'],
['https://music.163.com/song/media/outer/url?id=1384983167','为了生存-末日方舟开场曲'],
['https://music.163.com/song/media/outer/url?id=1331220129','四维空间深不见底'],
['https://music.163.com/song/media/outer/url?id=1363443031','章北海登上自然选择号'],
['https://music.163.com/song/media/outer/url?id=2015042301','人生的旅途'],
['https://music.163.com/song/media/outer/url?id=520502976','面壁者的沉思+CL'],
];
const btnImg = {
play: 'https://638183.freep.cn/638183/web/icon/play.svg',
pause: 'https://638183.freep.cn/638183/web/icon/pause.svg',
unmute: 'https://638183.freep.cn/638183/web/icon/unmuted.svg',
mute: 'https://638183.freep.cn/638183/web/icon/muted.svg',
prev: 'https://638183.freep.cn/638183/web/icon/prev.svg',
next: 'https://638183.freep.cn/638183/web/icon/next.svg',
circs: 'https://638183.freep.cn/638183/web/icon/circs.svg',
circ1: 'https://638183.freep.cn/638183/web/icon/circ1.svg',
};
const setVolume = (val) => Math.min(1, Math.max(0, val));
const scrollX = (elm, x) => {
if (elm.scrollWidth < elm.offsetWidth) return;
elm.scroll({left: x, top: 0, hehavior: 'smooth'});
};
const ranAr = (total) => {
let ar = Array(total).fill().map((_,key) => key);
ar.sort(() => 0.5 - Math.random());
return ar;
};
playAr = ranAr(musics.length);
musics.forEach((item,key) => {
let p = document.createElement('p');
p.className = 'list list1';
p.dataset.idx = key + 1;
p.innerText = p.title = item[1];
p.onclick = () => mplay(key);
mlist.appendChild(p);
lists.push(p);
});
const mplay = (idx = null) => {
if(musics.length === 0 || (idx !== null && idx === currentId)) return;
if(idx === null) {
if(playAr.length === 0) playAr = ranAr(musics.length);
let tmpIdx = Math.floor(Math.random() * playAr.length);
idx = playAr[tmpIdx];
playAr.splice(tmpIdx, 1);
}
aud.src = musics[idx][0];
if(idx !== null && idx !== currentId) aud.play();
lists[idx].className = 'list list2';
if(currentId !== null) lists[currentId].className = 'list list1';
currentId = idx;
scrollX(mlist, lists[currentId].offsetLeft - 22);
};
const setMute = () => {
if(lastVolume === 0) return;
muted = !muted;
muted ? aud.volume = 0 : aud.volume = lastVolume;
};
const s2m = (seconds) => {
const secs = Math.floor(seconds || 0);
return `${String(secs/60|0).padStart(2,'0')}:${String(secs%60).padStart(2,'0')}`;
};
const mState = () => {
btnPlay.src = aud.paused ? btnImg.play : btnImg.pause;
btnPlay.title = (aud.paused ? '播放' : '暂停') + ' (Alt+X)';
};
document.addEventListener('keydown', e => {
if(!e.altKey) return;
switch (e.keyCode) {
case 38:
btnPrev.click();
break;
case 40:
btnNext.click();
break;
case 74:
setMute();
break;
case 83:
btnCirc.click();
break;
case 88:
btnPlay.click();
break;
case 187: case 107:
aud.volume = setVolume(aud.volume + 0.1);
lastVolume = aud.volume;
break;
case 189: case 109:
aud.volume = setVolume(aud.volume - 0.1);
lastVolume = aud.volume;
break;
default:
return;
}
});
aud.onplaying = aud.onpause = () => mState();
aud.onended = () => { circ ? mplay() : aud.play(); };
aud.ontimeupdate = () => {
prog.style.setProperty('--prg', aud.currentTime/aud.duration*100 +'%');
tMsg1.innerText = s2m(aud.currentTime);
tMsg2.innerText = s2m(aud.duration);
};
aud.onvolumechange = () => {
btnMute.src = aud.volume === 0 ? btnImg.mute : btnImg.unmute;
volume.value = aud.volume;
}
btnPlay.onclick = () => aud.paused ? aud.play() : aud.pause();
btnPrev.onclick = () => { if(currentId > 0) mplay(currentId - 1); };
btnNext.onclick = () => { if(currentId < musics.length - 1) mplay(currentId + 1); };
btnMute.onclick = () => setMute();
btnCirc.onclick = () => {
circ = !circ;
btnCirc.src = circ ? btnImg.circs : btnImg.circ1;
btnCirc.title = (circ ? '随机循环' : '单曲循环') + ' (Alt+S)';
};
volume.onchange = () => aud.volume = lastVolume = volume.value;
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
prog.onmousemove = (e) => prog.title = s2m(e.offsetX * aud.duration / prog.offsetWidth);
volwrap.onmousemove = () => volwrap.title = '音量 : ' + volume.value + ' (Alt++/-)';
mboard.onmouseenter = () => scrollX(mlist, lists[currentId].offsetLeft - 22);
mlist.onwheel = (e) => {
const delta = Math.abs(e.deltaX) > 0 ? e.deltaX : e.deltaY;
mlist.scrollLeft += delta * 1.5;
e.preventDefault();
};
mplay();
</script>
发表于 2025-2-23 10:15
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2025-2-23 10:19
发表于 2025-2-23 10:21
