宇宙基地

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

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

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

x

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

代码

<style>
	@import 'https://638183.freep.cn/638183/web/mod/mp3splayer.css';
	#tz { margin: 30px 0 30px calc(50% - 583px); background: url('https://638183.freep.cn/638183/t24/webp3/yvjd.webp') no-repeat center/cover; overflow: hidden; }
	#mplayer { --yy: -280px; --color1: snow; --color2: yellow; background: #333; }
	#mplayer img { filter: invert(100%); }
	#fsbtn { top: 15px; color: white; }
</style>

<div id="tz" class="pa">
	<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/21/52/49/video6363c7b186cbc.mp4" autoplay loop muted></video>
</div>

<script type="module">
	import { hcplay } from 'https://638183.freep.cn/638183/web/mod/mp3splayer.js';
	var musics = [
		['https://music.163.com/song/media/outer/url?id=2628307378','shadow'],
		['https://music.163.com/song/media/outer/url?id=2628307456','shadow (Mashup)'],
		['https://music.163.com/song/media/outer/url?id=2629924310','Nev Love'],
		['https://music.163.com/song/media/outer/url?id=2616117547','Simple Song'],
		['https://music.163.com/song/media/outer/url?id=2648486638','Smiling eyes'],
		['https://music.163.com/song/media/outer/url?id=2647124974','moonlight'],
		['https://music.163.com/song/media/outer/url?id=2626814416','Moment'],
		['https://music.163.com/song/media/outer/url?id=2122053865','Phantasm'],
		['https://music.163.com/song/media/outer/url?id=2673222356','Сумасшедший священник Part2'],
		['https://music.163.com/song/media/outer/url?id=2644548088','sweet and sour'],
		['https://music.163.com/song/media/outer/url?id=2119251365','Raven'],
		['https://music.163.com/song/media/outer/url?id=2642679776','Lighting Moment (PHONK)'],
		['https://music.163.com/song/media/outer/url?id=2640775704','winter'],
		['https://music.163.com/song/media/outer/url?id=2640193791','cloudy days'],
		['https://music.163.com/song/media/outer/url?id=2646335823','red roses'],
		['https://music.163.com/song/media/outer/url?id=2137468495',"I'll Do It(PHONK)"],
		['https://music.163.com/song/media/outer/url?id=2144251403','A fool(迈巴赫版)'],
		['https://music.163.com/song/media/outer/url?id=2641139962','hostages(phonk)'],
		['https://music.163.com/song/media/outer/url?id=2628307378','shadow'],
		['https://music.163.com/song/media/outer/url?id=1993358223','Be Alive'],
	];
	hcplay(tz,null,musics);
</script>

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

本帖最后由马黑黑于 2025-2-24 13:02 编辑

支持快捷组合键多曲音频播放器界面配置说明：

#mplayer { --yy: -280px; --color1: snow; --color2: yellow; background: #333; }
#mplayer img { filter: invert(100%); }

--yy用于设定播放条位置。它默认处于垂直居中位置，--变量取负值表示上移，正值表示下移。数值的大小取决于设计意愿，设置时兼顾一下歌曲列表。可以不配置 --yy 变量；

--color1 和 --color2 变量用于修饰音乐列表文本颜色，--color1 是基本颜色，--color2 是当前播放和鼠标指针移动到时的文本颜色。可以不配置这两个颜色，不配置时默认黑+红；

background 是播放条背景色，不设置时默认使用米黄色。当播放条使用了深色背景，图片按钮可以使用滤镜处理一下，将黑色的描边颜色转为白色或灰色，具体做法可自行参阅 css filter 的相关知识点。

歌曲列表：

用数组表示，使用二维数组。例如——

var gequ = [
['歌曲1地址', '歌名'],
['歌曲2地址', '歌名'],
['歌曲3地址', '歌名'],
];

理论上放多少首歌都行，但不建议超过100. 然后，注意在配置 hcplay() 函数时使用上面声明的歌曲数组变量名称：

hcplay(tz, null, gequ);

函数 hcplay() 函数的引用和配置方法和前面的单曲播放器大同小异，函数的第二个参数也是按钮图片，用 null 表示放弃配置按钮图片、使用模块默认的图片做按钮。图片的配置将在下一楼说明。

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

本帖最后由马黑黑于 2025-2-24 13:12 编辑

播放器按钮小图片的配置：

（一）声明对象变量（将图片uri写入对应的小引号内，其它不要改动）

var imgs = {
play: '播放图片地址',
pause: '暂停图片地址',
unmute: '恢复声音图片地址',
mute: '静音图片地址',
prev: '前一曲图片地址',
next: '下一曲图片地址',
circs: '随即循环图片地址',
circ1: '单曲循环图片地址',
};

（二）配置函数参数

hcplay(tz, imgs, gequ);

注意配置参数所使用的变量名称和前面声明的一致即可；gequ 变量是上一楼声明的歌曲数组变量名称。这些变量名都可以自己定义，不一定用 imgs 和 gequ 之类的。

马黑黑 · 发表于 2025-2-24 13:17

播放器使用默认配置的效果：宇宙基地

代码：

<style>
@import 'https://638183.freep.cn/638183/web/mod/mp3splayer.css';
#tz { margin: 30px 0 30px calc(50% - 513px); background: url('https://638183.freep.cn/638183/t24/webp3/yvjd.webp') no-repeat center/cover; overflow: hidden; }
#fsbtn { top: 15px; color: white; }
</style>
<div id="tz" class="pa">
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/21/52/49/video6363c7b186cbc.mp4" autoplay loop muted></video>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/mp3splayer.js';
var musics = [
['https://music.163.com/song/media/outer/url?id=2628307378','shadow'],
['https://music.163.com/song/media/outer/url?id=2628307456','shadow (Mashup)'],
['https://music.163.com/song/media/outer/url?id=2629924310','Nev Love'],
['https://music.163.com/song/media/outer/url?id=2616117547','Simple Song'],
['https://music.163.com/song/media/outer/url?id=2648486638','Smiling eyes'],
['https://music.163.com/song/media/outer/url?id=2647124974','moonlight'],
['https://music.163.com/song/media/outer/url?id=2626814416','Moment'],
['https://music.163.com/song/media/outer/url?id=2122053865','Phantasm'],
['https://music.163.com/song/media/outer/url?id=2673222356','Сумасшедший священник Part2'],
['https://music.163.com/song/media/outer/url?id=2644548088','sweet and sour'],
['https://music.163.com/song/media/outer/url?id=2119251365','Raven'],
['https://music.163.com/song/media/outer/url?id=2642679776','Lighting Moment (PHONK)'],
['https://music.163.com/song/media/outer/url?id=2640775704','winter'],
['https://music.163.com/song/media/outer/url?id=2640193791','cloudy days'],
['https://music.163.com/song/media/outer/url?id=2646335823','red roses'],
['https://music.163.com/song/media/outer/url?id=2137468495',"I'll Do It(PHONK)"],
['https://music.163.com/song/media/outer/url?id=2144251403','A fool(迈巴赫版)'],
['https://music.163.com/song/media/outer/url?id=2641139962','hostages(phonk)'],
['https://music.163.com/song/media/outer/url?id=2628307378','shadow'],
['https://music.163.com/song/media/outer/url?id=1993358223','Be Alive'],
];
hcplay(tz,null,musics);
</script>