马黑黑 发表于 2025-11-22 10:27

何以相逢

<style>
        @import 'https://638183.freep.cn/638183/web/tz/tz.v3.css';
        .pa { --offsetX: 81px; --bg: beige url('https://638183.freep.cn/638183/t24/6/hyxf.jpg') no-repeat center/cover; }
        .lrc::before { background: url('https://638183.freep.cn/638183/web/svg/balls1.svg'); background-clip: text; }
</style>

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

<script type="module">
        import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
        import lrc2HC from 'https://638183.freep.cn/638183/web/tz/lrc2hc.js';

var geci = `
        何以相逢
        作曲 : 张渠
        编曲 : 张梓谦
        作词 : 向涵
        何以爱 何以痛
        何以我 何以相拥
        无心来 随心走
        人生何以 与谁匆匆 一梦
        你语气轻轻 轻轻道原来
        存几程脚印 岁岁又载载
        你眼神晶晶 晶晶照人海
        拾一些风景 换一些明白 再明白
        何以爱 何以痛
        何以我 何以相拥
        无心来 用心懂
        人生何以 与谁匆匆一梦
        难得爱 难得痛
        难得我 难得相拥
        无心来 心事千万种
        人生何以 与谁匆匆一梦
        人生何以 留住 这不醒梦
        何以爱 得以痛
        何以我 得以相拥
        无心来 赶不走
        人生何以 与谁匆匆一梦
        人生何以 不负 这散与逢
        Thanks
`;
        const gcAr = lrc2HC(geci);

        const tz = TZ.TZ('pa');
        tz.lrc(gcAr).style('top: 30px; color: #eee; --border: 0;');
        tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=2622394883' });
        tz.add('video', '', 'qk-vid', { src: 'https://bpic.588ku.com/video_listen/588ku_video/24/07/17/17/27/27/video66978e7fb1c4d.mp4' });
        tz.add('img', '', 'ma circle', { src: 'https://638183.freep.cn/638183/small/2025/fl102.png' })
          .playmp3()
          .style('bottom: 25%');
        tz.bgprog().style('left: 100px; bottom: 30px; color: snow');
        tz.fs().style('right: 20px; bottom: 20px');
</script>

马黑黑 发表于 2025-11-22 10:28

帖子代码

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v3.css';
    .pa { --offsetX: 81px; --bg: beige url('https://638183.freep.cn/638183/t24/6/hyxf.jpg') no-repeat center/cover; }
    .lrc::before { background: url('https://638183.freep.cn/638183/web/svg/balls1.svg'); background-clip: text; }
</style>

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

<script type="module">
    import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
    import lrc2HC from 'https://638183.freep.cn/638183/web/tz/lrc2hc.js';

var geci = `
    何以相逢
    作曲 : 张渠
    编曲 : 张梓谦
    作词 : 向涵
    何以爱 何以痛
    何以我 何以相拥
    无心来 随心走
    人生何以 与谁匆匆 一梦
    你语气轻轻 轻轻道原来
    存几程脚印 岁岁又载载
    你眼神晶晶 晶晶照人海
    拾一些风景 换一些明白 再明白
    何以爱 何以痛
    何以我 何以相拥
    无心来 用心懂
    人生何以 与谁匆匆一梦
    难得爱 难得痛
    难得我 难得相拥
    无心来 心事千万种
    人生何以 与谁匆匆一梦
    人生何以 留住 这不醒梦
    何以爱 得以痛
    何以我 得以相拥
    无心来 赶不走
    人生何以 与谁匆匆一梦
    人生何以 不负 这散与逢
    Thanks
`;
    var gcAr = lrc2HC(geci);

    var tz = TZ.TZ('pa');
    tz.lrc(gcAr).style('top: 30px; color: #eee; --border: 0;');
    tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=2622394883' });
    tz.add('video', '', 'qk-vid', { src: 'https://bpic.588ku.com/video_listen/588ku_video/24/07/17/17/27/27/video66978e7fb1c4d.mp4' });
    tz.add('img', '', 'ma circle', { src: 'https://638183.freep.cn/638183/small/2025/fl102.png' })
      .playmp3()
      .style('bottom: 25%');
    tz.bgprog().style('left: 30px; bottom: 30px; color: snow');
    tz.fs().style('right: 20px; bottom: 20px');
</script>

马黑黑 发表于 2025-11-22 10:31

lrc歌词进度色使用 svg 动画图片，可能需要调整 background-position 以期达到更加效果

偶然~ 发表于 2025-11-22 10:44

这个音画很好，准备偷去制作歌曲《江湖夜雨十年灯》

偶然~ 发表于 2025-11-22 10:46

个人建议女孩旁边转动那个图案颜色可否改一下？

偶然~ 发表于 2025-11-22 10:48

欣赏马老师的精品佳作！

偶然~ 发表于 2025-11-22 10:48

太棒了！玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】

偶然~ 发表于 2025-11-22 10:48

期待佳作频出！

偶然~ 发表于 2025-11-22 10:48

愿你愿我每天都是美好。

偶然~ 发表于 2025-11-22 10:48

感谢马老师带来的精彩，辛苦了，祝您和家人岁岁安康，幸福吉祥！

红影 发表于 2025-11-22 11:04

这个歌词同步有意思，偶尔有个小球飘过，让同步高亮的歌词看着那么奇妙{:4_199:}

红影 发表于 2025-11-22 11:07

又是原生歌词的同步高亮呢，匹配得真好。这么少的代码就这么完美地完成了帖子，真的太好了{:4_199:}

未知名 发表于 2025-11-22 11:13

是个很适用的好东东，墙裂建议大家来偷{:4_170:}

小文 发表于 2025-11-22 11:13

喜欢，先生了得！问安！{:4_187:}{:4_191:}

马黑黑 发表于 2025-11-22 11:55

未知名 发表于 2025-11-22 11:13
是个很适用的好东东，墙裂建议大家来偷

模块公开，随便使用

马黑黑 发表于 2025-11-22 11:55

小文 发表于 2025-11-22 11:13
喜欢，先生了得！问安！

{:4_180:}

马黑黑 发表于 2025-11-22 11:55

偶然~ 发表于 2025-11-22 10:44
这个音画很好，准备偷去制作歌曲《江湖夜雨十年灯》

期待

马黑黑 发表于 2025-11-22 11:56

红影 发表于 2025-11-22 11:04
这个歌词同步有意思，偶尔有个小球飘过，让同步高亮的歌词看着那么奇妙

后面有说明

马黑黑 发表于 2025-11-22 11:57

红影 发表于 2025-11-22 11:07
又是原生歌词的同步高亮呢，匹配得真好。这么少的代码就这么完美地完成了帖子，真的太好了

原生lrc歌词同步在这里的精准度总是有点欠缺的

梦江南 发表于 2025-11-22 12:07

黑黑老师的这帖歌词音乐很好听，影子说的歌词上小球是MP4里的。{:4_173:}
页: [1] 2
查看完整版本: 何以相逢