晚来天欲雪

马黑黑

马黑黑

帖子代码

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
   
3.     .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/7/th.jpg') no-repeat center/cover; color: lightgreen; }
   
4.     .player { width: 480px; bottom: 10px; }
   
5.     .btnFs { top: 25px; right: 20px; }
   
6.     #lrc { left: 20px; top: 25px; }
   
7.     #msvg { position: absolute; width: 10vw; height: 10vw; bottom: 60px; cursor: pointer; }
   
8. </style>
   
9. 
   
10. <div id="pa" class="pa">
    
11.     <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2475824/00/01/59/5b46b977d9e77.mp4" autoplay loop muted></video>
    
12.     <svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"><title>播放/暂停(Alt+X)</title></svg>
    
13. </div>
    
14. 
    
15. <script>
    
16.     var gc = `[00:01.20]晚来天欲雪\n[00:08.30]歌手：恋恋故人难 / 云之泣\n[00:17.65]编曲：林一卡/冯帆\n[00:22.49]定是梨花月 太过于眷恋\n[00:27.89]才不慎沾染 动心的谎言\n[00:33.46]你迢迢一眼 便撞入春天\n[00:38.87]举世跋涉来相见\n[00:45.09]当飞花字句 敲打在窗棂\n[00:50.51]霜寒不巧来拜临\n[00:54.57]从你的眼里 窥见红尘的倒影\n[00:59.98]云梦苍苍摇曳不成形\n[01:04.86]或许你曾 借沧海一粟 拥星河一路\n[01:10.34]投奔鼎沸人海的静默处\n[01:15.87]而我 藏叶底一度 踏岁月一路\n[01:21.11]只为那时 有春风轻拂\n[01:49.76]烟雨他贪恋 些微的温暖\n[01:55.20]不惜拜别后 孤身下人间\n[02:00.68]任跌落流年 任扑朔梦蝶\n[02:06.25]举杯饮下这阔绝\n[02:12.29]怕晚岚辞行 怅然梦难醒\n[02:17.79]你俯身湖面捞星\n[02:21.87]将隐秘心事 都悉数赠给青荇\n[02:27.34]总会有人来读懂倾听\n[02:32.35]原来你曾 借沧海一粟 拥星河一路\n[02:37.54]投奔鼎沸人海的静默处\n[02:43.15]而我 藏叶底一度 踏岁月一路\n[02:48.36]只为那时 有春风轻拂\n[02:55.05]胜却人间无数\n[03:40.79]借沧海一粟 拥星河一路\n[03:45.14]投奔鼎沸人海的静默处\n[03:50.49]而我 藏叶底一度 踏岁月一路\n[03:55.73]只为那时 有春风轻拂\n[04:02.36]谁化名万古 竟痴心来赴\n[04:06.40]捧一抔爱火余烬的焦土\n[04:11.76]待到 隔山起浓雾 看不清前路\n[04:17.12]君心我心 还始终如故\n[04:23.44]走向落白深处\n[04:28.91]制作人：冯帆/林一卡\n[04:29.44]弦乐编写：冯帆\n[04:29.77]弦乐监制：刘辉\n[04:30.08]弦乐录制：辉煌之音管弦乐团\n[04:30.29]弦乐录音棚：2496 Top music\n[04:30.48]弦乐录音师：Rey @2496 Top music\n[04:30.75]和声编写：软软的明天\n[04:31.02]和声：软软的明天\n[04:31.28]混音&母带：冯帆\n[04:31.53]制作统筹：冀玉静/景她\n[04:31.72]插画绘图：EFA发_\n[04:31.95]视觉设计：kyrja\n[04:32.20]监制：闫卡夫\n[04:32.42]策划：清舆/景她\n[04:32.65]企划：三糙文化\n[04:32.91]发行：纳吉音 NEGIA /MIRAI Tokyo Inc`;
    
17. 
    
18.     var options = {
    
19.         pa: '.pa',
    
20.         urls: [['https://music.163.com/song/media/outer/url?id=1466822129', '1']],
    
21.         btns: [msvg],
    
22.     };
    
23. 
    
24.     loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
    
25.         loadJs('https://638183.freep.cn/638183/web/api/yslrc.min.js', function() {
    
26.             loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
    
27.         });
    
28.     });
    
29. 
    
30.     function tzRun() {
    
31.         var aud = new AudPlayer(options);
    
32.         LRC(aud.pa, aud.aud, gc, 0);
    
33.         var dr = _dr(msvg);
    
34.         dr.setsvg({width: 300, height: 300, viewBox: '-200 -200 400 400'});
    
35.         dr.g('g1').set('class', 'rotate');
    
36.         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);
    
37.     }
    
38. 
    
39.     function loadJs(url, callback) {
    
40.         var script = document.createElement('script');
    
41.         script.charset = 'utf-8';
    
42.         script.src = url;
    
43.         script.onload = function() {
    
44.             if (callback) callback();
    
45.         };
    
46.         document.head.appendChild(script);
    
47.     }
    
48. </script>

复制代码

马黑黑

帖子没啥特别之处，主要是前两天 @小辣椒 提到 LRC 歌词同步帖子使用 SVG 做辅助小播会出现乱码，这里测试以下。其实，此前已有同类性质的帖子可以明证不会出现乱码的现象。

yslrc.js 歌词通过不插件已经考虑到了编码问题（utf-8），引入插件只要指定正确的 charset，理论上中文不应出现乱码。

梦江南

马黑黑 发表于 2026-9-3 08:24
帖子没啥特别之处，主要是前两天 @小辣椒 提到 LRC 歌词同步帖子使用 SVG 做辅助小播会出现乱码，这里测试 ...

早上嚎！黑黑老师辛苦了！

东篱闲人

咱咋啥也看不见？

红影

这帖子很美，虽然只是想说明歌词同步的使用，但却也带给人美的享受。
欣赏黑黑好帖

杨帆

漂亮~没有乱码的现象，谢谢马老师精彩示范

霜染枫丹

好大一壶酒！这可不是一杯能喝完现在无事，借用一下，感谢分享！

小辣椒

啊~~黑黑这个模板出来了，我现在才看见，可惜了，昨天晚上 刚才还在做那个异象的模板，郁闷哦，一直歌词不出来，后来加了二个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
这帖子很美，虽然只是想说明歌词同步的使用，但却也带给人美的享受。
欣赏黑黑好帖

简单而美

马黑黑

杨帆 发表于 2026-9-3 13:47
漂亮~没有乱码的现象，谢谢马老师精彩示范

正确使用是不会出乱码的吧

东篱闲人

马黑黑 发表于 2026-9-3 23:01
什么操作系统、什么版本的浏览器？

别问咱这么专业的问题。。。。