《又是一年中秋月圆夜》刘向圆

梦缘发表于 2022-9-9 10:28

本帖最后由梦缘于 2022-9-9 20:49 编辑 <br /><br /><style>
#papa { left:-214px; width: 1024px; height: 640px; top: 150px; background: darkred url('https://www.huachaowang.com/data/attachment/forum/202209/09/095101p6gzamdkgq3mutsq.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: 500px; width: 120px; height: 120px; left:760px; border-radius: 50%; overflow: hidden; z-index: 3; }
#track { stroke: url(#gradient); }
#lrc { position: absolute; left:500px;top: -10px; 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 Teal, 2px 2px 3px #000; letter-spacing: 3px; }
#tmsg { fill: Teal; font: bold 1em sans-serif; }
#btnwrap { display: block; fill: #eee; 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>
   
   <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.03',' 谢谢马老师代码'],
['10.00','《又是一年中秋月圆夜》快四 '],
['15.00','作词 : 周兵'],
['20.00','作曲 : 石焱'],
['25.00','演唱 : 刘向圆'],
['31.00','祝花潮论坛中秋月圆'],
['36.00','又是一年中秋月圆夜'],
['40.00','家中已有团圆的喜悦'],
['44.00','欢聚的时光笑得皎洁'],
['48.00','风中还飘着桂花香味'],
['52.00','又是一年花好月圆夜'],
['56.00','相恋挂在明灯的长街'],
['60.00','小小的月饼爱的滋味'],
['64.00','把酒问青天敞开心扉'],
['70.00','愿那幸福向着月圆'],
['74.00','愿那人生长久共婵娟'],
['78.00','让明月寄去我的心愿'],
['82.00','一声声祝福飘在耳边'],
['86.00','愿那烟火绽放人间'],
['90.00','愿那快乐朝夕永相伴'],
['94.00','让风儿送走往事如烟'],
['98.00','一份份希望就在明天'],
['104.00','又是一年中秋月圆夜'],
['108.00','家中已有团圆的喜悦'],
['112.00','欢聚的时光笑得皎洁'],
['116.00','风中还飘着桂花香味'],
['120.00','又是一年花好月圆夜'],
['124.00','相恋挂在明灯的长街'],
['128.00','小小的月饼爱的滋味'],
['132.00','把酒问青天敞开心扉'],
['138.00','愿那幸福向着月圆'],
['142.00','愿那人生长久共婵娟'],
['146.00','让明月寄去我的心愿'],
['150.00','一声声祝福飘在耳边'],
['154.00','愿那烟火绽放人间'],
['158.00','愿那快乐朝夕永相伴'],
['162.00','让风儿送走往事如烟'],
['166.00','一份份希望就在明天'],
['171.00',' ● ● ● ● ● ● ● ● ● ●'],
['188.00','又是一年中秋月圆夜'],
['192.00','家中已有团圆的喜悦'],
['196.00','欢聚的时光笑得皎洁'],
['200.00','风中还飘着桂花香味'],
['204.00','又是一年花好月圆夜'],
['208.00','相恋挂在明灯的长街'],
['212.00','小小的月饼爱的滋味'],
['216.00','把酒问青天敞开心扉'],
['222.00','愿那幸福向着月圆'],
['226.00','愿那人生长久共婵娟'],
['230.00','让明月寄去我的心愿'],
['234.00','一声声祝福飘在耳边'],
['238.00','愿那烟火绽放人间'],
['242.00','愿那快乐朝夕永相伴'],
['246.00','让风儿送走往事如烟'],
['250.00','一份份希望就在明天'],
['256.00','又是一年中秋月圆夜'],
['260.00','家中已有团圆的喜悦'],
['264.00','欢聚的时光笑得皎洁'],
['268.00','风中还飘着桂花香味'],
['272.00','又是一年花好月圆夜'],
['276.00','相恋挂在明灯的长街'],
['280.00','小小的月饼爱的滋味'],
['284.00','把酒问青天敞开心扉'],
['290.00','愿那幸福向着月圆'],
['294.00','愿那人生长久共婵娟'],
['298.00','让明月寄去我的心愿'],
['302.00','一声声祝福飘在耳边'],
['306.00','愿那烟火绽放人间'],
['310.00','愿那快乐朝夕永相伴'],
['314.00','让风儿送走往事如烟'],
['318.00','一份份希望就在明天'],
['323.00','愿那幸福向着月圆'],
['327.00','愿那人生长久共婵娟'],
['331.00','让明月寄去我的心愿'],
['335.00','一声声祝福飘在耳边'],
['339.00','愿那烟火绽放人间'],
['343.00','愿那快乐朝夕永相伴'],
['347.00','让风儿送走往事如烟'],
['351.00','一份份希望就在明天'],
['355.00','谢谢大家欣赏']
];

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 = 'http://txcdn-file-m.mvbox.cn/upload/7fe26df15d2b07125a6c70cba2c3e854.m4a';
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>
<br><br><br><br><br><br><br><br><br><br>

