论坛 › 现代文学 › 【未伏消暑】第四天 伏：《面对》- 伏仪

加林森 发表于 2022-8-18 13:36

【未伏消暑】第四天 伏：《面对》- 伏仪

<style>
.papa { left: -214px;width: 1024px; height: 672px; background: rgba(0,0,0,.4) url('https://s1.ax1x.com/2022/08/11/vGrVs0.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; }
</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=1377331039.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','曲名：面对'],
      ['80.51','歌手：伏仪 '],
      ['120.51','所属专辑：虚构一些问题'],
      ['180.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-18 13:37

歌词：
作词 : 唐映枫
作曲 : 伏仪
编曲 Arranger：赵二
你在难过什么呢？
为昨天发生的事
去责备自己的不成熟
可是，人会成长啊
所以庆幸时间吧
人生不就是这样
抱一抱，也还好
宁愿一切都很好
这不是你自己的问题
人总归要好好去生活
走一步，下一步
每个人都曾孤独
你用心来看看这世界
没有选择会是唯一的路
你在抱怨什么呢？
为明天到来的事？
说人生像是没有意义
可是，还有爱人呐
所以珍惜遗憾吧
去学会承担自己
抱一抱，也还好
相信一切都很好
这不是你自己的问题
人总归要好好去生活
抱一抱，不要哭
尽管我也曾虚无
你用心来看看这世界
没有选择会是唯一的路
你在期待什么呢？
为不会发生的事？
像一个碌碌无为的人
所以，打起精神吧
该去面对人生呐
这一刻我陪着你

红影 发表于 2022-8-18 16:19

这歌词像在慢慢开解他人，说的还是很有道理的。欣赏队长好帖{:4_187:}

梦油 发表于 2022-8-18 16:21

好漂亮的制作。

加林森 发表于 2022-8-18 16:25

红影 发表于 2022-8-18 16:19
这歌词像在慢慢开解他人，说的还是很有道理的。欣赏队长好帖

是的。谢谢红影支持！

加林森 发表于 2022-8-18 16:26

梦油 发表于 2022-8-18 16:21
好漂亮的制作。

是不是很阳光啊。

梦油 发表于 2022-8-18 16:37

加林森 发表于 2022-8-18 16:26
是不是很阳光啊。

是的，老林只做真美！

樵歌 发表于 2022-8-18 16:50

哄宝宝睡觉了{:4_173:}

加林森 发表于 2022-8-18 17:13

梦油 发表于 2022-8-18 16:37
是的，老林只做真美！

嗯嗯。

加林森 发表于 2022-8-18 17:15

樵歌 发表于 2022-8-18 16:50
哄宝宝睡觉了

哄你啦！{:4_172:}

马黑黑 发表于 2022-8-18 18:19

支持哄

樵歌 发表于 2022-8-18 18:37

加林森 发表于 2022-8-18 17:15
哄你啦！

老宝儿哈{:4_189:}

加林森 发表于 2022-8-18 18:38

马黑黑 发表于 2022-8-18 18:19
支持哄

要得要得。

加林森 发表于 2022-8-18 18:42

樵歌 发表于 2022-8-18 18:37
老宝儿哈

更好哄的。{:4_172:}

红影 发表于 2022-8-18 21:38

加林森 发表于 2022-8-18 16:25
是的。谢谢红影支持！

头一次听这歌呢，还挺好听的{:4_204:}

小辣椒 发表于 2022-8-18 22:20

队长这次活动完成是也是出色{:4_178:}

加林森 发表于 2022-8-19 08:37

红影 发表于 2022-8-18 21:38
头一次听这歌呢，还挺好听的

我也是第一次听的。

加林森 发表于 2022-8-19 08:38

小辣椒 发表于 2022-8-18 22:20
队长这次活动完成是也是出色

是的。每日一帖，还不错的。

樵歌 发表于 2022-8-19 11:14

加林森 发表于 2022-8-18 18:42
更好哄的。

哄老妞儿吧{:4_189:}

加林森 发表于 2022-8-19 13:05

樵歌 发表于 2022-8-19 11:14
哄老妞儿吧

你看着办。{:4_189:}

查看完整版本: 【未伏消暑】第四天 伏：《面对》- 伏仪