论坛 › 欢乐水吧 › 《罗曼蒂克 demo》- 狠人儿段同愿

加林森 发表于 2022-8-20 14:56

《罗曼蒂克 demo》- 狠人儿段同愿

<style>
.papa { left: -214px;width: 1024px; height: 640px; background: rgba(0,0,0,.4) url('https://pic.imgdb.cn/item/63007f9016f2c2beb1b5959b.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: 250px; 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: 640px; object-fit: cover; opacity: 0.2; }
</style>

<div class="papa">
<img id="boat" src='https://pic.imgdb.cn/item/6235d74f5baa1a80ab9d74a0.gif' alt="" />
         <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=478754123.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','曲名：罗曼蒂克 demo'],
      ['120.51','歌手：狠人儿段同愿'],
      ['200.51','所属专辑：罗曼蒂克'],
      ['300.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 14:56

歌词：

作词 : 段同愿
作曲 : 段同愿
编曲 ：段同愿
吉他：段同愿
贝斯：段同愿
键盘：段同愿
鼓：段同愿
演唱：段同愿
缩混：段同愿
ou ou ou ou
ou ou ou ou
music
（和弦 Am F C E ）
我试图用安静抵挡你疯长的爱
抵挡热情抵挡冷落抵挡太慷慨
停下呼吸静听身边低声的哭泣
太过孤独太过自我太过不依赖
music
绿萝和常春藤静静呆坐花盆上
拉着被冲淡的阳光喋喋不休着
湮灭悲伤梦想泛黄凝望着未来
故事讲完时间静止美梦太实在
有数不完的罗曼蒂克
在漫天星光淹没我
双手拥抱着罗曼蒂克
让我沉溺目光变炙热
有数不完的罗曼蒂克
在无尽花海期待着
哦你的爱是罗曼蒂克
像阳光包围我
ou ou ou ou
bass solo
有数不完的罗曼蒂克
在漫天星光淹没我
双手拥抱着罗曼蒂克
让我沉溺目光变炙热
有数不完的罗曼蒂克
在无尽花海期待着
哦你的爱是罗曼蒂克
像阳光包围我
困惑的你和我
执着的你和我
沉默的你和我
发光的你和我
music

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

PNG图图很漂亮。欣赏队长好帖{:4_204:}

加林森 发表于 2022-8-20 17:04

红影 发表于 2022-8-20 15:46
PNG图图很漂亮。欣赏队长好帖

谢谢支持！

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

海滨的日出真漂亮

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

梦油 发表于 2022-8-20 19:50
海滨的日出真漂亮

是的。

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

二猫恩爱的啊

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

绿叶清舟 发表于 2022-8-20 19:57
二猫恩爱的啊

蝴蝶也一样的嘛。{:4_189:}

千羽 发表于 2022-8-20 20:16

好看的美图，音乐也好听{:4_187:}

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

千羽 发表于 2022-8-20 20:16
好看的美图，音乐也好听

摩洛哥的风景。漂亮吧。谢谢千羽支持！{:4_171:}

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

加林森 发表于 2022-8-20 20:10
蝴蝶也一样的嘛。

一样恩爱了

马黑黑 发表于 2022-8-20 20:23

队长开始浪了{:4_170:}

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

绿叶清舟 发表于 2022-8-20 20:22
一样恩爱了

就是。{:4_189:}

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

马黑黑 发表于 2022-8-20 20:23
队长开始浪了

难道你就不浪了？{:4_203:}

马黑黑 发表于 2022-8-20 20:28

加林森 发表于 2022-8-20 20:25
难道你就不浪了？

我和东篱一样，淳朴

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

马黑黑 发表于 2022-8-20 20:28
我和东篱一样，淳朴

那么俩个是最大的猪。{:4_170:}

马黑黑 发表于 2022-8-20 21:07

加林森 发表于 2022-8-20 20:30
那么俩个是最大的猪。

大猪挺好

东篱闲人 发表于 2022-8-20 21:10

漂亮的风景。。。{:5_116:}

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

马黑黑 发表于 2022-8-20 21:07
大猪挺好

嗯嗯。不错的。

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

东篱闲人 发表于 2022-8-20 21:10
漂亮的风景。。。

是啊。

查看完整版本: 《罗曼蒂克 demo》- 狠人儿段同愿