【中伏消暑】第八天 许：《雅俗共赏》- 许嵩
本帖最后由 加林森 于 2022-8-2 08:53 编辑 <br /><br /><style>.papa { left: -214px;width: 1024px; height: 682px; background: rgba(0,0,0,.4) url('https://pic.imgdb.cn/item/62e735988c61dc3b8e845b69.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=411214279.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','所属专辑：青年晚报'],
['240.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 08:26 编辑
雅俗共赏-许嵩
作词 : 许嵩
作曲 : 许嵩
编曲 : 郑楠
是否每一部戏都看得完整场
是否每一天过得都有多难忘
表情迟钝可能因为比较爱想
不擅长眉目表达
总在盼望 总在失望
日子还不都这样
俗的无畏 雅的轻狂
还不都是一副臭皮囊
他们说快写一首情歌雅俗共赏
落笔传神还要容易传唱
上得厅堂也下得厨房
就像我一直在找的姑娘
快写一首情歌雅俗共赏
打完字谜还要接着打榜
如果胡同弄堂全都播放
气韵里居然添了些孤芳自赏
是否每一场美梦醒来都很爽
是否每一次成熟都徒增了业障
比痛和痒更多的
是不痛不痒
所以我爱进剧场
总在盼望 总在失望
日子还不都这样
俗的无畏 雅的轻狂
还不都是一副臭皮囊
他们说快写一首情歌雅俗共赏
落笔传神还要容易传唱
上得厅堂也下得厨房
就像我一直在找的姑娘
快写一首情歌雅俗共赏
打完字谜还要接着打榜
如果胡同弄堂全都播放
气韵里居然添了些孤芳自赏
谁的故事有营养
大俗或大雅的都在理直气壮
洒狗血或白雪的现场
都邀我观赏
还真是大方
快写一首情歌雅俗共赏
落笔传神还要容易传唱
上得厅堂也下得厨房
就像我一直在找的姑娘
有没有一种生活雅俗共赏
情节起伏跌宕让人向往
满纸荒唐中窥见满脸沧桑
触到神经就要懂得鼓掌
别说一不在乎二没期望
太超脱 中枪中奖感觉会一样
加林森 发表于 2022-8-2 08:22
雅俗共赏-许嵩
作词 : 许嵩
雅俗共赏、清新自然。 梦油 发表于 2022-8-2 09:50
雅俗共赏、清新自然。
老梦上午好！ 加林森 发表于 2022-8-2 10:28
老梦上午好！
你好，老林。 梦油 发表于 2022-8-2 10:37
你好，老林。
都好都好！品茶:{:4_180:} 画面如一首朦胧诗{:4_178:} 我又没分分了{:4_201:} 浣溪沙 发表于 2022-8-2 11:26
画面如一首朦胧诗
好看吧。 浣溪沙 发表于 2022-8-2 11:27
我又没分分了
没关系的，共同欣赏就行了。{:4_190:} 一首很好听的歌，队长的制作真棒{:4_187:} 红影 发表于 2022-8-2 13:21
一首很好听的歌，队长的制作真棒
红影下午好！谢谢！ 加林森 发表于 2022-8-2 13:28
红影下午好！谢谢！
这图图像透明的。 红影 发表于 2022-8-2 20:23
这图图像透明的。
就是用了透明功能的。 加林森 发表于 2022-8-2 20:43
就是用了透明功能的。
哦，这个功能怎么用出来啊？ 红影 发表于 2022-8-3 12:35
哦，这个功能怎么用出来啊？
在秀秀里有这个功能的。
页:
[1]