论坛 › 音乐沙龙 › 《春风十里》- 鹿先森乐队

加林森 发表于 2022-8-20 13:45

《春风十里》- 鹿先森乐队

<style>
.papa { left: -214px;width: 1024px; height: 576px; background: rgba(0,0,0,.4) url('https://pic.imgdb.cn/item/6300718816f2c2beb1ad1680.jpg'); position: relative; }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: relative; left: 10px; top: 470px; 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; }
.vid { position: absolute; top: -2px; width: 1024px; height: 576px; object-fit: cover; opacity: 0.2; }
</style>

<div class="papa">
<video class="vid" src="https://img.tukuppt.com/video_show/14038878/00/18/98/5ef889677374c.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
         <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=38576323.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','歌手：鹿先森乐队'],
      ['200.51','所属专辑：所有的酒，都不如你'],
      ['360.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-20 13:46

歌词：

作词 : 倍倍
作曲 : 倍倍
编曲 : 鹿先森乐队

我在二环路的里边 想着你
你在远方的山上 春风十里
今天的风吹向你 下了雨
我说所有的酒 都不如你

我在鼓楼的夜色中 为你唱花香自来
在别处 沉默相遇和期待
飞机飞过 车水马龙的城市
千里之外 不离开

把所有的春天 都揉进了一个清晨
把所有停不下的言语变成秘密 关上了门
莫名的情愫啊 请问 谁来将它带走呢
只好把岁月化成歌 留在山河
我在鼓楼的夜色中 为你唱花香自来
在别处 沉默相遇和期待
飞机飞过 车水马龙的城市
千里之外 不离开

把所有的春天 都揉进了一个清晨
把所有停不下的言语变成秘密 关上了门
莫名的情愫啊 请问 谁来将它带走呢
只好把岁月化成歌 留在山河

把所有的春天 都揉进了一个清晨
把所有停不下的言语变成秘密 关上了门
莫名的情愫啊 请问 谁来将它带走呢
只好把岁月化成歌 留在山河

我在二环路的里边 想着你
你在远方的山上 春风十里
今天的风又吹向你 下了雨
我说所有的酒 都不如你

红影 发表于 2022-8-20 15:35

图片里的女生是在跳绳么，咋在水里跳啊{:4_173:}

加林森 发表于 2022-8-20 15:39

红影 发表于 2022-8-20 15:35
图片里的女生是在跳绳么，咋在水里跳啊

在播放器上面跳。

上海朝阳 发表于 2022-8-20 18:12

我极速兼容都换了，没见小姑娘跳动呀，只有后面的云系在涌动。

加林森 发表于 2022-8-20 18:46

上海朝阳 发表于 2022-8-20 18:12
我极速兼容都换了，没见小姑娘跳动呀，只有后面的云系在涌动。

这个是看背景变化的。小丫头是不动的。

绿叶清舟 发表于 2022-8-20 19:38

小丫头身材太爆了{:4_173:}

加林森 发表于 2022-8-20 19:40

绿叶清舟 发表于 2022-8-20 19:38
小丫头身材太爆了

厉害吧。{:4_189:}

绿叶清舟 发表于 2022-8-20 19:41

加林森 发表于 2022-8-20 19:40
厉害吧。

太厉害了，一年半载练不出来的了

梦油 发表于 2022-8-20 19:47

小姑娘怎么没跳起来啊

加林森 发表于 2022-8-20 19:49

绿叶清舟 发表于 2022-8-20 19:41
太厉害了，一年半载练不出来的了

那是肯定的。

加林森 发表于 2022-8-20 19:49

梦油 发表于 2022-8-20 19:47
小姑娘怎么没跳起来啊

我没有让她跳的。

梦油 发表于 2022-8-20 19:54

加林森 发表于 2022-8-20 19:49
我没有让她跳的。

摇起跳绳跳起来多好啊

加林森 发表于 2022-8-20 19:58

梦油 发表于 2022-8-20 19:54
摇起跳绳跳起来多好啊

容易打架了。

梦油 发表于 2022-8-20 20:45

加林森 发表于 2022-8-20 19:58
容易打架了。

哈哈哈！作图我是外行啊。

加林森 发表于 2022-8-20 20:48

梦油 发表于 2022-8-20 20:45
哈哈哈！作图我是外行啊。

嗯嗯，明白的。

青青子衿 发表于 2022-8-20 22:40

这个男生，声音好干净的。。。是个好人家的阳光男孩

青青子衿 发表于 2022-8-20 22:41

歌真好听，夜色都美了起来

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

青青子衿 发表于 2022-8-20 22:40
这个男生，声音好干净的。。。是个好人家的阳光男孩

你喜欢就好！

红影 发表于 2022-8-20 22:47

加林森 发表于 2022-8-20 15:39
在播放器上面跳。

嗯嗯，这样理解也对{:4_173:}

查看完整版本: 《春风十里》- 鹿先森乐队