晚来天欲雪
<style>@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/7/th.jpg') no-repeat center/cover; color: lightgreen; }
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
#lrc { left: 20px; top: 25px; }
#msvg { position: absolute; width: 10vw; height: 10vw; bottom: 60px; cursor: pointer; }
</style>
<div id="pa" class="pa">
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/2475824/00/01/59/5b46b977d9e77.mp4" autoplay loop muted></video>
<svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"><title>播放/暂停(Alt+X)</title></svg>
</div>
<script>
var gc = `晚来天欲雪\n歌手：恋恋故人难 / 云之泣\n编曲：林一卡/冯帆\n定是梨花月 太过于眷恋\n才不慎沾染 动心的谎言\n你迢迢一眼 便撞入春天\n举世跋涉来相见\n当飞花字句 敲打在窗棂\n霜寒不巧来拜临\n从你的眼里 窥见红尘的倒影\n云梦苍苍摇曳不成形\n或许你曾 借沧海一粟 拥星河一路\n投奔鼎沸人海的静默处\n而我 藏叶底一度 踏岁月一路\n只为那时 有春风轻拂\n烟雨他贪恋 些微的温暖\n不惜拜别后 孤身下人间\n任跌落流年 任扑朔梦蝶\n举杯饮下这阔绝\n怕晚岚辞行 怅然梦难醒\n你俯身湖面捞星\n将隐秘心事 都悉数赠给青荇\n总会有人来读懂倾听\n原来你曾 借沧海一粟 拥星河一路\n投奔鼎沸人海的静默处\n而我 藏叶底一度 踏岁月一路\n只为那时 有春风轻拂\n胜却人间无数\n借沧海一粟 拥星河一路\n投奔鼎沸人海的静默处\n而我 藏叶底一度 踏岁月一路\n只为那时 有春风轻拂\n谁化名万古 竟痴心来赴\n捧一抔爱火余烬的焦土\n待到 隔山起浓雾 看不清前路\n君心我心 还始终如故\n走向落白深处\n制作人：冯帆/林一卡\n弦乐编写：冯帆\n弦乐监制：刘辉\n弦乐录制：辉煌之音管弦乐团\n弦乐录音棚：2496 Top music\n弦乐录音师：Rey @2496 Top music\n和声编写：软软的明天\n和声：软软的明天\n混音&母带：冯帆\n制作统筹：冀玉静/景她\n插画绘图：EFA发_\n视觉设计：kyrja\n监制：闫卡夫\n策划：清舆/景她\n企划：三糙文化\n发行：纳吉音 NEGIA /MIRAI Tokyo Inc`;
var options = {
pa: '.pa',
urls: [['https://music.163.com/song/media/outer/url?id=1466822129', '1']],
btns: ,
};
loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
loadJs('https://638183.freep.cn/638183/web/api/yslrc.min.js', function() {
loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
});
});
function tzRun() {
var aud = new AudPlayer(options);
LRC(aud.pa, aud.aud, gc, 0);
var dr = _dr(msvg);
dr.setsvg({width: 300, height: 300, viewBox: '-200 -200 400 400'});
dr.g('g1').set('class', 'rotate');
dr.path('M-140 0 L-165 -25 L-190 0 L-165 25 L-140 0 L140 0 L165 25 L 190 0 L165 -25 L 140 0', 'green', 'lightgreen', 4).addTo('g1').rotates(6, 180);
}
function loadJs(url, callback) {
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.onload = function() {
if (callback) callback();
};
document.head.appendChild(script);
}
</script> 帖子代码
<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/7/th.jpg') no-repeat center/cover; color: lightgreen; }
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
#lrc { left: 20px; top: 25px; }
#msvg { position: absolute; width: 10vw; height: 10vw; bottom: 60px; cursor: pointer; }
</style>
<div id="pa" class="pa">
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/2475824/00/01/59/5b46b977d9e77.mp4" autoplay loop muted></video>
<svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"><title>播放/暂停(Alt+X)</title></svg>
</div>
<script>
var gc = `晚来天欲雪\n歌手：恋恋故人难 / 云之泣\n编曲：林一卡/冯帆\n定是梨花月 太过于眷恋\n才不慎沾染 动心的谎言\n你迢迢一眼 便撞入春天\n举世跋涉来相见\n当飞花字句 敲打在窗棂\n霜寒不巧来拜临\n从你的眼里 窥见红尘的倒影\n云梦苍苍摇曳不成形\n或许你曾 借沧海一粟 拥星河一路\n投奔鼎沸人海的静默处\n而我 藏叶底一度 踏岁月一路\n只为那时 有春风轻拂\n烟雨他贪恋 些微的温暖\n不惜拜别后 孤身下人间\n任跌落流年 任扑朔梦蝶\n举杯饮下这阔绝\n怕晚岚辞行 怅然梦难醒\n你俯身湖面捞星\n将隐秘心事 都悉数赠给青荇\n总会有人来读懂倾听\n原来你曾 借沧海一粟 拥星河一路\n投奔鼎沸人海的静默处\n而我 藏叶底一度 踏岁月一路\n只为那时 有春风轻拂\n胜却人间无数\n借沧海一粟 拥星河一路\n投奔鼎沸人海的静默处\n而我 藏叶底一度 踏岁月一路\n只为那时 有春风轻拂\n谁化名万古 竟痴心来赴\n捧一抔爱火余烬的焦土\n待到 隔山起浓雾 看不清前路\n君心我心 还始终如故\n走向落白深处\n制作人：冯帆/林一卡\n弦乐编写：冯帆\n弦乐监制：刘辉\n弦乐录制：辉煌之音管弦乐团\n弦乐录音棚：2496 Top music\n弦乐录音师：Rey @2496 Top music\n和声编写：软软的明天\n和声：软软的明天\n混音&母带：冯帆\n制作统筹：冀玉静/景她\n插画绘图：EFA发_\n视觉设计：kyrja\n监制：闫卡夫\n策划：清舆/景她\n企划：三糙文化\n发行：纳吉音 NEGIA /MIRAI Tokyo Inc`;
var options = {
pa: '.pa',
urls: [['https://music.163.com/song/media/outer/url?id=1466822129', '1']],
btns: ,
};
loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
loadJs('https://638183.freep.cn/638183/web/api/yslrc.min.js', function() {
loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
});
});
function tzRun() {
var aud = new AudPlayer(options);
LRC(aud.pa, aud.aud, gc, 0);
var dr = _dr(msvg);
dr.setsvg({width: 300, height: 300, viewBox: '-200 -200 400 400'});
dr.g('g1').set('class', 'rotate');
dr.path('M-140 0 L-165 -25 L-190 0 L-165 25 L-140 0 L140 0 L165 25 L 190 0 L165 -25 L 140 0', 'green', 'lightgreen', 4).addTo('g1').rotates(6, 180);
}
function loadJs(url, callback) {
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.onload = function() {
if (callback) callback();
};
document.head.appendChild(script);
}
</script> 帖子没啥特别之处，主要是前两天 @小辣椒 提到 LRC 歌词同步帖子使用 SVG 做辅助小播会出现乱码，这里测试以下。其实，此前已有同类性质的帖子可以明证不会出现乱码的现象。
yslrc.js 歌词通过不插件已经考虑到了编码问题（utf-8），引入插件只要指定正确的 charset，理论上中文不应出现乱码。 马黑黑 发表于 2026-9-3 08:24
帖子没啥特别之处，主要是前两天 @小辣椒 提到 LRC 歌词同步帖子使用 SVG 做辅助小播会出现乱码，这里测试 ...
早上嚎！黑黑老师辛苦了！{:4_187:} 咱咋啥也看不见？{:5_115:} 这帖子很美，虽然只是想说明歌词同步的使用，但却也带给人美的享受。
欣赏黑黑好帖{:4_187:} 漂亮~没有乱码的现象，谢谢马老师精彩示范{:4_190:} 好大一壶酒！这可不是一杯能喝完{:4_173:}现在无事，借用一下，感谢分享！{:4_204:}{:4_190:}
啊~~黑黑这个模板出来了，我现在才看见，可惜了，昨天晚上 刚才还在做那个异象的模板，郁闷哦，一直歌词不出来，后来加了二个css上去，刚才看见你模板加了一个CSS，我去了一个 ，开始我加了二个上去
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
@import 'https://638183.freep.cn/638183/web/api/yslrc.css'; 这个可以直接纯套用了，感谢黑黑分享源码 梦江南 发表于 2026-9-3 08:27
早上嚎！黑黑老师辛苦了！
晚上嚎！ 东篱闲人 发表于 2026-9-3 09:53
咱咋啥也看不见？
什么操作系统、什么版本的浏览器？ 小辣椒 发表于 2026-9-3 21:37
啊~~黑黑这个模板出来了，我现在才看见，可惜了，昨天晚上 刚才还在做那个异象的模板，郁闷哦，一直歌词不 ...
这个帖子模板其实早就有的。
可以替换辅助小播为常规图形，换掉 SVG 标签、JS中去掉 svgdr 的引用和相关代码并在配置中将 msvg 改为图片id；可以添加自己需要的其它HTML元素。 小辣椒 发表于 2026-9-3 21:38
这个可以直接纯套用了，感谢黑黑分享源码
不是简单套用：根据帖子设计，使用模板大部分功能，取舍其中的一部分、添加自己需要的元素 霜染枫丹 发表于 2026-9-3 17:52
好大一壶酒！这可不是一杯能喝完现在无事，借用一下，感谢分享！
能饮一杯无？
这是问朋友，说明不止一人喝 红影 发表于 2026-9-3 12:53
这帖子很美，虽然只是想说明歌词同步的使用，但却也带给人美的享受。
欣赏黑黑好帖
简单而美{:4_173:} 杨帆 发表于 2026-9-3 13:47
漂亮~没有乱码的现象，谢谢马老师精彩示范
正确使用是不会出乱码的吧 马黑黑 发表于 2026-9-3 23:01
什么操作系统、什么版本的浏览器？
别问咱这么专业的问题。。。。{:5_158:} 东篱闲人 发表于 2026-9-4 08:49
别问咱这么专业的问题。。。。
打开啥也看不到就得问问。
苹果系统有新旧设备，古董级旧设备无法升级到新系统，确实无法打开此帖；windows 下，IE浏览器因为早已失去维护，也打不开此帖；chromium 内核的浏览器，如果版本过于老旧，也会无法打开。
一句话：帖子基于时下的Web标准，需要的时现代浏览器作为访问终端。 动画制作很是精彩。{:4_191:}
页:
[1]
2