加林森 发表于 2022-8-11 11:10

【中伏消暑】第十七天 回：《初恋》- 回春丹


<style>
.papa { left: -214px;width: 1024px; height: 576px; background: rgba(0,0,0,.4) url('https://s1.ax1x.com/2022/08/09/vlz1Rs.jpg'); position: relative; }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: relative; left: 700px; top: 480px; padding: 10px; width: fit-content; font: normal 1em sans-serif; color: snow; background: rgba(255,255,255,.25); backdrop-filter: blur(2px); border-radius: 8px; overflow: hidden; box-shadow: 1px 2px 2px #000; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
</style>

<div class="papa">
      <div class="playbox">
                <p id="geci">LRC Loading ... </p>
                <p style="display: flex; align-items: center; gap: 4px; margin-top: 10px;">
                        <input id="btnplay" type="button" value=">" />
                        <input id="slider" type="range" min="0" max="100" value="0" />
                        <span id="per">0:0 | 0:0</span>
                </p>
      </div>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1873049720.mp3" autoplay="autoplay" loop="loop"></audio>
</div>

<script>

let slider = document.querySelector('#slider'),
      aud = document.querySelector('#aud'),
      per = document.querySelector('#per'),
      btnplay = document.querySelector('#btnplay'),
      geci = document.querySelector('#geci');
let slip = 0; //误差值
let lrcAr = [
      ['0.06','曲名：初恋'],
      ['120.51','歌手：回春丹'],
      ['160.51','所属专辑：初恋'],
      ['220.00','谢谢欣赏'],
];

slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');

aud.addEventListener('timeupdate', () => {
      let prog = 100 * aud.currentTime / aud.duration;
      slider.value = prog;
      per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
                for(j=0; j<lrcAr.length; j++){
                if(aud.currentTime >= lrcAr - slip){
                        geci.innerHTML = lrcAr;
                }
      }
});

let toMin = (sec) => {
      if(!sec) return '0:00';
      sec = parseInt(sec);
      return parseInt(sec / 60) + ':' +parseFloat(sec % 60).toString().padStart(2,'0');
}

</script>

加林森 发表于 2022-8-11 11:11

歌词：

作词 : 郑国江
作曲 : 村下孝蔵
编曲 : 回春丹/韦伟
分分钟都盼望跟她见面
默默地伫候亦从来没怨
分分钟都渴望与她相见
在路上碰著亦乐上几天
爱恋没经验
今天初发现
遥遥共她见一面
那份快乐太新鲜
我一夜失眠
影子心里现
问为何共她见一面
美丽印象似初恋
默默望著是 默默望著那目光似电
那刹那接触已令我倒颠
分分钟都盼望跟她见面
默默地伫候亦从来没怨
分分钟都渴望与她相见
在路上碰著亦乐上几天
轻快的感觉飘上面
可爱的一个初恋
爱恋没经验
今天初发现
遥遥共她见一面
那份快乐太新鲜
我一夜失眠
影子心里现
问为何共她见一面
美丽印象似初恋
分分钟都盼望跟她见面
默默地伫候亦从来没怨
分分钟都渴望与她相见
在路上碰著亦乐上几天
分分钟都盼望跟她见面
默默地伫候亦从来没怨
分分钟都渴望与她相见
在路上碰著亦乐上几天
轻快的感觉飘上面
可爱的一个初恋
分分钟都盼望跟她见面
默默地伫候亦从来没怨
分分钟都渴望与她相见
在路上碰著亦乐上几天
轻快的感觉飘上面

樵歌 发表于 2022-8-11 11:52

菇凉是一个比一个漂亮哇。{:4_203:}

加林森 发表于 2022-8-11 11:56

樵歌 发表于 2022-8-11 11:52
菇凉是一个比一个漂亮哇。

漂亮吧。{:4_189:}

小辣椒 发表于 2022-8-11 12:48

队长这个图图漂亮的{:4_199:}

加林森 发表于 2022-8-11 13:41

小辣椒 发表于 2022-8-11 12:48
队长这个图图漂亮的

是啊。可爱的小丫头！

红影 发表于 2022-8-11 14:51

初恋如糖，那么甜蜜。队长的图图很好地诠释了歌曲含义，很赞{:4_187:}

加林森 发表于 2022-8-11 15:46

红影 发表于 2022-8-11 14:51
初恋如糖，那么甜蜜。队长的图图很好地诠释了歌曲含义，很赞

红影看见这个小丫头乖不？{:4_189:}

樵歌 发表于 2022-8-11 20:03

加林森 发表于 2022-8-11 11:56
漂亮吧。

没有最漂亮，只有更漂亮，看你明天的{:4_189:}

加林森 发表于 2022-8-11 20:10

樵歌 发表于 2022-8-11 20:03
没有最漂亮，只有更漂亮，看你明天的

你整成望乡了哇。。。。{:4_189:}

红影 发表于 2022-8-11 21:59

加林森 发表于 2022-8-11 15:46
红影看见这个小丫头乖不？

嗯，图片很漂亮{:4_187:}

加林森 发表于 2022-8-11 22:20

红影 发表于 2022-8-11 21:59
嗯，图片很漂亮

嗯嗯。是的。
页: [1]
查看完整版本: 【中伏消暑】第十七天 回：《初恋》- 回春丹