绿叶清舟 发表于 2022-9-9 11:52

制作漂亮啊，祝节日快乐

马黑黑 发表于 2022-9-9 12:06

这个可能是受底图限制，否则将 lrc歌词与月型圆球更为对齐的话，那相当完美。制作中可以考虑用PS将图片加工一下，让那组菇凉捧月的图案往左边靠一些。

红影发表于 2022-9-9 13:35

这个歌词的位置若再微调一下，对应上圆球的中心就更好了。不定期也可以移动到相对空点的位置才好。
欣赏梦缘好帖，节日快乐{:4_187:}

红影发表于 2022-9-9 13:36

祝贺节日的帖子都亮起来，红红火火的，看着也热闹{:4_173:}

红影发表于 2022-9-9 13:37

这个帖子的歌曲我在单位也是能听到呢，真不错。

小辣椒 发表于 2022-9-9 13:51

马黑黑发表于 2022-9-9 12:06
这个可能是受底图限制，否则将 lrc歌词与月型圆球更为对齐的话，那相当完美。制作中可以考虑用PS将图片加 ...
我昨天送你的歌曲，我昨天上传他今天用了{:4_201:}
播放器和歌词颜色也是我昨天修改的

梦缘发表于 2022-9-9 16:28

绿叶清舟发表于 2022-9-9 11:52
制作漂亮啊，祝节日快乐

谢谢老师的欣赏支持，问好！{:4_191:}

梦缘发表于 2022-9-9 16:30

马黑黑发表于 2022-9-9 12:06
这个可能是受底图限制，否则将 lrc歌词与月型圆球更为对齐的话，那相当完美。制作中可以考虑用PS将图片加 ...

谢谢老师的点评，感谢指导！{:4_176:}

梦缘发表于 2022-9-9 16:32

红影发表于 2022-9-9 13:35
这个歌词的位置若再微调一下，对应上圆球的中心就更好了。不定期也可以移动到相对空点的位置才好。
欣赏梦 ...

谢谢老师的点评指导，感谢问好！{:4_204:}

梦缘发表于 2022-9-9 16:32

小辣椒发表于 2022-9-9 13:51
我昨天送你的歌曲，我昨天上传他今天用了
播放器和歌词颜色也是我昨天修改的

问好老师，感谢欣赏！{:4_190:}

马黑黑 发表于 2022-9-9 17:36

梦缘发表于 2022-9-9 16:32
谢谢老师的点评指导，感谢问好！

{:4_190:}

加林森 发表于 2022-9-9 17:40

挺不错的。

马黑黑 发表于 2022-9-9 17:41

小辣椒发表于 2022-9-9 13:51
我昨天送你的歌曲，我昨天上传他今天用了
播放器和歌词颜色也是我昨天修改的

{:4_190:}

小辣椒 发表于 2022-9-9 20:28

梦缘发表于 2022-9-9 16:32
问好老师，感谢欣赏！

友情提醒：收费空间上传的请不要盗链，谢谢~~~

梦缘发表于 2022-9-9 20:51

小辣椒发表于 2022-9-9 20:28
友情提醒：收费空间上传的请不要盗链，谢谢~~~

不好意思，谢谢老师提醒，歌换过了。{:4_191:}

梦缘发表于 2022-9-9 20:53

加林森发表于 2022-9-9 17:40
挺不错的。

谢谢老师的欣赏支持，问好！{:4_176:}

绿叶清舟 发表于 2022-9-9 20:57

梦缘发表于 2022-9-9 16:28
谢谢老师的欣赏支持，问好！

不客气了

大猫咪 发表于 2022-9-9 21:00

制作真漂亮。赏心悦目！真棒！欣赏梦缘好帖，节日快乐，开心每一天！

{:4_204:}{:4_199:}

梦缘发表于 2022-9-9 21:16

大猫咪发表于 2022-9-9 21:00
制作真漂亮。赏心悦目！真棒！欣赏梦缘好帖，节日快乐，开心每一天！

谢谢老师的欣赏鼓励，问好！{:4_176:}

页: [1] 2

花潮论坛's Archiver

《又是一年中秋月圆夜》刘向圆