听心---帖赠黑黑，中秋节快乐！（学习黑黑 Tie In播放器效果）
<style>@import 'https://638183.freep.cn/638183/web/css/tz02.css';
#pa { --offsetX: 81px;margin: 130px 0 20px calc(50% - 380px); --bg: tan url('https://wj.zp68.com/lxx/yunhua/2025/10/06/04.jpg') no-repeat center/cover; }
#progress { position: absolute; left: 38%; bottom: 28%;width: 18vw; height: 18vw; transition: .4s; }
#g1 { cursor: pointer; fill: transparent; stroke: url('#grd'); stroke-width: 6; transform-box: fill-box; transform-origin: center; animation: rotate 8s linear infinite var(--state); }
#g2 { cursor: pointer; fill: none; stroke: url(#grd); stroke-opacity: .8; stroke-width: 8; stroke-linecap: round; }
#prog { stroke: orange; stroke-opacity: 1; }
#btnFs { top:20px;color: white; border-color: currentColor !important; }
@keyframes rot { to { transform: rotate(-360deg); } }
#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; }
</style>
<div id="pa">
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/5a0e-audiofreehighqps/99/12/GMCoOR4JYQAeACAAAAKSuus2.m4a" autoplay loop></audio>
<video class="pd-vid" src="https://wj.zp68.com/lxx/yunhua/2025/10/06/001.mp4" autoplay loop muted></video>
<svg id="progress" class="brightness" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<g id="g1"><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.1';
import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
var geci = [
['0.00', '听心 (经典版) - 魏佳艺',1.92],
['2.02', '词：郭高见',0.96],
['3.03', '曲：陈伟',0.71],
['3.78', '编曲：李德奎',1.18],
['5.02', '混音：潘君明',1.26],
['6.35', '和声：夏初安',1.27],
['7.69', '制作人：郜锦标',1.36],
['9.12', '企划/统筹：吴聪聪',1.86],
['11.08', '宣传推广：郜锦标/吴聪聪',2.39],
['13.60', '艺人统筹：刘丹',1.27],
['17.85', 'OP：北京嘎嘎飙壹文化传媒有限公司',3.76],
['21.84', '闭上眼我想看见你',3.81],
['25.85', '屏住了所有的呼吸',3.90],
['29.96', '我怕你走错了轨迹',3.27],
['33.40', '做了心跳的标记',4.23],
['37.85', '在梦里总有个秘密',3.80],
['41.85', '总是让我挥之不去',3.86],
['45.91', '忍不住探索了心底',3.31],
['49.39', '为何你摸索了离去',5.75],
['55.44', '就算我说我爱你',3.77],
['59.41', '就算我说我想你',3.74],
['63.35', '你也不能听到我的心',3.84],
['67.39', '依然停留在这孤寂里',3.80],
['71.39', '我想再靠近你一点',3.91],
['75.51', '我想再走近一点',3.80],
['79.51', '让你能够听到我的心',3.69],
['83.39', '什么时候也能把我想起',21.32],
['105.83', '闭上眼我想看见你',3.90],
['109.94', '屏住了所有的呼吸',3.78],
['113.92', '我怕你走错了轨迹',3.34],
['117.44', '做了心跳的标记',4.24],
['121.90', '在梦里总有个秘密',3.80],
['125.90', '总是让我挥之不去',3.78],
['129.88', '忍不住探索了心底',3.21],
['133.26', '为何你摸索了离去',5.86],
['139.43', '就算我说我爱你',3.75],
['143.38', '就算我说我想你',3.89],
['147.48', '你也不能听到我的心',3.71],
['151.39', '依然停留在这孤寂里',3.79],
['155.38', '我想再靠近一点',3.91],
['159.50', '我想再走近一点',3.71],
['163.41', '让你能够听到我的心',3.72],
['167.33', '什么时候也能把我想起',5.56],
['173.18', '就算我说我爱你',3.95],
['177.34', '就算我说我想你',3.83],
['181.37', '你也不能听到我的心',3.85],
['185.42', '依然停留在这孤寂里',3.66],
['189.27', '我想再靠近一点',3.98],
['193.46', '我想再走近一点',3.79],
['197.45', '让你能够听到我的心',3.72],
['201.37', '什么时候也能把我想起',5.53],
['207.19', '让你能够听到我的心',3.92],
['211.32', '什么时候也能把我想起',4.5]
];
lrc(pa, geci);
var dr = Dr.dr(progress);
dr.gradient('linearGradient', {id: 'grd',x1: 0, x2:0, y1: 0, y2: 0.75}, [['yellow',0],['orange',0.5],['yellow',1]]);
dr.path('M-150 0 A150 150 0 0 0 150 0').id('track').addTo(g2); //M-160 50 Q0 240,160 50
dr.path('M-150 0 A150 150 0 0 0 150 0').id('prog').addTo(g2);
dr.polygon('0 0,-25 -140,0 -90,25 -120,0 0').addTo(g1).rotates(10);
dr.circle(0, 0, 120).addTo('g1');
dr.text(' 听心 ', 0, -120, 'url(#grd)').style('stroke: Fuchsia; stroke-width: 2; font: bold 100px sans-serif; letter-spacing: 4px; text-anchor: middle;');
FS(pa, g1);
</script> @马黑黑
套用玩一个（学习黑黑 Tie In播放器效果） 祝黑黑中秋节快乐，合家团圆，幸福安康！ 听心，扑通扑通的{:4_170:} 马黑黑 发表于 2025-10-6 12:59
听心，扑通扑通的
哈哈，好听吧，仔细看看歌词真会心跳的{:4_170:} 欣赏小辣椒的精美音画，祝黑黑老师中秋节快乐，阖家幸福！{:4_187:} 梦江南 发表于 2025-10-6 13:43
欣赏小辣椒的精美音画，祝黑黑老师中秋节快乐，阖家幸福！
阿姨好，今天碰到了{:4_179:}
做了一个作业，阿姨中秋节快乐！ 这制作真漂亮，那个旋转的视频也正好把播放器包围起来，选得好。
欣赏亲爱的好帖，黑黑收礼开心{:4_199:} 祝小辣椒朋友中秋快乐！
祝黑黑先生中秋快乐！ 音画唯美 背景音乐好听 制作大气 感谢小辣椒带来的精彩，辛苦了！ 祝小辣椒与家人如中秋玉轮般圆满安康，似国庆红枫般绚烂常乐！ 这套得多么的有路，多么 的艺术范儿。{:4_178:} 听心，我都听见收礼的@马黑黑 大师心里咚咚的跳{:4_196:} 不用听心，俺们来蹭听歌儿呗{:4_205:} 樵歌 发表于 2025-10-6 17:18
听心，我都听见收礼的@马黑黑 大师心里咚咚的跳
有这么严重吗{:4_189:} 制作好漂亮啊，歌也好听，黑黑收礼开心！ 祝福大家中秋阖家团圆！ 开心如意！{:4_187:} 红影 发表于 2025-10-6 14:43
这制作真漂亮，那个旋转的视频也正好把播放器包围起来，选得好。
欣赏亲爱的好帖，黑黑收礼开心
亲爱的，都是岁月的AE制作@走过岁月