小辣椒 发表于 2025-9-26 21:26

《男人情 女人心》歌手：龍千玉/袁小迪（学习套用黑黑正道沧桑播放器效果）

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; margin: 130px 0 50px calc(50% - 380px);--bg: CornflowerBlue url('https://wj.zp68.com/lxx/yunhua/2025/09/27/53.jpg') no-repeat center/cover; }
        #progress { position: absolute; left: 530px; bottom: 58%; width: 4vw; height: 4vw; transition: .4s; }
        #g1 { cursor: pointer; fill: url(#grd); fill-opacity: .8; transform-box: fill-box; transform-origin: center; animation: rotate 8s linear infinite var(--state); }
        #g2 { cursor: pointer; fill: none; stroke: url(#grd); stroke-width: 10; stroke-linecap: round; }
        #prog { stroke: rgba(250,250,250,.6); }
        #btnFs { left: 47%; top: 20px; color: RoyalBlue ; border-color: currentColor !important; }

   #lrc { --bg: linear-gradient(180deg,hsla(240,50%,20%,.20),hsla(240,50%,20%,.35)); position: absolute; left: 35%; bottom: 40px;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; }       


        @keyframes rot { to { transform: rotate(-360deg); } }
</style>

<div id="pa">
        <audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2025/09/27/01.mp3" autoplay loop></audio>
        <video class="pd-vid" src="https://img.tukuppt.com/video_show/7165162/00/17/52/5ec746f5eec22.mp4" autoplay loop muted></video>
        <svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
                <g id="g1" class="sepia"><title>ALT+X</title></g>
                <g id="g2"><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?v=1.0';

import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
        var geci = [['0.00', '【闽南语歌曲】',8.29],
['8.73', '《男人情女人心》',6.98],
['16.08', '歌手：龍千玉/袁小迪',8.19],
['24.70', 'LRC编辑：小辣椒',5.22],
['30.19', '查埔人的情',2.99],
['33.34', '甘愿为爱拼一生',3.57],
['37.10', '查某人的心',2.64],
['39.88', '甘愿为情来牺牲',3.45],
['43.51', '对你这段情',2.95],
['46.62', '是愈久愈坚定',3.53],
['50.34', '爱你一粒心',2.36],
['52.82', '也未变形',3.04],
['56.02', '无奈今夜雨未停',3.48],
['59.68', '啊 今夜风这呢冷',3.16],
['63.01', '咱的情也不愿停',6.17],
['69.50', '分开 咱的心情',3.34],
['73.02', '心痛是一层层',3.09],
['76.27', '这段情放置心肝顶',6.25],
['82.85', '心爱的(心爱的)',2.98],
['85.99', '再会啦(再会啦)',3.36],
['89.53', '这段情放置心肝顶',6.91],
['96.80', 'LRC编辑：小辣椒',25.02],
['123.14', '查埔人的情',2.88],
['126.17', '甘愿为爱拼一生',3.58],
['129.94', '查某人的心',2.72],
['132.80', '甘愿为情来牺牲',3.66],
['136.65', '对你这段情',2.80],
['139.60', '是愈久愈坚定',3.45],
['143.23', '爱你一粒心',2.29],
['145.64', '也未变形',3.13],
['148.93', '无奈今夜雨未停',3.51],
['152.63', '啊 今夜风这呢冷',3.25],
['156.05', '咱的情也不愿停',2.55],
['158.73', '也不愿冷',3.38],
['162.29', '分开 咱的心情',3.50],
['165.97', '心痛是一层层',3.26],
['169.40', '这段情放置心肝顶',6.20],
['175.93', '心爱的(心爱的)',2.94],
['179.02', '再会啦(再会啦)',3.45],
['182.65', '这段情放置心肝顶',6.17],
['189.14', '无奈今夜雨未停',3.27],
['192.58', '啊 今夜风这呢冷',3.16],
['195.91', '咱的情也不愿停',2.91],
['198.97', '也不愿冷',3.04],
['202.17', '分开 咱的心情',3.37],
['205.72', '心痛是一层层',3.29],
['209.18', '这段情放置心肝顶',6.10],
['215.60', '心爱的(心爱的)',3.09],
['218.85', '再会啦(再会啦)',3.44],
['222.47', '这段情放置心肝顶',6.62],
['239.96', '谢谢欣赏',6.65],
['246.96', '',4.5]
];               
               lrc(pa, geci)
        var dr = Dr.dr(progress);
        dr.gradient('linearGradient', {id: 'grd'}, [['red',0],['orange',.5],['crimson',1]]);
        var points = '0 -20,-60 -170,-20 -120,-10 -180,0 -130,10 -180,20 -120,60 -180,0 -20';
        dr.polygon(points).addTo(g1).rotates(6, 360, 0, -20);
        dr.circle(0, -20, 160, 'transparent').addTo(g1);
        dr.path('M-160 110 Q0 240,160 110').id('track').addTo(g2);
        dr.path('M-160 110 Q0 240,160 110').id('prog').addTo(g2);
        FS(pa, g1);
