小辣椒 发表于 2025-10-18 17:27

洋澜一 - 我好心疼现在的自己 (柔情版)

<style>
      @import 'https://638183.freep.cn/638183/web/tz/tz.d.trial.css';
      .pa { --offsetX: 81px; margin: 130px 0 40px calc(50% - 500px); --bg: tan url('https://xlaj.cn/upfile/2025/10/01.jpg') no-repeat center/cover; --ma-size: 3vw; }
      /* 小播内部零件尺寸及切割、旋转中心等设置，代码偏长单独放这*/
      .rect {width: 25%; height: 50%; clip-path: polygon(50% 0, 0 25%, 50% 100%, 100% 25%, 50% 0); transform-origin: center bottom; }
</style>

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

<script type="module">
      import TZ from 'https://638183.freep.cn/638183/web/tz/tz.d.trial.js';
      const tz = TZ.TZ('pa');

      // 歌词（花朝格式）
      let geci = [ ['0.00', '我好心疼现在的自己 (柔情版) ',6.07],
['6.39', '歌手： 洋澜一',3.16],
['9.72', '混音/母带：廖伟志',2.25],
['12.09', '制作人：廖伟志   ',3.68],
['15.96', '在清晨赶路',0.84],
['16.84', '在傍晚回家',1.67],
['18.60', '忙忙碌碌不知多少年',3.01],
['21.77', '在梦里渴望',1.67],
['23.53', '在深夜疗伤',1.65],
['25.27', '在风里蹒跚流浪',3.05],
['28.48', '岁月风霜了容颜',3.26],
['31.91', '青春流逝弹指间',3.22],
['35.30', '回望前半生',1.72],
['37.11', '最美好的是从前',4.85],
['42.21', '我好心疼现在的自己',3.19],
['45.57', '我好怀念那时的年轻',3.28],
['49.02', '有些悲伤在我心中挥之不去',3.23],
['52.42', '总在黎明时分暗自叹息',3.31],
['55.90', '我好心疼现在的自己',3.11],
['59.17', '孑孓一人吞咽着风雨',3.31],
['62.65', '可我坚信那些愁苦伤痛别离',3.24],
['66.06', '终将慢慢飘散云淡风轻',3.96],
['70.23', '歌词同步编辑：小辣椒',12.66],
['83.56', '在清晨赶路',1.64],
['85.29', '在傍晚回家',1.75],
['87.13', '忙忙碌碌不知多少年',3.04],
['90.33', '在梦里渴望',1.72],
['92.14', '在深夜疗伤',1.59],
['93.81', '在风里蹒跚流浪',3.05],
['97.02', '岁月风霜了容颜',3.21],
['100.40', '青春流逝弹指间',3.35],
['103.93', '回望前半生',1.78],
['105.80', '最美好的是从前',4.68],
['110.73', '我好心疼现在的自己',3.22],
['114.12', '我好怀念那时的年轻',3.17],
['117.46', '有些悲伤在我心中挥之不去',3.36],
['121.00', '总在黎明时分暗自叹息',3.25],
['124.42', '我好心疼现在的自己',3.30],
['127.89', '孑孓一人吞咽着风雨',3.15],
['131.21', '可我坚信那些愁苦伤痛别离',3.32],
['134.71', '终将慢慢飘散云淡风轻',4.23],
['139.16', '。。。。。。',12.15],
['151.95', '我好心疼现在的自己',3.15],
['155.27', '我好怀念那时的年轻',3.22],
['158.66', '有些悲伤在我心中挥之不去',3.36],
['162.20', '总在黎明时分暗自叹息',3.28],
['165.65', '我好心疼现在的自己',3.32],
['169.15', '孑孓一人吞咽着风雨',3.17],
['172.49', '可我坚信那些愁苦伤痛别离',3.29],
['175.95', '终将慢慢飘散云淡风轻',3.76],
['179.91', '谢谢欣赏',14.63],
['195.31', '',4.5]];

      // 大熊视频
      tz.add('video', '', 'pd-vid', {
                src: 'https://img.tukuppt.com/video_show/13928806/00/41/16/600e82baca629.mp4'
      });

      // 加上音频
      tz.add('audio', '', '', {
                src: 'https://xlaj.cn/upfile/2025/10/01.mp3'
      });

      /** 以下创建LRC歌词同步标签
            除left、top定位必须设置，其余可以缺省使用默认配置
            style() 指令的设置可以搬到CSS代码，置入 .lrc {} 选择器中
            指令里面的内容需要分行写时使用反引号，写在一行可用单引号
      **/
      tz.lrc(geci).style(`
             #lrc { --bg: linear-gradient(180deg,hsla(240,50%,20%,.20),hsla(240,50%,20%,.35)); position: absolute; left: 40%; bottom: 50px;font:normal 2.0em Microsoft YaHei; sans-serif; color:DarkCyan white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 1px hsla(0, 100%, 0%, .85)); pointer-events: none; z-index: 900; }
      `);

      // 创建进度条 : 设置位置和进度颜色
      tz.bgprog().style('left: 22%; width:50%; height: 3px;); bottom: 27%; --prog: DarkGray;');

      // 创建一个 id="player" 的标签，加三个类名，还定位、设置子元素布局行为
      tz.add('div', 'player', 'wrap100 rot-ani cursor', {
                title: 'Alt+X', style: 'left: 70%; bottom: 70%; place-items: start center;'
      }).playmp3();

      // 小播内部零件装进 id="player" 标签
      tz.lzRot(8, 'player', {className: 'rect'});

      // 全屏 : 并设置定位和颜色
      tz.fs().style('top: 20px; right: 47%; color: DimGray;');
</script>

小辣椒 发表于 2025-10-18 17:35

这个代码制作没有修改到自己满意，带有错误，后面慢慢了再说

liumang 发表于 2025-10-18 18:08

小辣椒同一首完成{:5_150:}{:5_150:}

liumang 发表于 2025-10-18 18:08

小辣椒 发表于 2025-10-18 17:35
这个代码制作没有修改到自己满意，带有错误，后面慢慢了再说

我看看很不错的{:5_149:}{:5_149:}

liumang 发表于 2025-10-18 18:10

看了代码，小辣椒制作很完美{:5_156:}
页: [1]
查看完整版本: 洋澜一 - 我好心疼现在的自己 (柔情版)