找回密码
 立即注册
搜索
查看: 4|回复: 1

至此流年各天涯 转自马黑教程专版

[复制链接]

1655

主题

3458

回帖

1万

积分

管理员

积分
14034
发表于 昨天 23:55 | 显示全部楼层 |阅读模式
调节进度

1655

主题

3458

回帖

1万

积分

管理员

积分
14034
 楼主| 发表于 昨天 23:55 | 显示全部楼层
<style>
  @import 'https://638183.freep.cn/638183/tzmaker/tz5.css';
  .pa { --bg: url('https://638183.freep.cn/638183/t24/w8/tmya.webp') no-repeat center/cover; --ma-size: 120px; }
  .fadeInLrc { left: 50px; top: 30px; writing-mode: vertical-rl; text-orientation: upright; z-index: 105; }
  .char { padding: 4px; }
  #msvg { bottom: 20px; }
</style>


<div class="pa">
  <svg id="msvg" width="200" height="200">
    <g>
      <title>调节进度</title>
      <path id="track" d="M10 100 A1 1 0 0 0 190 100" fill="none" stroke="lightblue" stroke-width="8" />
      <path id="prog" d="M10 100 A1 1 0 0 0 190 100" fill="none" stroke="lightgreen" stroke-width="8" />
    </g>
  </svg>
</div>

<script>
  var jsFile = 'https://638183.freep.cn/638183/tzmaker/tz5.js';
  loadJs(jsFile, tzInit);

  var gc = `[00:01.600]至此流年各天涯\n[00:10.300]歌手:我不理智\n[00:18.490]天晴了 又下雨了\n[00:22.490]人来人往 聚散的匆忙\n[00:26.490]心怀期待的人还在等待\n[00:30.490]攒满失望的人已离开\n[00:35.490]谁怂了 谁眼睛红了\n[00:40.490]失无所失 计较着什么\n[00:44.490]分别后的难过都是依赖\n[00:48.490]无法相拥的人要好好道别\n[00:56.490]倘若你在四下无人的夜突然想起我\n[01:00.490]希望你能记得曾几何时我也深爱过\n[01:04.490]无心风月 独钟你\n[01:08.490]太认真了我弄丢了自己\n[01:12.490]当初我自云云人海之中独独看到你\n[01:16.490]如今我再将你好好的还回人海里\n[01:22.490]至此流年 各天涯\n[01:26.490]明天的路你不要害怕\n[01:32.490]我走了\n[02:04.490]谁怂了 谁眼睛红了\n[02:08.490]失无所失计较着什么\n[02:12.490]分别后的难过都是依赖\n[02:16.490]无法相拥的人要好好道别\n[02:26.490]倘若你在四下无人的夜突然想起我\n[02:30.490]希望你能记得曾几何时我也深爱过\n[02:34.490]无心风月 独钟你\n[02:38.490]太认真了我弄丢了自己\n[02:42.490]当初我自云云人海之中独独看到你\n[02:46.490]如今我再将你好好的还回人海里\n[02:50.490]至此流年 各天涯\n[02:54.490]明天的路你不要害怕\n[02:58.490]倘若你在四下无人的夜突然想起我\n[03:02.490]希望你能记得曾几何时我也深爱过\n[03:06.490]无心风月 独钟你\n[03:10.490]太认真了我弄丢了自己\n[03:16.490]当初我自云云人海之中独独看到你\n[03:20.490]如今我再将你好好的还回人海里\n[03:24.490]至此流年 各天涯\n[03:28.490]明天的路你不要害怕\n[03:36.490]我走了`;

  function loadJs(url, callback) {
    const script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.defer = true;
    script.onload = callback;
    document.body.appendChild(script);
  }

  function tzInit() {
    var tz = TZ('pa');
    tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=470057375'});
    tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/3664703/00/02/13/5b51530e63ad7.mp4'});
    tz.add('img', '', 'ma', { src: 'https://638183.freep.cn/638183/small/780.webp' }).style('bottom: 50px;').playmp3();
    tz.svgprog('msvg', 'track', 'prog');
    tz.lrc(tz.lrc2HC(gc), '', true);//.style('top: 30px;');
    tz.fs().style('right: 20px; top: 20px;');
    tz.autoMid();
  }
</script>

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

协同嘉业科技有限公司 ( 京ICP备2024053108号-1 )

GMT+8, 2026-11-6 00:18 , Processed in 0.109131 second(s), 25 queries .

Powered by Discuz! X3.5

© 2001-2026 Discuz! Team.

快速回复 返回顶部 返回列表