集成快捷键的单曲音频播放器

马黑黑 · 发表于 2025-2-21 12:24

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

效果

代码

<style>
	#mboard { width: 420px; 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 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: 45px; 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; }
</style>

<div id="mboard">
	<img id="btnPlay" src="https://638183.freep.cn/638183/web/icon/play.svg" title="播放/暂停(Alt+X)" 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="" />
	<div id="volwrap"><input id="volume" type="range" min="0" max="1" step="0.1" value="1" /></div>
</div>
<p><audio id="aud" src="https://music.163.com/song/media/outer/url?id=1321297488" autoplay loop></audio></p>

<script>
	
var lastVolume = 1, muted = false;

var imgAr = [
	'https://638183.freep.cn/638183/web/icon/play.svg',
	'https://638183.freep.cn/638183/web/icon/pause.svg',
	'https://638183.freep.cn/638183/web/icon/unmuted.svg',
	'https://638183.freep.cn/638183/web/icon/muted.svg',
];

var setVolume = (val) => Math.min(1, Math.max(0, val));

var setMute = () => {
	if(lastVolume === 0) return;
	muted = !muted;
	muted ? (aud.volume = 0, btnMute.src = imgAr[3]) : (aud.volume = lastVolume, btnMute.src = imgAr[2]);
};

var s2m = (seconds) => {
    const secs = Math.floor(seconds || 0);
    return `${String(secs/60|0).padStart(2,'0')}:${String(secs%60).padStart(2,'0')}`;
};

var mState = () => {
	btnPlay.src = aud.paused ? imgAr[0] : imgAr[1];
	btnPlay.title = (aud.paused ? '播放' : '暂停') + ' (Alt+X)';
};

document.addEventListener('keydown', e => {
	if(!e.altKey) return;
	switch (e.keyCode) {
		case 88:
			btnPlay.click();
			break;
		case 74:
			setMute();
			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.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 ? imgAr[3] : imgAr[2];
	volume.value = aud.volume;
}

btnPlay.onclick = () => aud.paused ? aud.play() : aud.pause();
btnMute.onclick = () => setMute();
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.onmouseover = () => volwrap.title = '音量 : ' + volume.value + ' (Alt++/-)'

</script>

马黑黑 · 发表于 2025-2-21 12:31

界面可以：

一、修改 #mboard 相关属性加以修饰。若主元素宽度改变，应相应修改 #prog 的 width 属性值；

二、按钮图片可以更改，若更改，一是相应改变两个 img 的 src 属性值，二是按顺序改变 js 代码中的 imgAr 存放的图片地址；

三、音量滑杆使用的是 input type[range] 做成，不太好看，可以考虑：一是使用CSS美化，代码量相对较大、兼容性不太保证，二是使用 HTML 标签仿进度条的做法，js 需要多加点代码。