戏中身

马黑黑 发表于 2026-7-19 12:05

马黑黑 发表于 2026-7-19 12:05

帖子代码
<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/6/xvu.jpg') no-repeat center/cover; color: yellow; }
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px; left: 20px; }
#lrc { top: 60px; right: 60px; }
#msvg { position: absolute; width: 12vw; heighht: 12vw; top: 10%; transition: .75s; opacity: 1; cursor: pointer; }
</style>

<div id="pa" class="pa">
<video class="qk-vid" src="https://bpic-oss.588ku.com/video_listen/588ku_video/22/11/03/23/51/26/video6363e37ec520c.mp4" muted></video>
<svg id="msvg" widt="200" height="200" viewBox="-200 -200 400 400" xmlns="http://www.w3.org/2000/svg">
   <title>alt+x</title>
   <g id="g" class="rotate"></g>
</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随花骨朵而掉落`;

var options = {
   pa: '.pa',
   urls: [['https://music.163.com/song/media/outer/url?id=3407446672', '戏中身']],
   btns: ,
};

loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
   loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', function() {
         loadJs('https://638183.freep.cn/638183/web/api/yslrc.sp.min.js', tzRun);
   });
});

function tzRun() {
   var aud = new AudPlayer(options);
   LRC(aud.pa, aud.aud, gc, -0.5);
   var dr = _dr(msvg);
   dr.polygon('0 190,50 140,0 90,-50 140','currentColor').addTo('g').rotates(8);
}

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>

马黑黑 发表于 2026-7-19 12:06

本帖测试：原生 LRC 歌词同步竖排版

之前的 yslrc.min.js 只支持横排，yslrc.sp.min.js 在其基础上改为竖排，二者地址一致，文件名不同。竖排版未设置英文、阿拉伯数字直立（text-orientation: upside），有需要的可在 #lrc 选择器中加入 #lrc {/*其它代码。。。;*/ text-orientation: upside; }

歌词同步设置参考二楼代码第 35 行

梦江南 发表于 2026-7-19 12:45

黑黑老师，这是帖宝上的横排字幕，现在也可以做竖排了？这就方便多了，太好了！{:4_187:}

杨帆发表于 2026-7-19 12:49

测试效果完美~

有了竖排yslrc.sp.min.js ，加之横排yslrc.min.js，原生 LRC 歌词同步插件就有了完整美

谢谢马老师进行补缺性创作与示范，福泽大众的善举，为马老师点赞~{:4_199:}

红影发表于 2026-7-19 15:23

马黑黑发表于 2026-7-19 12:06
本帖测试：原生 LRC 歌词同步竖排版

之前的 yslrc.min.js 只支持横排，yslrc.sp.min.js 在其基 ...

其实很多歌词里英文和阿拉伯数字也用不上{:4_173:}

红影发表于 2026-7-19 15:34

这个播放器按钮的制作想了半天，这个学的时间有点长了{:5_105:}

马黑黑 发表于 2026-7-19 17:32

红影发表于 2026-7-19 15:34
这个播放器按钮的制作想了半天，这个学的时间有点长了

单个图形是个菱形（多边形，polygon指令绘制）：以 viewBox 设定的范围设置四个点坐标。

图形加入 g 分组标签。

图形旋转 8 次构成 8 个由单图形构成的图案。图形的中心不再 viewBox 的 {0,0} 点上，所以旋转时彼此错开围城圆圈。

马黑黑 发表于 2026-7-19 17:33

红影发表于 2026-7-19 15:23
其实很多歌词里英文和阿拉伯数字也用不上

也有少量歌词中英文混排

马黑黑 发表于 2026-7-19 17:33

杨帆发表于 2026-7-19 12:49
测试效果完美~

有了竖排yslrc.sp.min.js ，加之横排yslrc.min.js，原生 LRC 歌词同步插件就有了完整美

感谢支持
{:4_180:}

马黑黑 发表于 2026-7-19 17:34

梦江南发表于 2026-7-19 12:45
黑黑老师，这是帖宝上的横排字幕，现在也可以做竖排了？这就方便多了，太好了！

对，在帖宝生成的代码里，改一下 lrc 歌词资源文件即可

老谟深虑 发表于 2026-7-20 19:07

欣赏老师的佳作，学习了！

红影发表于 2026-7-22 20:16

马黑黑发表于 2026-7-19 17:32
单个图形是个菱形（多边形，polygon指令绘制）：以 viewBox 设定的范围设置四个点坐标。

图形加入 g...

这样的制作简单而又好看呢{:4_187:}

红影发表于 2026-7-22 20:17

马黑黑发表于 2026-7-19 17:33
也有少量歌词中英文混排

是的，用上的时候再说呗{:4_173:}

马黑黑 发表于 2026-7-22 22:26

红影发表于 2026-7-22 20:17
是的，用上的时候再说呗

好哒

马黑黑 发表于 2026-7-22 22:26

红影发表于 2026-7-22 20:16
这样的制作简单而又好看呢

往往简单的东东，总是被人看成是复杂的

红影发表于 2026-7-23 22:53

马黑黑发表于 2026-7-22 22:26
好哒

考虑太全面，要多花好多功夫。

红影发表于 2026-7-23 22:54

马黑黑发表于 2026-7-22 22:26
往往简单的东东，总是被人看成是复杂的

很多简单的东西，自核起来就很好看{:4_204:}

马黑黑 发表于 2026-7-24 18:30

红影发表于 2026-7-23 22:54
很多简单的东西，自核起来就很好看

是的吧？说得对

马黑黑 发表于 2026-7-24 19:44

红影发表于 2026-7-23 22:53
考虑太全面，要多花好多功夫。

这个有道理

页: [1] 2 3

花潮论坛's Archiver

戏中身