《花好月圆》刁寒（学习马老师代码）
本帖最后由 梦缘 于 2022-9-9 10:47 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 640px; top:120px;background: darkred url('https://pic.imgdb.cn/item/6319d95316f2c2beb1611246.jpg') 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;top: 460px; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; z-index: 3; }
#track { stroke: url(#gradient); }
#lrc { position: absolute; top: 380px; display: block; }
#lrctxt { text-anchor: middle; dominant-baseline: text-after-edge; fill: url(#gradient); font: bold 2.2em sans-serif; text-shadow: -2px -2px 0px #fff, 2px 2px 3px #000; letter-spacing: 3px; }
#tmsg { fill: #ccc; font: bold 1em sans-serif; }
#btnwrap { display: block; fill: #ccc; cursor: pointer; }
#btnwrap:hover { fill: orange; }
</style>
<div id="papa">
<!-- 播放器 -->
<svg id="mplayer" width="120" height="120" shape-rendering="geometricPrecision">
<g id="mama" transform="rotate(-90, 60, 60)" style="cursor: pointer;">
<circle id="track" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="rgba(0,0,0,0.35)" />
<circle id="prog" cx="60" cy="60" r="50" fill="none" stroke-width="4" stroke="rgba(255,255,255,0.55)" />
</g>
<path id="curPath" d="M 20 70 Q 60 0 100 70" fill="none" stroke="none"/>
<path id="durPath" d="M 20 55 Q 60 110 100 55" fill="none" stroke="none"/>
<g id="tmsg">
<text x="34" y="0"><textPath id="curMsg" xlink:href="#curPath" dominant-baseline="text-after-edge">00:00</textPath></text>
<text x="29" y="0"><textPath id="durMsg" xlink:href="#durPath" dominant-baseline="text-before-edge">00:00</textPath></text>
</g>
<g id="btnwrap">
<path id="btnplay" d="M 50 50,50 70,70, 60 z"></path>
<path id="btnpause" d="M 52 50,52 70,57 70,57 50,52 50 z M 60 50,60 70,65 70,65 50,60 50 z"></path>
</g>
</svg>
<!-- lrc歌词 -->
<svg id="lrc" width="560" height="150">
<defs><path id="lrcPath" fill="none" stroke="red" d="M 10 150 Q 305 -10,560 150" /></defs>
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="blue"/>
<stop offset="35%" stop-color="yellow"/>
<stop offset="65%" stop-color="gray"/>
<stop offset="100%" stop-color="red"/>
</linearGradient>
</defs>
<textx="54%" y="0"><textPath id="lrctxt" xlink:href="#lrcPath"> 花好月圆- 刁寒</textPath></text>
</svg>
</div>
<script>
let lrcAr = [
['0.00',' 作词 : 刁寒'],
['1.00',' 作曲 : 刁寒'],
['4.02','谢谢马老师代码'],
['34.02','春花和秋月它最美丽'],
['42.08','少年的情怀是最真心'],
['45.06','人生如烟云它匆匆过呀'],
['49.07','要好好地去珍惜'],
['53.05','时光它永远不停息把我们年华都带去'],
['61.01','天上的风云它多变幻'],
['65.01','唯有情义地久天长'],
['69.04','好花美丽不常开'],
['72.08','好景宜人不常在'],
['76.06','不要问我从哪里来'],
['80.06','我是春风化丝雨'],
['84.05','鲜花它只能赠佳人'],
['88.03','真情它送给心上人'],
['92.01','又是一个艳阳天'],
['96.00','花好月圆唱今朝'],
['100.01','祝花潮朋友们'],
['116.01','花好月圆心想事成'],
['117.03','春花和秋月它最美丽'],
['124.06','少年的情怀是最真心'],
['127.04','人生如烟云它匆匆过呀'],
['131.04','要好好地去珍惜'],
['135.02','时光它永远不停息'],
['139.01','把我们年华都带去'],
['143.07','天上的风云它多变幻'],
['146.08','唯有情义地久天长'],
['150.07','好花美丽不常开'],
['154.05','好景宜人不常在'],
['158.04','不要问我从哪里来'],
['162.03','我是春风化丝雨'],
['166.02','鲜花它只能赠佳人'],
['170.00','真情它送给心上人'],
['174.03','又是一个艳阳天'],
['178.08','花好月圆唱今朝'],
['181.03','好花美丽不常开'],
['185.03','好景宜人不常在'],
['189.02','不要问我从哪里来'],
['193.04','我是春风化丝雨'],
['197.06','鲜花它只能赠佳人'],
['201.08','真情它送给心上人'],
['205.04','又是一个艳阳天'],
['209.06','花好月圆唱今朝'],
['212.06','花好月圆唱今朝'],
['221.06','谢谢大家欣赏']
];
let cc = { //圆环对象
x: 1*track.getAttribute('cx'),
y: 1*track.getAttribute('cy'),
r: 1*track.getAttribute('r'),
sw: 1*track.getAttribute('stroke-width'),
len: track.getTotalLength(),
};
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=78168.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) => { //环单击
let deg = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;
deg += (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;
aud.currentTime = aud.duration * deg / 360;
};
//audio空间各类监听
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration + 'px';
curMsg.textContent = toMin(aud.currentTime);
durMsg.textContent = 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>
<style type="text/css">.ywqs{z-index:1;position: relative;top: 118px; left: 28px; width: 120px; height: 120px;}.loading{ font-size: 12pt; color: #FF0000;width:45px; height: 45px; position: relative;top:-545px; left: 33px; animation: load 9s linear infinite;}.loading div{ width: 100%; height: 110%;position: absolute;} @keyframes load{ 0%{transform: rotate(0deg); } 50%{ transform: rotate(180deg);}100%{transform: rotate(360deg); } }.loading div:nth-child(1){ transform: rotate(0deg); }.loading div:nth-child(2){ transform: rotate(90deg); } .loading div:nth-child(3){ transform: rotate(180deg);}.loading div:nth-child(4){ transform: rotate(270deg);}.loading div:nth-child(5){ transform: rotate(360deg);} </style><div class="ywqs"><div class="loading"><div>情</div><div>满</div><div>中</div><div>秋</div>
<br><br><br><br><br><br><br><br><br><br> 中秋节快乐！ 梦油 发表于 2022-9-8 20:57
中秋节快乐！
谢谢老师的欣赏支持，祝老师花好月圆，心想事成！{:4_204:} 好鲜艳的色彩搭配 马黑黑 发表于 2022-9-8 21:40
好鲜艳的色彩搭配
谢谢老师来欣赏点评，问好！{:4_191:} 谢谢梦缘精彩的制作，还加了自己的文字{:4_199:} 歌词和播放器和底图的文字有点重叠呢，移动到相对空点的地方是否更好？ 要过节了，节日贺帖都亮起来{:4_187:} 漂亮的制作，赞！ 梦缘 发表于 2022-9-8 21:29
谢谢老师的欣赏支持，祝老师花好月圆，心想事成！
谢谢梦缘朋友。 小辣椒 发表于 2022-9-8 21:48
谢谢梦缘精彩的制作，还加了自己的文字
谢谢老师的欣赏支持，祝老师花好月圆，心想事成！{:4_176:} 红影 发表于 2022-9-8 22:22
要过节了，节日贺帖都亮起来
谢谢老师的欣赏支持，祝老师中秋节快乐美满！{:4_185:} 加林森 发表于 2022-9-8 22:25
漂亮的制作，赞！
谢谢老师的欣赏支持，祝老师快乐幸福！{:4_191:} 梦缘 发表于 2022-9-9 11:13
谢谢老师的欣赏支持，祝老师快乐幸福！
同喜同乐！{:4_190:} 梦缘 发表于 2022-9-9 11:13
谢谢老师的欣赏支持，祝老师快乐幸福！
客气了，节日快乐{:4_187:}
页:
[1]