醉美水芙蓉 发表于 2022-9-5 20:13

王爱华 - 走在人生的路口 (DJ默涵版)


<style>
#papa { left: -214px; width: 1024px; height: 640px; background: gray url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/aabc0c1548659fe679921392d86531f6_preview.jpg') 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: 1000px; height: 80px; top: 500px; }
.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: snow; text-shadow: 0 0 5px red; animation-delay: -1.5s; }
.text-2{ stroke: orange; text-shadow: 0 0 5px green; animation-delay: -3s; }
.text-3{ stroke: gold; 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="400" height="60">
                <circle id="btnwrap" cx="20" cy="30" r="15" 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="245" y2="30" stroke="transparent" stroke-width = "20" />
                        <line x1="45" y1="30" x2="245" y2="30" stroke="snow" />
                        <line id="prog" x1="45" y1="30" x2="245" y2="30" stroke="red" stroke-dasharray="200" stroke-dashoffset="200" />
                </g>
                <text id="tmsg" x="260" y="30">00:00 | 00:00</text>
      </svg>
</div>

<script>
let lrcAr =[
        ['0.04','王爱华 - 走在人生的路口 (DJ默涵版)'],
        ['6.06','作词：余海英、李凤娥、刘习军'],
        ['11.01','作曲：余海英、李凤娥、刘习军'],
        ['15.04','和声：王爱华'],
        ['18.05','音乐指导：刘磊'],
        ['23.07','LRC编辑：醉美水芙蓉'],
        ['27.02','不知不觉又是一个秋'],
        ['31.08','人生的梦靠自己追求'],
        ['36.07','多少个岁月轮回蹉跎'],
        ['41.06','谁又能把谁来挽留'],
        ['46.05','多想回到年少的时候'],
        ['51.04','往日的时光随风飘走'],
        ['56.03','一路上走来懵懵懂懂'],
        ['61.02','是苦是乐凭自己感受'],
        ['66.01','人生的路啊几人能看透'],
        ['71.01','谁又能把这谜底猜透'],
        ['75.09','寂寞相伴为谁守候'],
        ['80.08','滚滚红尘风雨同舟'],
        ['85.06','人生的路啊几人能看透'],
        ['90.06','有谁能常伴随你左右'],
        ['95.05','聚散离合手牵着手'],
        ['100.03','蓦然回首在你的身后'],
        ['105.02','蓦然回首在你的身后'],
        ['134.07','多想回到年少的时候'],
        ['139.05','往日的时光随风飘走'],
        ['144.04','一路上走来懵懵懂懂'],
        ['149.03','是苦是乐凭自己感受'],
        ['154.02','人生的路啊几人能看透'],
        ['159.00','谁又能把这谜底猜透'],
        ['164.00','寂寞相伴为谁守候'],
        ['168.09','滚滚红尘风雨同舟'],
        ['173.08','人生的路啊几人能看透'],
        ['178.07','有谁能常伴随你左右'],
        ['183.06','聚散离合手牵着手'],
        ['188.04','蓦然回首在你的身后'],
        ['193.04','蓦然回首在你的身后'],
        ['198.06','谢谢欣赏！']
];
let aud = new Audio(), lw = prog.getTotalLength(), txtAr = document.querySelectorAll('.text');
aud.src = 'https://www.qqmc.com/up/kwlink.php?id=213805068&.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>

小辣椒 发表于 2022-9-5 20:57

欣赏水芙蓉精彩的制作{:4_178:}

红影 发表于 2022-9-5 21:02

这图图色彩好美，欣赏水芙蓉美女漂亮的制作{:4_187:}

大猫咪 发表于 2022-9-5 21:03

欣赏水芙蓉精彩的制作{:4_187:} 真棒！   好久不见，晚上好！

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

梦缘 发表于 2022-9-5 21:22

欣赏老师的精彩，好看好听，问好！{:4_187:}

加林森 发表于 2022-9-5 21:28

水芙蓉制作得真漂亮。

醉美水芙蓉 发表于 2022-9-5 21:59

小辣椒 发表于 2022-9-5 20:57
欣赏水芙蓉精彩的制作

辣椒美女晚上好！

醉美水芙蓉 发表于 2022-9-5 21:59

红影 发表于 2022-9-5 21:02
这图图色彩好美，欣赏水芙蓉美女漂亮的制作

红影美女晚上好！

醉美水芙蓉 发表于 2022-9-5 22:00

大猫咪 发表于 2022-9-5 21:03
欣赏水芙蓉精彩的制作 真棒！   好久不见，晚上好！

喵咪晚上好！

醉美水芙蓉 发表于 2022-9-5 22:00

梦缘 发表于 2022-9-5 21:22
欣赏老师的精彩，好看好听，问好！

梦缘老师晚上好！

醉美水芙蓉 发表于 2022-9-5 22:01

加林森 发表于 2022-9-5 21:28
水芙蓉制作得真漂亮。

队长晚上好！谢谢队长支持！

红影 发表于 2022-9-5 22:47

醉美水芙蓉 发表于 2022-9-5 21:59
红影美女晚上好！

这美女的身材真好{:4_173:}

加林森 发表于 2022-9-5 23:27

醉美水芙蓉 发表于 2022-9-5 22:01
队长晚上好！谢谢队长支持！

{:4_190:}
页: [1]
查看完整版本: 王爱华 - 走在人生的路口 (DJ默涵版)