那天晚上--歌手陈宁 TO：队长
<style>#papa { left: -404px; width: 1400px; height: 788px; top: 150px; background: darkred url('https://wj.zp68.com/lxx/yunhua/2022/09/14/ltws.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; bottom:80px; } /* 播放器svg */
#lrc { position: absolute; left: 420px; top: 450px; 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; }
#d1{ position: absolute; width: 66px; height: 113px; top: 60px; left: 1300px;opacity: 0.45; }
#d2{ position: absolute; width: 66px; height: 113px; top: 60px; left: 710px;opacity: 0.45; }
#d3{ position: absolute; width: 66px; height: 113px; top: 60px; left: 80px;opacity: 0.35; }
#zm{ position: absolute; width: 250px; height: 44px; top: 160px; left:10 80px;opacity: 0.95; }
</style>
<div id="papa">
<img id="d1" src="https://wj.zp68.com/lxx/yunhua/2022/09/14/ltws.gif" alt="" />
<img id="d2" src="https://wj.zp68.com/lxx/yunhua/2022/09/14/ltws.gif" alt="" />
<img id="d3" src="https://wj.zp68.com/lxx/yunhua/2022/09/14/ltws.gif" alt="" />
<img id="zm" src="https://wj.zp68.com/lxx/yunhua/2022/09/14/zm.gif" alt="" />
<!-- 播放器 -->
<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="490" y2="30" stroke="transparent" stroke-width="20" />
<line id="track" x1="60" y1="30" x2="490" y2="30" stroke="snow" shape-rendering="crispEdges" />
<line id="prog" x1="60" y1="30" x2="490" y2="30" stroke="red" shape-rendering="crispEdges" />
</g>
<text id="tmsg" x="500" 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="760" 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 = [
['0.00','那天晚上 - 陈宁'],
['7.28','我知道你会怎么想'],
['13.45','把我想成变了样'],
['19.90','我不管你会这样想'],
['25.03','换了我自己也一样'],
['31.61','那天晚上有美丽的月光'],
['36.96','没和你走在小路上'],
['43.04','那天晚上有美丽的月光'],
['48.62','没让你依偎在我身旁'],
['54.85','LRC编辑：小辣椒'],
['78.65','你知道我会怎么想'],
['83.61','会把你想成怎么样'],
['89.68','你不要管我这么想'],
['95.41','换了是谁也一样'],
['101.95','那天晚上有美丽的月光'],
['107.07','不陪我走在小路上'],
['112.97','那天晚上有美丽的月光'],
['118.77','不让我陪在你身旁'],
['124.65','那天晚上有美丽的月光'],
['130.45','不陪我走在小路上'],
['136.34','那天晚上有美丽的月光'],
['142.17','不让我陪在你身旁'],
['148.84','那天晚上有美丽的月光'],
['154.04','不陪我走在小路上'],
['159.85','那天晚上有美丽的月光'],
['165.55','不让我陪在你身旁'],
['171.61','不让我陪在你身旁']
];
let cc = {
x: 1*track.getAttribute('x1'),
len: track.getTotalLength(),
};
let aud = new Audio();
aud.src = 'https://wj.zp68.com/lxx/yunhua/2022/09/14/ltws.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> @加林森 小辣椒 发表于 2022-9-13 21:26
@加林森
来了来了。 队长这个播放器我好喜欢的今天进度条我修改短了一点，发现我图大尺寸的多一点 好漂亮的制作。谢谢小辣椒。我真喜欢！{:4_204:}{:4_190:} 欣赏老师精美制作，漂亮的图，好听的歌。{:4_176:} 加林森 发表于 2022-9-13 21:28
好漂亮的制作。谢谢小辣椒。我真喜欢！
队长一起玩这个加多个动图的效果{:4_187:} 梦缘 发表于 2022-9-13 21:28
欣赏老师精美制作，漂亮的图，好听的歌。
谢谢梦缘欣赏，一起玩这个加多个动图的效果 小辣椒 发表于 2022-9-13 21:28
队长这个播放器我好喜欢的今天进度条我修改短了一点，发现我图大尺寸的多一点
嗯嗯，这个可以调整的。 小辣椒 发表于 2022-9-13 21:29
队长一起玩这个加多个动图的效果
好的哦。这个我得多想想了。 看到这个背景，觉得好熟悉，我好像也用过。亲爱的制作真漂亮，又用了你最喜欢的播放器呢{:4_187:} 这歌手的嗓音很奇特{:4_204:} 再来聆听。 布局简洁大方，各元素组织得当。赞，再赞。 加林森 发表于 2022-9-13 21:31
嗯嗯，这个可以调整的。
我看见你上次那个播放器进度条已经修改短了 加林森 发表于 2022-9-13 21:32
好的哦。这个我得多想想了。
看看代码你肯定会做的 红影 发表于 2022-9-13 22:29
看到这个背景，觉得好熟悉，我好像也用过。亲爱的制作真漂亮，又用了你最喜欢的播放器呢
这个背景图是前几天网络搜索到的，闪灯是岁月的，哈哈我只是特别喜欢这个播放器，然后加几个效果试试。 红影 发表于 2022-9-13 22:30
这歌手的嗓音很奇特
非常喜欢的男低音。他专辑里面选了一首用，也是以前玩过的啊 加林森 发表于 2022-9-14 08:05
再来聆听。
谢谢队长欣赏{:4_187:} 马黑黑 发表于 2022-9-14 12:15
布局简洁大方，各元素组织得当。赞，再赞。
哈哈。。谢谢黒黑赞{:4_189:}
小辣椒前几天做的，突然出发去玩 来不及发了
页:
[1]
2