我在前世约了你--帖赠阳光&冰心中秋节快乐！（学习黑黑月节效果）
<style>#papa { left: -404px; width: 1400px; height: 711px; top: 150px; background: darkred url('https://pic.imgdb.cn/item/631c10af16f2c2beb1a7dbcd.gif') no-repeat center/cover; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; z-index: 1;}
#mplayer { position: absolute; bottom:80px; } /* 播放器svg */
#lrc { position: absolute; left: 450px; top: 280px; display: block; } /* 歌词svg */
#lrctxt { dominant-baseline: middle; font: bold 2.6em sans-serif; letter-spacing: 3px; }
#tmsg { fill: #ccc; font: normal 1em sans-serif; dominant-baseline: middle; }
#btnwrap { fill: #ccc; cursor: pointer; }
#btnwrap:hover { fill: orange; }
</style>
<div id="papa">
<!-- 播放器 -->
<svg id="mplayer" width="750" height="80" shape-rendering="geometricPrecision">
<circle cx="30" cy="30" r="20" fill="none" stroke="url(#gradient)" stroke-width="3" />
<g id="mama" style="cursor: pointer">
<line x1="60" y1="30" x2="560" y2="30" stroke="transparent" stroke-width="20" />
<line id="track" x1="60" y1="30" x2="560" y2="30" stroke="snow" shape-rendering="crispEdges" />
<line id="prog" x1="60" y1="30" x2="560" y2="30" stroke="red" shape-rendering="crispEdges" />
</g>
<text id="tmsg" x="570" y="30">00:00 | 00:00</text>
<g id="btnwrap">
<path id="btnplay" d="M 22 20,22 40,42 30 z"></path>
<path d="M 29 20, 29 40, 32 40, 32 20, 29 20 z" fill="transparent"></path>
<path id="btnpause" d="M 24 20,24 40,29 40,29 20,24 20 z M 32 20,32 40,37 40,37 20,32 20 z" style="display: none"></path>
</g>
</svg>
<!-- lrc歌词 -->
<svg id="lrc" width="860" height="160">
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="green"/>
<stop offset="50%" stop-color="snow"/>
<stop offset="100%" stop-color="gold"/>
</linearGradient>
</defs>
<text id="lrctxt" x="10" y="30" fill="transparent" stroke="url(#gradient)" shape-rendering="crispEdges">我在前世约了你</text>
</svg>
</div>
<script>
let lrcAr = [
['00.00','我在前世约了你'],
['6.83','帖赠：阳光&冰心'],
['13.42','祝中秋节快乐！'],
['26.18','江南三月的雨季'],
['30.44','淅淅沥沥不停息'],
['34.29','我在小桥这边等着你'],
['39.15','绵绵细雨落心里'],
['43.68','可叹春来又春去'],
['47.75','魂牵梦绕寻踪迹'],
['52.20','莫非不经意间错过你'],
['56.47','摆渡小舟已远离'],
['60.54','我在前世约了你'],
['65.24','只盼今生能相遇'],
['69.23','望穿双眼不见你'],
['73.59','花开花落花无期'],
['77.85','我在前世约了你'],
['82.27','情定三生不离弃'],
['86.63','让我化作相思雨'],
['90.58','来生来世再寻觅'],
['95.31','LRC编辑：小辣椒'],
['120.50','可叹春来又春去'],
['124.94','魂牵梦绕寻踪迹'],
['129.02','莫非不经意间错过你'],
['133.43','摆渡小舟已远离'],
['137.65','我在前世约了你'],
['142.24','只盼今生能相遇'],
['146.42','望穿双眼不见你'],
['150.68','花开花落花无期'],
['155.11','我在前世约了你'],
['159.29','情定三生不离弃'],
['163.74','让我化作相思雨'],
['168.07','来生来世再寻觅'],
['172.21','我在前世约了你'],
['176.42','只盼今生能相遇'],
['180.79','望穿双眼不见你'],
['185.07','花开花落花无期'],
['189.34','我在前世约了你'],
['193.59','情定三生不离弃'],
['197.96','让我化作相思雨'],
['202.18','来生来世再寻觅'],
['206.06','来生来世再寻觅'],
['214.73','祝阳光/冰心中秋节快乐'],
['229.80','祝阳光/冰心中秋节快乐']
];
let cc = {
x: 1*track.getAttribute('x1'),
len: track.getTotalLength(),
};
let aud = new Audio();
aud.src = 'https://wx.ttt.dj/updir/62c2677e4e6aa.mp3';
aud.autoplay = true;
aud.loop = true;
prog.style.strokeDasharray = prog.style.strokeDashoffset = cc.len;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
mama.onclick = (e) => aud.currentTime = aud.duration * (e.offsetX - cc.x) / cc.len;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration + 'px';
tmsg.textContent = toMin(aud.currentTime) + " | " + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrctxt.textContent = lrcAr;
}
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let toMin = (val)=> {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60), sec = parseFloat(val % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
</script>
<br><br><br><br><br><br><br><br><br><br><br><br> @三月的阳光 @冰心 谢谢阳光帅哥一直以来为花潮论坛分享了许多的视频 音乐等等资源链接，让我们大家玩的时候可以取素材，花潮感谢有你{:4_179:} 但阳光和冰心你们有空就看看就可以了，千万别回礼，知道你们都忙，我也是旧图图完成个作业，只是你们不要嫌弃就可以了，但祝福的心意是真诚的
祝福2位中秋节快乐！{:4_204:}{:4_204:} @马黑黑
黑黑最要感谢的当然是你，小辣椒瞎捣鼓一个作业，不晓得有没有错误，你检查一下{:4_189:} 感谢师傅的礼物，最近大家都很忙来论坛的少，还请多多包涵~~{:4_187:} 小辣椒 发表于 2022-9-10 12:36
@三月的阳光 @冰心
同祝师傅中秋佳节快乐~~{:4_187:} 小辣椒 发表于 2022-9-10 12:42
@马黑黑
黑黑最要感谢的当然是你，小辣椒瞎捣鼓一个作业，不晓得有没有错误，你检查一下
能正常运行，即使有错误，也可以忽略不计{:4_173:} 三月的阳光 发表于 2022-9-10 13:06
感谢师傅的礼物，最近大家都很忙来论坛的少，还请多多包涵~~
阳光好···知道你忙，千万别回礼，你已经为分享资源花太多时间了 马黑黑 发表于 2022-9-10 13:13
能正常运行，即使有错误，也可以忽略不计
我就图可以玩，这个可以发微信就可以{:4_170:} 这件作品十分精巧，特别是小雨涟漪好漂亮。 小辣椒 发表于 2022-9-10 13:15
我就图可以玩，这个可以发微信就可以
完全可以的 不过，可怜菇凉撑伞等月亮（还是等人？），也怪可怜的{:4_170:} 马黑黑 发表于 2022-9-10 13:23
完全可以的
黑黑我比较现实吧，就想怎么玩自己可以玩的，一直喜欢播放器，但你这种制作我第一次碰到，也是好幸运的，前段时间被家里人逼着停止玩电脑，真担心没有机会学习了，现在是走一步看一步 马黑黑 发表于 2022-9-10 13:24
不过，可怜菇凉撑伞等月亮（还是等人？），也怪可怜的
哈哈~~~就要这样可怜兮兮的才有意境{:4_170:} 梦油 发表于 2022-9-10 13:22
这件作品十分精巧，特别是小雨涟漪好漂亮。
梦油中秋节快乐！
谢谢欣赏{:4_187:} 小辣椒 发表于 2022-9-10 13:40
梦油中秋节快乐！
谢谢欣赏
祝你阖家欢乐，幸福安康！ 图漂亮，歌好听，祝老师双节团圆如意，快乐幸福！{:4_176:} 亲爱的制作好漂亮，接帖同祝阳光和冰心中秋节快乐{:4_187:} 小辣椒 发表于 2022-9-10 13:34
哈哈~~~就要这样可怜兮兮的才有意境
这就是美
页:
[1]
2