有声有色 发表于 2022-9-4 14:05

故乡是北京

本帖最后由 有声有色 于 2025-9-6 10:08 编辑 <br /><br /><style>
#papa { left: -214px; width: 1024px; height: 640px; background: gray url('https://pic1.imgdb.cn/item/643230260d2dde5777d39a86.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: 1000px; height: 80px; top: 10px; }
.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 = [
        ['16.96','走遍了南北西东，'],
        ['30.62','也到过了许多名城'],
        ['44.43','静静的想一想，'],
        ['50.61','我还是最爱我的北京'],
        ['73.69','不说那，天坛的明月，'],
        ['76.94','北海的风'],
        ['78.60','卢沟桥的狮子，'],
        ['80.51','潭柘寺的松'],
        ['91.50','唱不够那红墙碧瓦的太和殿'],
        ['96.01','道不尽那十里长街卧彩虹'],
        ['107.04','只看那紫藤古槐四合院'],
        ['111.72','便觉得甜丝丝，脆生生，'],
        ['116.48','京腔京韵自多情'],
        ['146.86','不说那高耸的大厦，'],
        ['151.38','旋转的厅'],
        ['152.77','电子街的机房，'],
        ['154.69','夜市上的灯'],
        ['165.90','唱不够那新潮欢涌王府井，'],
        ['170.17','道不尽那名厨佳肴色香农。'],
        ['181.46','单想那，油条豆浆家常饼，'],
        ['185.86','便勾起细悠悠，蜜茸茸，'],
        ['190.80','甘美芬芳故乡情'],
        ['218.02','走遍了南北西东，'],
        ['226.79','也到过了许多名城'],
        ['235.03','静静的想一想，'],
        ['239.64','我还是最爱我的北京']
];
let aud = new Audio(), lw = prog.getTotalLength(), txtAr = document.querySelectorAll('.text');
aud.src = 'https://link.hhtjim.com/163/257332.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-4 16:03

有声有色朋友下午好！这些老歌、红歌让人余音绕梁不会忘。谢谢你！

有声有色 发表于 2022-9-4 16:13

梦油 发表于 2022-9-4 16:03
有声有色朋友下午好！这些老歌、红歌让人余音绕梁不会忘。谢谢你！

咱同乐
页: [1]
查看完整版本: 故乡是北京