《追梦赤子心》- GALA
本帖最后由 加林森 于 2022-8-2 11:01 编辑 <br /><br /><style>.papa { left: -214px;width: 1024px; height: 576px; background: rgba(0,0,0,.4) url('https://s1.ax1x.com/2022/08/02/vEFGgU.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=355992.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','歌手：GALA '],
['160.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-2 10:55 编辑
《追梦赤子心》- GALA
充满鲜花的世界到底在哪里
如果它真的存在那么我一定会去
我想在那里最高的山峰矗立
不在乎它是不是悬崖峭壁
用力活着用力爱哪怕肝脑涂地
不求任何人满意只要对得起自己
关于理想我从来没选择放弃
即使在灰头土脸的日子里
也许我没有天分
但我有梦的天真
我将会去证明用我的一生
也许我手比较笨
但我愿不停探寻
付出所有的青春不留遗憾
向前跑 迎着冷眼和嘲笑
生命的广阔不历经磨难怎能感到
命运它无法让我们跪地求饶
就算鲜血洒满了怀抱
继续跑 带着赤子的骄傲
生命的闪耀不坚持到底怎能看到
与其苟延残喘不如纵情燃烧吧
有一天会再发芽
未来迷人绚烂总在向我召唤
哪怕只有痛苦作伴也要勇往直前
我想在那里最蓝的大海扬帆
绝不管自己能不能回还
失败后郁郁寡欢
那是懦夫的表现
只要一息尚存请握紧双拳
在天色破晓之前
我们要更加勇敢
等待日出时最耀眼的瞬间
向前跑 迎着冷眼和嘲笑
生命的广阔不历经磨难怎能感到
命运它无法让我们跪地求饶
就算鲜血洒满了怀抱
继续跑 带着赤子的骄傲
生命的闪耀不坚持到底怎能看到
与其苟延残喘不如纵情燃烧吧
为了心中的美好
不妥协直到变老
欣赏队长精美作品。赞！ 马黑黑 发表于 2022-8-2 12:33
欣赏队长精美作品。赞！
谢谢老黑支持 ！{:4_190:} 加林森 发表于 2022-8-2 12:45
谢谢老黑支持 ！
{:4_190:} 马黑黑 发表于 2022-8-2 12:59
谢茶！ 队长辛苦，一天做3个{:4_187:} 小辣椒 发表于 2022-8-2 20:50
队长辛苦，一天做3个
电脑卡起也得做啊。 加林森 发表于 2022-8-2 21:03
电脑卡起也得做啊。
电脑卡，看看路由器有没有问题，天热到时候关一下 小辣椒 发表于 2022-8-2 21:15
电脑卡，看看路由器有没有问题，天热到时候关一下
可能是我的系统出问题了。我在等硬盘，还没有到。
页:
[1]