孤鸟的歌

马黑黑

HCPlayer

马黑黑

代码

<style>
	@import 'https://638183.freep.cn/638183/web/mod/anklet_lrc.css?v=1.0';
	#pa { margin: 30px 0 30px calc(50% - 721px); width:1280px; height: 700px; background: url('https://638183.freep.cn/638183/t24/webp3/gunn.webp') no-repeat center/cover; }
	#mplayer { width: 200px; height:200px; left: 20%; bottom: 40px; }
	#lrc { right: 40px; bottom: 30px; }
	#fsbtn { left: 50px; bottom: 110px; }
</style>

<div id="pa" class="pa">
	<audio src="https://music.163.com/song/media/outer/url?id=29715557"></audio>
	<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/03/14/10/49/56/video640fe0d41affe.mp4" autoplay loop muted></video>
	<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
	<div id="fsbtn" class="fsbtn"></div>
</div>

<script type="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/anklet_lrc.js';
var geci = [
	[2.42,"孤鸟的歌",7.5],
	[9.93,"词曲唱 : 马頔",9.5],
	[19.39,"越过翻腾的山梁",3.2],
	[23.7,"飞过高耸的海洋",3.0],
	[28.75,"你假装看透了生活",3.3],
	[32.95,"只是和最初聚少离多",3.9],
	[38.32,"也期待一场相遇",3.4],
	[42.91,"不会醒来又分离",3.0],
	[47.75,"如果你说别再出发",3.4],
	[52.3,"他会杀死过去",3.7],
	[57.66,"别害怕别害怕",3.8],
	[62.24,"只是悲欢离合的梦啊",3.5],
	[67.16,"相信吧相信吧",3.8],
	[71.57,"听他唱完这首歌",3.2],
	[76.35,"总有一天我会变成一只不再垂涎自由的鸟",8.3],
	[85.79,"在你的笼子里陪着你衰老",5.9],
	[95.64,"就算孤岛已没有四季",4.1],
	[100.07,"也没人提及你的美丽",3.6],
	[105.82,"我还是要飞去那里",5.8],
	[137.14,"别害怕别害怕",3.6],
	[141.24,"只是多愁善感的梦啊",3.7],
	[146.42,"相信吧相信吧",3.8],
	[150.88,"当你唱起这首歌",3.0],
	[157.97,"总有一天我会放弃天空步履蹒跚",8.2],
	[167.59,"你在你的未来双鬓斑白",6.0],
	[177.19,"所有那些过往悲伤的离别再与你无缘",8.0],
	[187.35,"亲吻你最后的时光",5.1],
	[197.12,"永远有多远",2.5],
	[201.65,"我们不知道",2.7],
	[206.5,"未来在哪里",2.8],
	[211.39,"一起找",3.1]
];
hcplay(pa, geci);
fscreen.fs(pa, fsbtn);
</script>

马黑黑

本帖是脚镯播放器模块的LRC歌词同步演示。

（一）CSS设置除开尺寸、定位等少量几个属性，其余的均使用模块的默认设置。如果需要自定义一些风格，可参阅 脚镯播放控制器配置说明 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! 加以实现，具体示例可参考 菩萨吟 - 音乐沙龙 - 花潮论坛 - Powered by Discuz! 一帖。

（二）如果需要使用原生LRC歌词同步制作歌词同步帖，可以在JS另外添加一个转换模块，详情请参考：绿·山水吟（测试audlrc模块） - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!

未尽事宜欢迎讨论！

红影

这个是升级的1.0版的css封装，带了彩色脚链小球呢。漂亮

红影

这个不光给出了带歌词同步的例子，还有新的变色脚链。太棒了

红影

小播还是绘制的，其实默认的就是这个，前一个被加了背景小花

红影

两个实例出来，可以更清楚地体会默认内容了，原来珠链本身默认就是变色的，刚看明白

杨帆

谢谢马老师通过相关模块的植入，一定程度上实现了发音画贴的自动化、智能化、高效化。

同时，为发音画帖DIY留有空间，一定程度上满足了不同层次的发帖需求。

庆祝老师庄重推出发音画贴的经典模板

花飞飞

这个随机色如彩色玉石一般的质地，五彩缤纷的，十分好看。。
按纽缺省的默认效果也是绝美。。过渡自然。。
画面也美，小播位置恰巧在鸟儿的视线之内。。。
视频动态粒子星光点点，画面更加灵动

花飞飞

马黑黑 发表于 2024-12-3 08:19
本帖是脚镯播放器模块的LRC歌词同步演示。

（一）CSS设置除开尺寸、定位等少量几个属性，其余的均使用模 ...

本贴演示的是花潮LRC歌词使用，
这个原生歌词的引用方法也给了。。
更加全面。。

马黑黑

花飞飞 发表于 2024-12-3 17:02
这个随机色如彩色玉石一般的质地，五彩缤纷的，十分好看。。
按纽缺省的默认效果也是绝美。。过渡自然。。 ...

马黑黑

花飞飞 发表于 2024-12-3 17:04
本贴演示的是花潮LRC歌词使用，
这个原生歌词的引用方法也给了。。
更加全面。。

不过效果上花潮格式的更准确一些

朵拉

哇，这款播放器好看耶
另：学生的作业，批改一下哈

马黑黑

红影 发表于 2024-12-3 11:14
这个是升级的1.0版的css封装，带了彩色脚链小球呢。漂亮

那是假的版本号，都是同一个文件

马黑黑

红影 发表于 2024-12-3 11:22
这个不光给出了带歌词同步的例子，还有新的变色脚链。太棒了

谢棒

马黑黑

红影 发表于 2024-12-3 11:30
小播还是绘制的，其实默认的就是这个，前一个被加了背景小花

可以使用默认的，可以自定义

马黑黑

红影 发表于 2024-12-3 11:32
两个实例出来，可以更清楚地体会默认内容了，原来珠链本身默认就是变色的，刚看明白

说明里讲到的吧

马黑黑

杨帆 发表于 2024-12-3 11:55
谢谢马老师通过相关模块的植入，一定程度上实现了发音画贴的自动化、智能化、高效化。

同时，为发音画帖 ...

红影

马黑黑 发表于 2024-12-3 17:14
那是假的版本号，都是同一个文件

哦，还以为是新的，看到加了1.0