小辣椒 发表于 2025-9-20 20:52

单身情歌 演唱：洋澜一（学习套用黑黑逃亡 part2播放器修改）

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 64px; --bg: #ccc url('https://xlaj.cn/upfile/2025/09/19/1.jpg') no-repeat center/cover; }
        #progress { position: absolute; width: 4vw; height: 4vw;left: 20%;bottom: 67%;}
        #prog, #track { fill: none; stroke: DarkGreen; stroke-width: 16; stroke-opacity: .25; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
        #prog { stroke-opacity: 1; }
        #player { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: transparent; animation: rotate 8s linear infinite var(--state); }
        #btnFs { left: 47%; top:20px;color: Gray; border-color: currentColor!important; }

#lrc { --bg: linear-gradient(180deg,hsla(240,50%,20%,.20),hsla(240,50%,20%,.35)); position: absolute; left: 30%; bottom: 60px;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; }       
#dt2{ position: absolute; width:350px; height: 190px; top: 40px; left: 920px; }
</style>
<div id="pa">
   <img id="dt2" src="https://xlaj.cn/upfile/202411/12/4n.gif" alt="" />
        <audio id="aud" src="https://xlaj.cn/upfile/2025/09/19/01.mp3" autoplay loop></audio>
        <video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/12/30/16/16/24/video677256d89bac1.mp4" autoplay loop muted></video>
               
        <svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
                <g id="player" class="sepia"><title>ALT+X</title></g>
                <g id="pg"><title>调节进度</title></g>
        </svg>
</div>
<script type="module">
        import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
        import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js';            
                import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
        var geci = [['0.00', '单身情歌（女版）',6.09],
['6.41', '演唱Vocal：洋澜一',1.63],
['8.13', '词作Lyrics by：易家扬',1.90],
['10.13', '曲作Compose by：陈耀川',3.36],
['13.67', '原唱：林志炫',2.38],
['17.18', '抓不住爱情的我',4.05],
['20.44', '总是眼睁睁看它溜走',4.14],
['24.80', '世界上幸福的人到处有',3.80],
['28.80', '为何不能算我一个',4.11],
['33.13', '为了爱孤军奋斗',3.21],
['36.51', '早就吃够了爱情的苦',4.09],
['40.81', '在爱中失落的人到处有',4.02],
['45.04', '而我只是其中一个',3.97],
['49.22', '爱要越挫越勇',3.44],
['52.84', '爱要肯定执着',4.05],
['57.10', '每一个单身的人得看透',3.46],
['60.74', '想爱就别怕伤痛',6.48],
['67.56', '找一个最爱的深爱的',3.15],
['70.88', '想爱的亲爱的人',2.80],
['73.83', '来告别单身',2.59],
['76.56', '一个多情的痴情的',2.13],
['78.80', '绝情的无情的人',2.79],
['81.74', '来给我伤痕',3.32],
['85.23', '孤单的人那么多',3.70],
['89.12', '快乐的没有几个',3.38],
['92.68', '不要爱过了错过了',2.17],
['94.96', '留下了单身的我',2.96],
['98.08', '独自唱情歌',3.84],
['102.12', 'LRC编辑：小辣椒',14.18],
['117.05', '为了爱孤军奋斗',3.27],
['120.49', '早就吃够了爱情的苦',4.37],
['125.09', '在爱中失落的人到处有',3.56],
['128.84', '而我不是最后一个',4.28],
['133.35', '爱要越挫越勇',3.65],
['137.19', '爱要肯定执着',3.82],
['141.21', '每一个单身的人得看透',3.38],
['144.77', '想爱就别怕伤痛',6.40],
['151.51', '找一个最爱的深爱的',3.10],
['154.77', '想爱的亲爱的人',1.90],
['156.77', '来告别单身',3.54],
['160.50', '一个多情的痴情的',2.18],
['162.79', '绝情的无情的人',2.77],
['165.71', '来给我伤痕',3.38],
['169.27', '孤单的人那么多',3.50],
['172.95', '快乐的没有几个',3.35],
['176.48', '不要爱过了错过了',2.10],
['178.69', '留下了单身的我',2.79],
['181.63', '独自唱情歌哈',8.44],
['190.51', '~Music~',22.49],
['214.18', '找一个最爱的深爱的',2.51],
['216.82', '想爱的亲爱的人',2.24],
['219.18', '来告别单身',3.34],
['222.70', '一个多情的痴情的',2.03],
['224.84', '绝情的无情的人',2.66],
['227.64', '来给我伤痕',3.21],
['231.02', '伤心的人那么多',3.78],
['235.00', '我应该勇敢地过',3.37],
['238.55', '不要爱过了错过了',2.13],
['240.79', '留下了单身的我',2.78],
['243.72', '独自唱情歌',2.56],
['246.42', '这首真心的痴心的伤心的',3.33],
['249.93', '单身情歌谁与我来和',6.99],
['257.29', '谢谢欣赏',19.95],
['278.29', '',4.5]

];               
                lrc(pa, geci)
       
        var dr = Dr.dr(progress);
        var ranColor = () => `hsla(${Math.random() * 360}, 100%, 50%, .9)`;
        var ar1 = dr.circlePoints(20, 200, 180), ar2 = dr.circlePoints(3, 200, 120, 15);
        ar1.forEach(b => dr.circle(b, b, 20, ranColor()).addTo('player'));
        dr.circle(200,200,200).addTo('player');
        dr.polygon(ar2.join(',')).id('track').addTo('pg');
        dr.polygon(ar2.join(',')).id('prog').addTo('pg');
FS(pa, player);
</script>

小辣椒 发表于 2025-9-20 20:53

@马黑黑

黑黑 继续套用玩，作业补起来。。。。。{:4_170:}

小辣椒 发表于 2025-9-20 20:54

感谢黑黑源码分享{:4_187:}

马黑黑 发表于 2025-9-20 21:05

小辣椒 发表于 2025-9-20 20:53
@马黑黑

黑黑 继续套用玩，作业补起来。。。。。

墙裂支持

东篱闲人 发表于 2025-9-20 21:16

看咱师傅玩的越来越高级了，现在都整单身的啦？{:4_204:}

小辣椒 发表于 2025-9-20 21:43

东篱闲人 发表于 2025-9-20 21:16
看咱师傅玩的越来越高级了，现在都整单身的啦？

老头你看花眼了，小辣椒现在是许多作业没有完成，在补起来，郁闷哦，许多都不会了。。。。。。

杨帆 发表于 2025-9-20 22:35

漂亮！谢谢小辣椒精彩分享{:4_187:}

红影 发表于 2025-9-20 23:14

这背景很漂亮，小播效果用在这里也很赞。
欣赏亲爱的好帖{:4_199:}

东篱闲人 发表于 2025-9-21 06:06

小辣椒 发表于 2025-9-20 21:43
老头你看花眼了，小辣椒现在是许多作业没有完成，在补起来，郁闷哦，许多都不会了。。。。。。

花眼了吗？不是单身情歌吗？{:5_115:}

梦江南 发表于 2025-9-21 07:50

背景图和小播很匹配，漂亮！{:4_187:}

梦江南 发表于 2025-9-21 07:56

单身也不错的，欣赏点赞！{:4_173:}
页: [1]
查看完整版本: 单身情歌 演唱：洋澜一（学习套用黑黑逃亡 part2播放器修改）