孤鸟的歌
<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 = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
hcplay(pa, geci);
fscreen.fs(pa, fsbtn);
</script>
<h2>代码</h2>
<div id="hEdiv"><pre id="hEpre">
<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 = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
hcplay(pa, geci);
fscreen.fs(pa, fsbtn);
</script>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script>
本帖是脚镯播放器模块的LRC歌词同步演示。
（一）CSS设置除开尺寸、定位等少量几个属性，其余的均使用模块的默认设置。如果需要自定义一些风格，可参阅 脚镯播放控制器配置说明 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! 加以实现，具体示例可参考 菩萨吟 - 音乐沙龙 - 花潮论坛 - Powered by Discuz! 一帖。
（二）如果需要使用原生LRC歌词同步制作歌词同步帖，可以在JS另外添加一个转换模块，详情请参考：绿·山水吟（测试audlrc模块） - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!
未尽事宜欢迎讨论！
这个是升级的1.0版的css封装，带了彩色脚链小球呢。漂亮{:4_199:} 这个不光给出了带歌词同步的例子，还有新的变色脚链。太棒了{:4_199:} 小播还是绘制的，其实默认的就是这个，前一个被加了背景小花{:4_187:} 两个实例出来，可以更清楚地体会默认内容了，原来珠链本身默认就是变色的，刚看明白{:4_173:} 本帖最后由 杨帆 于 2024-12-3 12:20 编辑
谢谢马老师通过相关模块的植入，一定程度上实现了发音画贴的自动化、智能化、高效化。
同时，为发音画帖DIY留有空间，一定程度上满足了不同层次的发帖需求。
庆祝老师庄重推出发音画贴的经典模板{:4_191:}
这个随机色如彩色玉石一般的质地，五彩缤纷的，十分好看。。
按纽缺省的默认效果也是绝美。。过渡自然。。
画面也美，小播位置恰巧在鸟儿的视线之内。。。
视频动态粒子星光点点，画面更加灵动 马黑黑 发表于 2024-12-3 08:19
本帖是脚镯播放器模块的LRC歌词同步演示。
（一）CSS设置除开尺寸、定位等少量几个属性，其余的均使用模 ...
本贴演示的是花潮LRC歌词使用，
这个原生歌词的引用方法也给了。。
更加全面。。{:4_173:} 花飞飞 发表于 2024-12-3 17:02
这个随机色如彩色玉石一般的质地，五彩缤纷的，十分好看。。
按纽缺省的默认效果也是绝美。。过渡自然。。 ...
{:4_190:} 花飞飞 发表于 2024-12-3 17:04
本贴演示的是花潮LRC歌词使用，
这个原生歌词的引用方法也给了。。
更加全面。。
不过效果上花潮格式的更准确一些 本帖最后由 朵拉 于 2024-12-3 17:16 编辑
哇，这款播放器好看耶{:4_178:}
另：学生的作业，批改一下哈{:4_190:}
红影 发表于 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
谢谢马老师通过相关模块的植入，一定程度上实现了发音画贴的自动化、智能化、高效化。
同时，为发音画帖 ...
{:4_190:} 马黑黑 发表于 2024-12-3 17:14
那是假的版本号，都是同一个文件
哦，还以为是新的，看到加了1.0{:4_173:}