宇宙基地

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

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

<h2>代码</h2>
<div id="hEdiv"><pre id="hEpre">
<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>
</pre></div>

<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</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>

红影发表于 2025-2-24 13:57

这个是多曲播放的，那么多设置都封装起来了，还能自己修改，真好{:4_199:}

红影发表于 2025-2-24 14:00

播放器被隐藏了，鼠标触动则出现，触动播放器则歌曲列表出现。移走鼠标，播放器先回到上方，再隐去，这一步步的，设置都那么清晰呢{:4_199:}

红影发表于 2025-2-24 14:02

才注意到，随机循环和单曲循环的图图还是有差异的，这图图的表述十分清晰，太赞了{:4_199:}

红影发表于 2025-2-24 14:03

这个功能这么齐全，封装好的代码又这么简洁，太赞了{:4_199:}

红影发表于 2025-2-24 14:04

这个好，可以一首首听歌，遇到自己喜欢的还能用单曲循环一次听个够{:4_199:}

梦江南 发表于 2025-2-24 14:24

哇，宇宙基地里装的都是歌曲和图片啊！{:4_199:}

朵拉发表于 2025-2-24 17:26

老师又一力作，精彩，欣赏学习了{:4_204:}

花飞飞 发表于 2025-2-24 19:40

刚看到有两版，位置和颜色都不同。。就猜说坛子里应该发的是黑色儿的吧。。{:4_173:}果然如此，深色的更耐看。

花飞飞 发表于 2025-2-24 19:44

这个多曲的入贴后太帅了。。
比想象中的更全面，位置设置了灵活移动。。
键盘操作响应灵敏，白天试的时候，发现它居然还治好了我的键盘。{:4_170:}

花飞飞 发表于 2025-2-24 19:48

互动好玩呐，呼唤出来后可以跟它玩很久啊。。{:4_173:}
多曲可以做专辑。。。
配上歌手背景图，可以做某人专辑了。。

马黑黑 发表于 2025-2-24 19:50

花飞飞发表于 2025-2-24 19:48
互动好玩呐，呼唤出来后可以跟它玩很久啊。。
多曲可以做专辑。。。
配上歌手背景图，可以做某 ...

嗯嗯，做 @樵歌的专辑挺合适的

花飞飞 发表于 2025-2-24 19:50

这一组听着史诗级的，震撼。。。
似乎跟之前网站首页里的六十多首还不一样。。
这些音乐也花不少时间吧。。。
细心耐心的典范。。作品都这么精致完美{:5_116:}。。

马黑黑 发表于 2025-2-24 19:51

花飞飞发表于 2025-2-24 19:44
这个多曲的入贴后太帅了。。
比想象中的更全面，位置设置了灵活移动。。
键盘操作响应灵敏，白天试的时候 ...

这是使用了 e.key 而非 e.keyCode，前者是兼容属性，后者是标准属性

花飞飞 发表于 2025-2-24 19:51

马黑黑发表于 2025-2-24 19:50
嗯嗯，做 @樵歌的专辑挺合适的

{:4_170:}我第一想到的居然是周深，还有王菲

马黑黑 发表于 2025-2-24 19:51

花飞飞发表于 2025-2-24 19:40
刚看到有两版，位置和颜色都不同。。就猜说坛子里应该发的是黑色儿的吧。。果然如此，深色的更耐 ...

黑是耐看滴

页: [1] 2 3 4 5 6 7

花潮论坛's Archiver

宇宙基地