醉美水芙蓉 发表于 2026-1-15 21:43:17

马黑黑老师tzMaker在线制作工具歌词版

<style>
        .artBox { font-size: 20px; margin: 30px auto; max-width: 1200px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #333; }
        .artBox h2 { color: #1a73e8; border-bottom: 2px solid #eee; padding-bottom: 8px; margin-bottom: 20px; }
        .artBox > p { margin: 15px 0; line-height: 1.8; text-align: justify; }
        .artBox blockquote { background: #f9f9f9; border-left: 4px solid #1a73e8; padding: 15px 20px; margin: 20px 0; color: #333; }
        .artBox code { background: #eee; padding: 2px 6px; border-radius: 3px; font-family: 'Consolas', 'Monaco', monospace; font-size: 0.95em; }
        .artBox .mid { text-align: center; }
        .artBox .right { text-align: right; padding-right: 100px; }
</style>

<div class="artBox">
        <h1 class="mid">tzMaker在线制作工具歌词版上线&#128099;</h1>
        <p><a href="http://mhh.52qingyin.cn/art/bshow.php?st=5&sd=5&art=mahei_1768437689" title="点击访问" target="_blank">&#127905;tzMaker在线制作工具（支持歌词版）</a></p>
        <p>虽然 tzMaker 已经极尽所能将制帖流程简易化，它仍存在一定难度，驾驭它需要熟悉其指令、约定以及相应的Html、CSS、JS功底，对基础相对薄弱的朋友还不够友好。这是开发tzMaker在线工具的原因。预览版发布之后，不少朋友立马试用，感受良好，并提了一些极好的建议，这给后续开发和维护注入了强大的动力，本人为此甚至不惜牺牲相亲机会，沏上一壶苦咖啡、拆一盒软华子，然后专注于细节的调整、必要模块和功能的添加，咖啡喝完烟也抽得发苦之后，带LRC歌词同步的版本可以上线。</p>
        <p>工具应该简单易用：只需在各个功能模块中切换，在相应栏目填入相应的数据，然后生成代码、预览，效果不理想再回头修改相应栏目的数据，直至感觉良好为止，最后就是复制代码、发布帖子。</p>
        <p>各个模块在认为必要的子项都有文本说明或 Tip 提示，请严格按照说明填写数据——工具暂未对用户数据进行校验，用户所填写的数据都会被如实使用。</p>
        <p>简单说明各个模块的使用方法和注意事项：</p>
        <p><strong>一、帖子容器</strong></p>
        <blockquote>
                ⒈ 帖子宽高 ：帖子的宽高设置非必须，因为 tzMaker 所引用的 css 使用了弹性设置以自适应不同的显示分辨率，但可根据需要设置帖子容器的宽高。<br>
                ⒉ 自定义CSS ：可选。这里要求的数据是CSS选择器代码，一行一个选择器，例如：<br><br>
                <code>.vid { mix-blend-mode: screen; opacity: 0.5; }</code><br><br>
                上面设置的是一个自定义视频标签，它在 tzMaker CSS 资源中已经设置了基本的样式，这里是追加属性设置：融合和透明度。这个选择器用于自定义视频，对应的视频设置模块应点选视频来源的“其它”子项。
        </blockquote>
        <p><strong>二、音频</strong></p>
        <blockquote>
                集成网易云音乐前缀的手动上屏功能：点击音频地址文本框下边的文字，wyy音频地址前缀上屏，加上音频的id即可。
        </blockquote>
        <p><strong>三、视频</strong></p>
        <blockquote>
                ⒈ 视频来源视情况点选相应子项，不然对不上号，修饰效果会达不到预期。如果使用的是自定义（即其它）视频来源，且前面已经设置了 .vip {} 选择器，这里的相关CSS不用填写。<br>
                ⒉ 相关CSS可选，觉得比要可以写入一些CSS属性值，例如透明度设置、尺寸等：<br><br> <code>opacity: 0.5; width: 200px; height: 200px; border-radius: 50%; left: 100px; top: 100px;</code><br><br>
                ⒊ 如果帖子不需要视频，“视频地址”输入框留空即可。
        </blockquote>
        <p><strong>四、小播</strong></p>
        <blockquote>
                通过工具制作的小播为简易版：使用 img 或 div 元素充当小播，任意一种都可以，同时都需要提供图片地址。小播默认使用 .ma 选择器制定的样式，在“帖子容器”设置中的“小播尺寸”子项针对的就是小播。小播在帖子中的位置在这里设置。需要高级功能版的效果请在生成代码之后修改对应源码。
        </blockquote>
        <p><strong>五、进度条</strong></p>
        <blockquote>
                利用工具制作的 tzMaker 音频播放进度条为简易版，背景进度条。在这里，至少需要设置进度条的位置。
        </blockquote>
        <p><strong>六、LRC歌词</strong></p>
        <blockquote>
                ⒈ 歌词格式 ：分花潮格式和原生格式。二者的区别在于模拟逐字同步的精准度，后者没有手动掐算每句歌词的演唱用时。选择何种格式视自己准备的歌词格式而定。歌词数据的填写支持单行、分行，花朝格式的按数组内容的组织格式填写，原生格式的单行使用 <code>\n</code> 符号衔接各句、多行时每行一个 <code>歌词</code> 数据信息。<br>
                ⒉ 歌词效果 ：淡入效果，可选，建议非花潮格式的歌词使用。<br>
                ⒊ 歌词定位 ：默认绝对居中显示，可以自设位置。在这里，还可以以CSS属性设置的方式自定义歌词颜色、同步色（勾选淡入效果的设置无效），例如下面的设置（--c1和--c2时同步渐变参与颜色）——<br><br>
                <code>top: 100px; color: gray; --c1: pink; --c2: purple;</code>
        </blockquote>
        <p><strong>七、全屏</strong></p>
        <blockquote>
                可以设置的主要内容为定位、前景色（边框色与之同）等，例：<code>color: #eee; left: 30px; bottom: 30px;</code>
        </blockquote>
        <p><strong>八、生成代码&lt;/&gt;和预览</strong></p>
        <blockquote>
                这里所生成的代码均来源于前面各个模块的设置，动态生成，修改这里的代码不会影响前面模块的数据且重新生成代码时仍然依据前面模块的设置。代码一旦生成则预览模块被激活，点击“预览”按钮则可查看帖子效果。若效果达不到预期，可以回头继续修改对应模块的相应数据。
        </blockquote>
        <p><strong>【其他说明】</strong></p>
        <p>⒈ 工具不保存用户数据，所填写数据仅在当次使用时有效，关闭或刷新工具页面数据全部消失。</p>
        <p>⒉ 有高级应用需求的可以在生成代码后将代码复制到Web页制作编辑器中进行修改，这将大大节省代码的组织成本。</p>
        <p>⒊ 工具HTML文档会在测试满意之后再整理上传，需要本地运行工具的朋友敬请关注马黑永硕网盘，一般会放在“网络相关”目录。</p>
        <p>⒋ 本工具和tzMaker均为手搓代码，加之水平有限，错误在所难免，若有发现错误或不合适指出，敬请指正。</p>
        <p class="right">马黑 2026年1月15日</p>
</div>

klxf 发表于 2026-1-15 23:25:36

哇，实用的制作工具，制帖更方便，谢谢友友分享

醉美水芙蓉 发表于 2026-1-16 12:04:03

klxf 发表于 2026-1-15 23:25
哇，实用的制作工具，制帖更方便，谢谢友友分享

我还没有试过呢？不知道效果怎么样？

klxf 发表于 2026-1-16 18:59:34

醉美水芙蓉 发表于 2026-1-16 12:04
我还没有试过呢？不知道效果怎么样？

放心~效果棒棒哒

1643091610 发表于 2026-1-18 10:15:57

支持佳作，风格独特新颖

weijianzuokong 发表于 6 天前

支持佳作，期待更多精彩

月明工作室 发表于 6 天前

欣赏精彩制作！

爱的魔力 发表于 5 天前

感谢分享，带来全新理念

shiguanfushan 发表于 3 天前

赞，顶帖超有指导意义

raoxingsan 发表于 前天 13:38

感谢分享，引发更多思考
页: [1] 2
查看完整版本: 马黑黑老师tzMaker在线制作工具歌词版