宁静 发表于 2022-9-7 21:41

恋上你的人丢了我的魂--石梅

<style>
#papa { left: -214px; width: 1280px; height: 700px; top:150px;background: gray url('https://wj.zp68.com/lxx/yunhua/2022/09/04/00F.gif') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; user-select: none; display: grid; place-items: center; position: relative; }
/* svg按钮↓*/
#mplayer { position: absolute; bottom: 0; }
#btnpause { display: none; }
#btnwrap, #btnplay, #btnpause { cursor: pointer; }
#btnplay:hover + btnwrap, #btnpause:hover + btnwrap { fill: gold; }
#btnwrap:hover { fill: gold; }
#btnwrap:hover + #btnplay + #btnpause { fill: red;}
#tmsg { dominant-baseline: middle; fill: snow; }
#track { shape-rendering: crispEdges; cursor: pointer; }
/* svg 歌词及动态效果 ↓ */
#lrc { position: absolute; width: 1200px; height: 100px; top: 120px; }
.text { font: bold 3em sans-serif; text-anchor: middle; dominant-baseline: middle; letter-spacing: 4px; fill: none; stroke-width: 1.5px; stroke-dasharray: 90 310; animation: stroke 6s infinite linear; }
.text-1{ stroke: Maroon; text-shadow: 0 0 5px red; animation-delay: -1.5s; }
.text-2{ stroke: Cornislk; text-shadow: 0 0 5px green; animation-delay: -3s; }
.text-3{ stroke: Green; text-shadow: 0 0 5px blue; animation-delay: -4.5s; }
.text-4{ stroke: tomato; text-shadow: 0 0 5px purple; animation-delay: -6s; }
@keyframes stroke { to { stroke-dashoffset: -400; } }
</style>

<div id="papa">
      <svg id="lrc">
                <text x="50%" y="50%" class="text text-1">lrc歌词</text>
                <text x="50%" y="50%" class="text text-2">lrc歌词</text>
                <text x="50%" y="50%" class="text text-3">lrc歌词</text>
                <text x="50%" y="50%" class="text text-4">lrc歌词</text>
      </svg>
      <svg id="mplayer" width="600" height="100">
                <circle id="btnwrap" cx="20" cy="30" r="20" fill="olive" />
                <polygon id="btnplay" points="15 20, 15 40, 30 30" fill="snow" />
                <g id="btnpause" fill="snow">
                         <rect x= "15" y="20" width="3" height="20" />
                        <rect x="22" y="20" width="3" height="20" />
                </g>
                <g id="track"stroke-width="2">
                        <line x1="45" y1="30" x2="345" y2="30" stroke="transparent" stroke-width = "20" />
                        <line x1="45" y1="30" x2="345" y2="30" stroke="snow" />
                        <line id="prog" x1="45" y1="30" x2="345" y2="30" stroke="red" stroke-dasharray="300" stroke-dashoffset="300" />
                </g>
                <text id="tmsg" x="360" y="30">00:00 | 00:00</text>
      </svg>
</div>

<script>
let lrcAr = [
                ['0.00','恋上你的人丢了我的魂 '],
        ['4.88','歌手：- 石梅 '],
        ['16.16','谢谢黑黑教程分享'],
        ['21.47','你悄悄地敲开我心门'],
        ['26.60','让我相信什么是永恒'],
        ['32.01','从来没有如此的认真'],
        ['36.37','以为你就是我今生的缘分'],
        ['42.26','梦醒之后枕边的泪痕'],
        ['47.39','提醒着我心依然在疼'],
        ['52.68','你就是我最深爱的人'],
        ['57.30','为何对我竟是如此的残忍'],
        ['62.94','恋上你的人丢了我的魂'],
        ['68.31','每个夜晚还在痴痴地等啊等'],
        ['73.38','等你来敲开敲开我的门'],
        ['78.60','我要给你我的全部温存'],
        ['83.90','恋上你的人丢了我的魂'],
        ['89.24','朝思慕想你那迷人的眼神'],
        ['94.40','多想告诉你我依然爱着你'],
        ['99.62','我要和你一起迎接每个早晨'],
        ['105.72','LRC编辑：小辣椒'],
        ['126.24','梦醒之后枕边的泪痕'],
        ['130.05','提醒着我心依然在疼'],
        ['136.22','你就是我最深爱的人'],
        ['140.80','为何对我竟是如此的残忍'],
        ['146.51','恋上你的人丢了我的魂'],
        ['151.81','每个夜晚还在痴痴地等啊等'],
        ['156.98','等你来敲开敲开我的门'],
        ['162.14','我要给你我的全部温存'],
        ['167.36','恋上你的人丢了我的魂'],
        ['172.74','朝思慕想你那迷人的眼神'],
        ['177.95','多想告诉你我依然爱着你'],
        ['183.04','我要和你一起迎接每个早晨'],
        ['188.47','恋上你的人丢了我的魂'],
        ['193.51','朝思慕想你那迷人的眼神'],
        ['198.78','多想告诉你我依然爱着你'],
        ['203.87','我要和你一起迎接每个早晨'],
        ['210.68','谢谢欣赏！'],
        ['221.00','谢谢欣赏！']
];
let aud = new Audio(), lw = prog.getTotalLength(), txtAr = document.querySelectorAll('.text');
aud.src = 'https://wj.zp68.com/lxx/yunhua/2022/09/04/dlh.mp3';
aud.autoplay = true;
aud.loop = true;

track.onclick = (e) => aud.currentTime = aud.duration * (e.offsetX - prog.getAttribute('x1')) / lw;
btnwrap.onclick = btnpause.onclick = btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('playing', ()=> btnstate());
aud.addEventListener('pause', ()=> btnstate());

aud.addEventListener('timeupdate', () => {
      prog.style.strokeDashoffset = lw - lw * aud.currentTime / aud.duration + 'px';
      tmsg.textContent = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
      for(j = 0; j < lrcAr.length;j ++) {
                if(aud.currentTime >= lrcAr) {
                        for(ele of txtAr) ele.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-7 21:47

卡位沙发

一抹微蓝 发表于 2022-9-7 21:48

静大胆恋吧，我在我在我在，重要的事说三遍，哈哈{:10_401:}

一抹微蓝 发表于 2022-9-7 21:49

宁静中秋快乐{:10_402:}

宁静 发表于 2022-9-7 21:52

一抹微蓝 发表于 2022-9-7 21:47
卡位沙发

蓝蓝好，回家了？

一抹微蓝 发表于 2022-9-7 21:52

宁静 发表于 2022-9-7 21:52
蓝蓝好，回家了？

回来了，因为疫情也要忙完工作赶快回家转，不然就回不来了

宁静 发表于 2022-9-7 21:53

一抹微蓝 发表于 2022-9-7 21:48
静大胆恋吧，我在我在我在，重要的事说三遍，哈哈

哈哈~~~恋上你了，来抱一个{:10_411:}

蜻蜓 发表于 2022-9-7 21:54

这字曲同步很是赞呢{:10_402:}

宁静 发表于 2022-9-7 21:55

一抹微蓝 发表于 2022-9-7 21:52
回来了，因为疫情也要忙完工作赶快回家转，不然就回不来了

回来刚好过节

宁静 发表于 2022-9-7 21:56

蜻蜓 发表于 2022-9-7 21:54
这字曲同步很是赞呢

才学习的，马上出来摆显了{:9007:}
页: [1] 2 3 4
查看完整版本: 恋上你的人丢了我的魂--石梅