加林森 发表于 2022-8-8 08:44

【中伏消暑】第十四天 光：《光》- 陈粒


<style>
.papa { left: -214px;width: 1024px; height: 680px; background: rgba(0,0,0,.4) url('https://s1.ax1x.com/2022/08/06/vuREOU.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: 10px; 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: 680px; object-fit: cover; opacity: 0.2; }
</style>

<div class="papa">
<video class="vid" src="https://img.tukuppt.com/video_show/2629112/00/01/84/5b4d58fade11d.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=30431364.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','曲名：光'],
      ['60.51','歌手：陈粒 '],
      ['80.51','所属专辑：如也'],
      ['140.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-8 08:45

光-陈粒

作词 : 陈粒
作曲 : 陈粒
编曲/混音：陈粒
光落在你脸上
可爱一如往常
你的一寸一寸
填满欲望
城市啊有点脏
路人行色匆忙
孤单 脆弱 不安
都是平常
你低头不说一句
你朝着灰色走去
你住进混沌深海
你开始无望等待
你低头不说一句
你朝着灰色走去
你住进混沌深海
你开始无望等待
快乐缺点勇气
浪漫缺点诗意
沉默一句一句
都是谜题
都清醒都独立
妄想都没痕迹
我们一声不吭
慢慢窒息
你低头不说一句
你朝着灰色走去
你住进混沌深海
你开始无望等待
你低头不说一句
你朝着灰色走去
你住进混沌深海
你开始无望等待

梦油 发表于 2022-8-8 10:31

欣赏佳作，问候队长。

红影 发表于 2022-8-8 11:05

这个是带视频效果的吧，欣赏队长好帖{:4_187:}

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

梦油 发表于 2022-8-8 10:31
欣赏佳作，问候队长。

老梦中午好。谢谢啦！

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

红影 发表于 2022-8-8 11:05
这个是带视频效果的吧，欣赏队长好帖

是的。

梦油 发表于 2022-8-8 13:29

加林森 发表于 2022-8-8 11:21
老梦中午好。谢谢啦！

别客气，老林。

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

梦油 发表于 2022-8-8 13:29
别客气，老林。

好的好的。

樵歌 发表于 2022-8-8 16:30

吚哩哇辣，象小日本语{:4_173:}

加林森 发表于 2022-8-8 16:59

樵歌 发表于 2022-8-8 16:30
吚哩哇辣，象小日本语

老兄啥子耳朵哦？{:4_203:}

红影 发表于 2022-8-8 22:14

加林森 发表于 2022-8-8 11:21
是的。

队长的视频用得很恰当{:4_204:}

加林森 发表于 2022-8-8 22:41

红影 发表于 2022-8-8 22:14
队长的视频用得很恰当

谢谢啦！
页: [1]
查看完整版本: 【中伏消暑】第十四天 光：《光》- 陈粒