</script>

小辣椒 发表于 2025-9-26 21:28

@马黑黑

黑黑勉强完成一个作业，现在做贴速度很慢，{:4_198:}

小辣椒 发表于 2025-9-26 21:32

我的一个好朋友是闽南人，以前一起分享音乐和播放器的，老喜欢发闽南歌曲，我开始根本听不懂，看见他分享了许多闽南歌曲，多听听感觉还是别有风味的{:4_170:}昨天突然Q上线问我还玩吗，让突然想起来，做一首闽南歌曲大家听听{:4_208:}

小辣椒 发表于 2025-9-26 21:34

@偶然

偶然粤语歌你是最拿手的，不知道闽南语歌曲你是不是很精通{:4_173:}

梦油 发表于 2025-9-26 21:41

《小辣椒音乐》的字样咋没了？

马黑黑 发表于 2025-9-26 22:04

小辣椒 发表于 2025-9-26 21:28
@马黑黑

黑黑勉强完成一个作业，现在做贴速度很慢，

{:4_199:}

马黑黑 发表于 2025-9-26 22:05

播放器小巧精致，不喧宾夺主，创意十足。赞个。

红影 发表于 2025-9-26 22:15

这个还加了歌词，制作漂亮。小波也调整的很恰当。
欣赏亲爱的好帖{:4_199:}

偶然~ 发表于 2025-9-26 22:35

小辣椒 发表于 2025-9-26 21:34
@偶然

偶然粤语歌你是最拿手的，不知道闽南语歌曲你是不是很精通
我不会闽南语哦

偶然~ 发表于 2025-9-26 22:35

音画唯美

偶然~ 发表于 2025-9-26 22:35

制作大气

偶然~ 发表于 2025-9-26 22:41

以前翻唱过这首歌的曲，高安的那首《我是否也在你心中》

梦江南 发表于 2025-9-27 08:34

大气、漂亮，小播放位置放得真好合适。{:4_187:}

梦江南 发表于 2025-9-27 08:35

欣赏点赞，{:4_199:}

小文 发表于 2025-9-27 08:42

欣赏，喜欢！

梦油 发表于 2025-9-27 09:34

闽南语演唱的歌曲很好听，虽然听不懂歌词。

小辣椒 发表于 2025-9-27 22:32

梦油 发表于 2025-9-26 21:41
《小辣椒音乐》的字样咋没了？

哈哈，今天换了自己的logo，纯玩音乐我会加上小辣椒音乐，这个是音画了就用了自己的xlajlogo

小辣椒 发表于 2025-9-27 22:33

马黑黑 发表于 2025-9-26 22:04


黑黑晚上好{:4_187:}

小辣椒 发表于 2025-9-27 22:33

马黑黑 发表于 2025-9-26 22:05
播放器小巧精致，不喧宾夺主，创意十足。赞个。

这个用大的感觉和图图不相配就改小了

小辣椒 发表于 2025-9-27 22:34

红影 发表于 2025-9-26 22:15
这个还加了歌词，制作漂亮。小波也调整的很恰当。
欣赏亲爱的好帖

亲爱的，这个图图用大的播放器位置放不好，只能改小了
页: [1] 2
查看完整版本: 《男人情 女人心》歌手：龍千玉/袁小迪（学习套用黑黑正道沧桑播放器效果）