加林森 发表于 2022-8-3 07:58

【中伏消暑】第九天 年：《年少有为》- 李荣浩


<style>
.papa { left: -214px;width: 1024px; height: 575px; background: rgba(0,0,0,.4) url('https://s1.ax1x.com/2022/08/02/vETzSP.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=1293886117.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','所属专辑：耳朵'],
      ['260.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-3 07:59

年少有为 - 李荣浩

作词 : 李荣浩
作曲 : 李荣浩
编曲 : 李荣浩
制作人 : 李荣浩



电视一直闪
联络方式都还没删
你待我的好
我却错手毁掉
也曾一起想
有个地方睡觉吃饭
可怎么去熬 日夜颠倒
连头款也凑不到
墙板 被我砸烂
到现在还没修
一碗热的粥
你怕我没够
都留一半带走
给你形容
美好今后 你常常眼睛会红
原来心疼我
我那时候不懂
假如我年少有为 不自卑
懂得什么是珍贵
那些美梦
没给你 我一生有愧
假如我年少有为 知进退
才不会让你替我受罪
婚礼上 多喝几杯
和你现在那位

也曾一起想
有个地方睡觉吃饭
可怎么去熬 日夜颠倒
连头款也凑不到
墙板 被我砸烂
到现在还没修
一碗热的粥
你怕我没够
都留一半带走
给你形容
美好今后 你常常眼睛会红
原来心疼我
我那时候不懂
假如我年少有为 不自卑
懂得什么是珍贵
那些美梦
没给你 我一生有愧
假如我年少有为 知进退
才不会让你替我受罪
婚礼上 多喝几杯
和你现在那位
假如我年少有为 不自卑
尝过后悔的滋味
金钱地位
搏到了却好想退回
假如我年少有为 知进退
才不会让你替我受罪
婚礼上 多喝几杯
和你现在那位
在婚礼上 多喝几杯
祝我年少有为

樵歌 发表于 2022-8-3 08:13

先不加分听了再说。过门太长了哇。嗯，情感丰富。

小星世龙 发表于 2022-8-3 08:47

图文声融为一体，十分精彩，点赞！

浣溪沙 发表于 2022-8-3 09:41

精彩纷呈，大赞{:4_178:}

浣溪沙 发表于 2022-8-3 09:42

{:4_208:}享受一哈

加林森 发表于 2022-8-3 10:00

樵歌 发表于 2022-8-3 08:13
先不加分听了再说。过门太长了哇。嗯，情感丰富。

好听不？

加林森 发表于 2022-8-3 10:01

小星世龙 发表于 2022-8-3 08:47
图文声融为一体，十分精彩，点赞！

谢谢支持！{:4_190:}

加林森 发表于 2022-8-3 10:01

浣溪沙 发表于 2022-8-3 09:41
精彩纷呈，大赞

谢谢沙沙支持！{:4_190:}

加林森 发表于 2022-8-3 10:02

浣溪沙 发表于 2022-8-3 09:42
享受一哈

你慢慢听。

红影 发表于 2022-8-3 10:38

歌很好听，制作也好。李荣浩并不好看，这个角度看上去还行{:4_173:}

加林森 发表于 2022-8-3 10:56

红影 发表于 2022-8-3 10:38
歌很好听，制作也好。李荣浩并不好看，这个角度看上去还行

马马虎虎还看得过去。

樵歌 发表于 2022-8-3 19:21

加林森 发表于 2022-8-3 10:00
好听不？

好{:4_199:}

小辣椒 发表于 2022-8-3 19:30

樵歌 发表于 2022-8-3 08:13
先不加分听了再说。过门太长了哇。嗯，情感丰富。

樵哥哥也是懂的{:4_170:}

过门就是前奏

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

樵歌 发表于 2022-8-3 19:21
好

符合要求吧！

樵歌 发表于 2022-8-4 20:15

小辣椒 发表于 2022-8-3 19:30
樵哥哥也是懂的

过门就是前奏

还小辣椒有艺朮范{:4_172:}

樵歌 发表于 2022-8-4 20:18

加林森 发表于 2022-8-3 20:20
符合要求吧！

棒及了

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

樵歌 发表于 2022-8-4 20:18
棒及了

好的。老兄感冒好没有啊？
页: [1]
查看完整版本: 【中伏消暑】第九天 年：《年少有为》- 李荣浩