三体 Opening Theme 2021

马黑黑

马黑黑

帖子代码

<style>
	@import 'https://638183.freep.cn/638183/web/mod/mp3player_lrc.css';
	#tz { margin: 30px 0 30px calc(50% - 593px); background: url('https://638183.freep.cn/638183/t24/webp3/3ti.webp') no-repeat center/cover; }
	#mplayer { bottom: 20px; background: rgba(247,202,139,.65); }
	#fsbtn { top: 15px; }
</style>

<div id="tz" class="pa">
	<audio src="https://music.163.com/song/media/outer/url?id=1873347588"></audio>
	<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/04/03/08/video63641e7c0c46e.mp4" autoplay loop muted></video>
	<div id="fsbtn" class="fsbtn"></div>
</div>

<script type="module">
	import { hcplay } from 'https://638183.freep.cn/638183/web/mod/mp3player_lrc.js';
	import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
	hcplay(tz);
	fscreen.fs(tz, fsbtn);
</script>

马黑黑

支持组合快捷键操作的单曲音频播放器UI可以通过CSS实现自定义样式、通过JS配置按钮：

一、播放器主界面（CSS）：

#mplayer {
    bottom: 20px; /* 位置，支持 left、top、right、bottom 等属性 */
    background: rgba(247,202,139,.65); /* 背景色，支持渐变、图片等 */
}

二、进度条（CSS）：

#prog {
     --track: gray; /* 底色 */
     --prog: red; /* 进度指示色 */
}

三、按钮配置，不配置使用模块默认的svg图片，所需小图片高宽一致（JS）：

（一）声明图片对象变量（mypics是自定义命名）：

var mypics = {
    play: '播放按钮图片地址',
    pause: '暂停按钮图片地址',
    mute: '恢复声音图片地址',
    unmute: '静音图片地址',
};

（二）添加参数：

hcplay(tz, mypics);

马黑黑

本播放器支持LRC歌词同步，方法简述如下（LRC UI设置请参照以前的同类模块说明）：

一、声明歌词数组，格式如下（geci为自定义命名）：

var geci = [
    [2.0,"歌句一",3.1],
    [10.9,"歌句二",1.8],
    [16.12,"…………",3.5],
    [12.75,"歌句N",6.2],
];

二、配置运行参数：

hcplay(tz, null, geci);

【注意】hcplay() 函数参数的顺序：第一个参数 tz 指 id="tz" 的帖子父元素 id，必须；第二个参数是按钮图片配置，如果没有作配置，请使用 null 表示；第三个参数是歌词数组变量参数，和前面声明的歌词数组变量名称相一致，如果不配置歌词，请用 null 表示。第二个、第三个参数可选，同时可用 null 表示，当有歌词但不配置按钮图片时，第二个参数必须用 null 表示。以下的参数配置都是有效的（假设所有变量都已事前声明过）：

hcplay(tz); //纯音乐帖适用
hcplay(tz, mypics); //自定义了按钮图片，纯音帖适用
hcplay(tz, null, geci); //LRC歌词同步帖（未配置自定义按钮）
hcplay(tz, mypics, geci); //LRC歌词同步（配置了自定义按钮图片）

花飞飞

看到这个键盘控制单曲版进贴子了，跑来瞅瞅代码。。
大眼看去只有一丢丢，没有想象中的多嘛。
这是打包封装了。。

花飞飞

艾玛，看了下封起来的代码，这个打包的CSS和打包JS文件可够大的。。
又是一个大工程。。。

花飞飞

看文件名和CSS里预留了歌词位置。。这个好，双版的，一次封包成功

花飞飞

播放器隐去，鼠标触碰到画面显示出来。。
最大化让画面显示出来。。这个考虑很周到。。
试了四项的键盘控制，很灵敏，好用。。

花飞飞

看楼位还有说明，等待中。。。

杨帆

耳目一新的美帖，谢谢马老师精彩分享

马黑黑

杨帆 发表于 2025-2-23 20:08
耳目一新的美帖，谢谢马老师精彩分享

马黑黑

花飞飞 发表于 2025-2-23 19:59
看楼位还有说明，等待中。。。

等下就去写

马黑黑

花飞飞 发表于 2025-2-23 19:59
播放器隐去，鼠标触碰到画面显示出来。。
最大化让画面显示出来。。这个考虑很周到。。
试了四项的键盘控 ...

组合快捷键一旦实验成功，用到这里就不是问题

马黑黑

花飞飞 发表于 2025-2-23 19:56
看文件名和CSS里预留了歌词位置。。这个好，双版的，一次封包成功

单曲的LRC歌词同步得有

马黑黑

花飞飞 发表于 2025-2-23 19:55
艾玛，看了下封起来的代码，这个打包的CSS和打包JS文件可够大的。。
又是一个大工程。。。

3、4kb酱紫

马黑黑

花飞飞 发表于 2025-2-23 19:52
看到这个键盘控制单曲版进贴子了，跑来瞅瞅代码。。
大眼看去只有一丢丢，没有想象中的多嘛。
这是打包封 ...

比过去的封装还要省事儿

绿叶清舟

这个太适合俺用了

朵拉

有一股探索宇宙的气势，精品，欣赏学习了

马黑黑

朵拉 发表于 2025-2-23 20:28
有一股探索宇宙的气势，精品，欣赏学习了

马黑黑

绿叶清舟 发表于 2025-2-23 20:27
这个太适合俺用了

可以偷懒

不过要做出个性化的效果，需要做一些小配置，请查看代码楼下面的两个楼层