论坛 › 音乐沙龙 › 弦子 - 颓废

马黑黑 发表于 2025-11-6 08:03

弦子 - 颓废

<style>
        @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
        .pa {--offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/xmzi.webp') no-repeat center/cover; --ma-size: 80px; }
        .lrc {top: 40px; left: 30px; color: white; writing-mode: vertical-lr; --c1: lightblue; --c2: lightblue; --rect: 0 0 100% 0; --border: 0 1px 0 0; }
</style>

<div id="pa" class="pa"></div>

<script type="module">
        import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v2.js';
        var tz = TZ.TZ('pa');
let gc = [, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];

        tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=30474809' });
        tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/15653652/01/40/17/632c27de420c7.mp4' });
        tz.add('img', 'player', 'ma', {
                src: 'https://638183.freep.cn/638183/web/svg1/002.svg',
                style: 'bottom: 40px; left: 185px; border-radius: 50%'
        }).playmp3();
        tz.lrc(gc);
        tz.bgprog().style('color: lightblue; bottom: 20px; left: 100px;');
        tz.fs().style('top: 20px; right: 20px');
</script>

马黑黑 发表于 2025-11-6 08:04

帖子代码

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
    .pa {--offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/xmzi.webp') no-repeat center/cover; --ma-size: 80px; }
    .lrc {top: 40px; left: 30px; color: white; writing-mode: vertical-lr; --c1: lightblue; --c2: lightblue; --rect: 0 0 100% 0; --border: 0 1px 0 0; }
</style>

<div id="pa" class="pa"></div>

<script type="module">
    import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v2.js';
    var tz = TZ.TZ('pa');
let gc = [, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];

    tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=30474809' });
    tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/15653652/01/40/17/632c27de420c7.mp4' });
    tz.add('img', 'player', 'ma', {
      src: 'https://638183.freep.cn/638183/web/svg1/002.svg',
      style: 'bottom: 40px; left: 185px; border-radius: 50%'
    }).playmp3();
    tz.lrc(gc);
    tz.bgprog().style('color: lightblue; bottom: 20px; left: 100px;');
    tz.fs().style('top: 20px; right: 20px');
</script>

马黑黑 发表于 2025-11-6 08:27

一、tz 歌词同步指令

LRC歌词使用 tz.lrc(歌词变量名) 实现，歌词变量要事先声明，使用花潮LRC歌词格式的二维数组表示，歌词变量名声明的和指令入参的要一致。

如果对 .lrc 标签所做的CSS修饰、改动较少，可挂接 style('css样式') 在 tz.lrc() 指令之后，例如：

    tz.lrc(gc).style('left: 20px; bottom: 20px');

但如果CSS代码较多，建议如本帖一样，创建 .lrc {} CSS选择器，在花括号里面写好样式代码。

二、.lrc 选择器设置技巧

如果引用了 tz.*.css 文档资源，则已存在一个 .lrc {} 选择器，它提供几个CSS变量以便可以进行简单设置，无需设置伪元素的同步机制：

其一：--c1 变量，--c2 变量，用于设置 .lrc 伪元素的同步渐变颜色；

其二：--rect 变量，用于指明同步走向，缺省或默认是从左向右，可另外设定，例如本帖的从上到下，--rect: 0 0 100% 0; 的表达式，共四个值，分别代表四个方向，即 上、右、下、左，本帖的 下 是 100%，意味着从上到下；

其三：--border 变量，用于设定同步边框方向和厚度，也是四个值，例如本帖的 0 1px 0 0;，也是 上、右、下、左 的顺序，哪一边右 1px 或 2px 的设定，哪一边就会出现边框。想取消边框，--border: 0px; 就可以了

除了CSS变量设置，还有诸多普通属性设置可以操作。例如，文本颜色，color: red;，左右上下定位相关的 top、left、bottom、right 属性设置等，再如，设置纵向排版（即竖排歌词），使用属性 writing-mode 属性，可网补一下此属性的设置，这里不多说。注意：若设置了竖排歌词，变量 --rect 和 --border 的设置要与之相配套。

杨帆 发表于 2025-11-6 11:27

之前的歌词横排，加之现在的歌词竖排，可满足歌词同步基本需求

如果歌词横排、竖排也可以使用原生LRC歌词格式，就更完美了

挺好~谢谢马老师经典示范与精彩讲解{:4_180:}

马黑黑 发表于 2025-11-6 12:56

杨帆 发表于 2025-11-6 11:27
之前的歌词横排，加之现在的歌词竖排，可满足歌词同步基本需求

如果歌词横排、竖排也可以使用原生LRC歌 ...

tzMaker模块不考虑原生LRC歌词同步功能，因为它的模拟同步功能实现起来有很多的不确定因素，难以处理

杨帆 发表于 2025-11-6 13:05

马黑黑 发表于 2025-11-6 12:56
tzMaker模块不考虑原生LRC歌词同步功能，因为它的模拟同步功能实现起来有很多的不确定因素，难以处理

知道了~马老师您辛苦了{:4_180:}

寒冬残荷 发表于 2025-11-6 13:11

点赞！喜欢！不用自己写很多的代码就可做出音画帖子。

老师，我交作业了{:5_106:}！用感恩的心感谢老师！

寒冬残荷 发表于 2025-11-6 13:13

歌词下面的下画线我不会处理它横过来，只好用透明色把它屏掉了。{:5_106:}

老师，该如何改代码？

马黑黑 发表于 2025-11-6 18:02

寒冬残荷 发表于 2025-11-6 13:13
歌词下面的下画线我不会处理它横过来，只好用透明色把它屏掉了。

老师，该如何改代码？

三楼有说明

马黑黑 发表于 2025-11-6 18:02

寒冬残荷 发表于 2025-11-6 13:11
点赞！喜欢！不用自己写很多的代码就可做出音画帖子。

老师，我交作业了！用感恩的心感谢老师 ...

{:4_190:}

小辣椒 发表于 2025-11-6 18:29

黑黑这个加了歌词版，发现有歌词的玩的人会多，小辣椒就是有的歌词加不好，这个直接套用玩更加方便了{:4_170:}

小辣椒 发表于 2025-11-6 18:30

明天套一个，这个播放器带进度条的，我一直喜欢的{:4_199:}

马黑黑 发表于 2025-11-6 18:44

小辣椒 发表于 2025-11-6 18:30
明天套一个，这个播放器带进度条的，我一直喜欢的

{:4_191:}

红影 发表于 2025-11-6 21:55

马黑黑 发表于 2025-11-6 08:27
一、tz 歌词同步指令

LRC歌词使用 tz.lrc(歌词变量名) 实现，歌词变量要事先声明，使用花潮LRC歌词格式 ...

其实--rect 变量里只有右和下有用，上和左根本不符合习惯，因为文字的排列也只有从上到下和从左到右，没有别的排列法{:4_173:}

红影 发表于 2025-11-6 21:57

这个tzMaker模块真好，想要什么就调用出什么就好了，太方便了{:4_199:}

马黑黑 发表于 2025-11-6 23:20

红影 发表于 2025-11-6 21:55
其实--rect 变量里只有右和下有用，上和左根本不符合习惯，因为文字的排列也只有从上到下和从左到右，没 ...

文本的方向有四个方向，如果需要，可以设置的

马黑黑 发表于 2025-11-6 23:21

红影 发表于 2025-11-6 21:57
这个tzMaker模块真好，想要什么就调用出什么就好了，太方便了

还好

朵拉 发表于 2025-11-8 21:57

精彩制作，学生已交作业，请老师指正{:4_190:}

马黑黑 发表于 2025-11-9 12:35

朵拉 发表于 2025-11-8 21:57
精彩制作，学生已交作业，请老师指正

{:4_190:}

偶然~ 发表于 2025-11-17 13:45

来欣赏马老师的精品佳作，祝您创作如春泉涌流不息！

查看完整版本: 弦子 - 颓废