三体 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> <h3>帖子代码</h3>
<div id="hEdiv"><pre id="hEpre">
<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>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script>
本帖最后由 马黑黑 于 2025-2-23 20:41 编辑
支持组合快捷键操作的单曲音频播放器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);
本帖最后由 马黑黑 于 2025-2-23 21:01 编辑
本播放器支持LRC歌词同步，方法简述如下（LRC UI设置请参照以前的同类模块说明）：
一、声明歌词数组，格式如下（geci为自定义命名）：
var geci = [
,
,
,
,
];
二、配置运行参数：
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文件可够大的。。
又是一个大工程。。。{:4_199:}
看文件名和CSS里预留了歌词位置。。{:4_173:}这个好，双版的，一次封包成功 播放器隐去，鼠标触碰到画面显示出来。。
最大化让画面显示出来。。这个考虑很周到。。
试了四项的键盘控制，很灵敏，好用。。{:4_174:} 看楼位还有说明，等待中。。。{:4_173:} 耳目一新的美帖，谢谢马老师精彩分享{:4_191:} 杨帆 发表于 2025-2-23 20:08
耳目一新的美帖，谢谢马老师精彩分享
{:4_190:} 花飞飞 发表于 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
看到这个键盘控制单曲版进贴子了，跑来瞅瞅代码。。
大眼看去只有一丢丢，没有想象中的多嘛。
这是打包封 ...
比过去的封装还要省事儿 这个太适合俺用了 有一股探索宇宙的气势，精品，欣赏学习了{:4_204:} 朵拉 发表于 2025-2-23 20:28
有一股探索宇宙的气势，精品，欣赏学习了
{:4_190:} 绿叶清舟 发表于 2025-2-23 20:27
这个太适合俺用了
可以偷懒{:4_170:}
不过要做出个性化的效果，需要做一些小配置，请查看代码楼下面的两个楼层