加林森 发表于 2022-5-14 22:38
我是369极速版的。
369？你赶集呢？{:5_115:}
本帖最后由 加林森 于 2022-6-9 20:46 编辑 <br /><br />东篱闲人 发表于 2022-5-14 22:37
嗯嗯，现在看见了，都是宫里的故事啊。。。
你终于看见啦。老黑让你讲讲故事呢！{:4_189:}
<style>
.mama { position: relative; left: -374px; width: 1344px; height: 756px; background: #333 url('https://pic.imgdb.cn/item/62a1cdd90947543129c04b8b.jpg') no-repeat; box-shadow: 2px 2px 4px #333; }
.lrcWrap { left: 20px; top: 20px; padding: 26px; width: fit-content; height: fit-content; border-radius: 50%; text-align: center; background: transparent linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 2px 2px 4px #eee; cursor: pointer; position: absolute; }
.lrcWrap p { margin: 0; padding: 10px; color: #ccc; font: bold 1.2em sans-serif; text-shadow: 1px 1px 1px #333; }
.lrcBox { margin: 0; padding: 0; width: 400px; height: 72px;overflow: hidden; user-select: none; position: relative; }
.meter { margin: 16px 0; position: relative; width: 120px; }
.lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
.lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 18px / 24px sans-serif; color: gray; text-shadow: 1px 1px 1px black; list-style-type: none; }
</style>
<div class="mama">
<div class="lrcWrap">
<p>~轻夜留声~</p>
<div class="lrcBox">
<ul class="lrcUl"></ul>
</div>
<meter class="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
</div>
</div>
<audio class="aud" src="https://www.joy127.com/url/90739.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let aud = document.querySelector('.aud'),
meter = document.querySelector('.meter'),
lrcWrap = document.querySelector('.lrcWrap'),
lrcUl = document.querySelector('.lrcUl');
let slip = 0; //同步时差
let lrcAr = [
['ti:轻夜留声'],
['ar:侃侃'],
['al:《轻夜留声》'],
['by:大津'],
['00:01.70','轻夜留声-侃侃'],
['00:04.03','词/编：大津'],
['00:05.57','曲：张薇'],
['00:08.27','留声机的歌都已沙哑'],
['00:26.90','眼泪在红酒杯口轻洒'],
['00:30.89','倒不开昼与夜的时差'],
['00:36.40','想靠近却又轻轻挣扎'],
['00:42.16','是谁留在信箱里的花'],
['00:46.64','是谁留在寂寞的牵挂'],
['00:50.82','回忆很美很纯洁无暇'],
['00:56.33','如心底那易碎的童话'],
['01:01.34','或许只能说声再会吧'],
['01:06.18','留你在梦里自由挥洒'],
['01:11.46','来或去悲或喜尽量优雅'],
['01:17.11','只是你的笑还割舍不下'],
,
['01:27.03','还能有勇气拥抱一下'],
['01:32.16','思念像春天枝头的新芽'],
['01:37.08','幼稚可是却坚强的抒发'],
['02:03.16','留声机的歌都已沙哑'],
['02:09.88','眼泪在红酒杯口轻洒'],
['02:14.54','倒不开昼与夜的时差'],
['02:18.98','想靠近却又轻轻挣扎'],
['02:24.06','是谁留在信箱里的花'],
['02:29.55','是谁留在寂寞的牵挂'],
['02:33.67','回忆很美很纯洁无暇'],
['02:38.91','如心底那易碎的童话'],
['02:43.57','或许只能说声再会吧'],
['02:48.70','留你在梦里自由挥洒'],
['02:53.92','来或去悲或喜尽量优雅'],
['02:59.63','只是你的笑还割舍不下'],
['03:03.72','或许还是做个朋友吧'],
['03:08.89','还能有勇气拥抱一下'],
['03:14.10','思念像春天枝头的新芽'],
['03:19.23','幼稚可是却坚强的抒发'],
['03:24.64','或许只能说声再会吧'],
['03:28.75','留你在梦里自由挥洒'],
['03:33.98','来或去悲或喜尽量优雅'],
['03:39.36','只是你的笑还割舍不下'],
['03:43.89','或许还是做个朋友吧'],
['03:48.94','还能有勇气拥抱一下'],
['03:54.07','思念像春天枝头的新芽'],
['03:58.98','幼稚可是却坚强的抒发'],
['04:24.06','感谢欣赏']
];
for(j=0; j<lrcAr.length; j++){
lrcUl.innerHTML += '<li id="li' + lrcAr + '">' + lrcAr + '</li>';
}
aud.addEventListener('timeupdate', () => {
let prog = 100 * aud.currentTime / aud.duration;
meter.value = prog;
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr - slip){
if(j > 0){
let idxLast = lrcAr;
document.getElementById('li' + idxLast).style.color = 'gray';
lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
}
let idx = lrcAr;
document.getElementById('li' + idx).style.color = 'ghostwhite';
}
}
})
aud.addEventListener('ended', () => {
document.getElementById("li" + lrcAr).style.color = 'gray';
lrcUl.style.top = 0;
})
lrcWrap.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
朵拉 发表于 2022-5-14 21:58
这首歌 确实好听
谢谢朵拉了！{:4_204:}
加林森 发表于 2022-5-14 22:40
你终于看见啦。老黑让你讲讲故事呢！
唉，说起来话长啊。一九三七年哪，日本鬼子进了中原。先打开了芦沟桥，后进了山海关。。。。。
东篱闲人 发表于 2022-5-14 22:43
唉，说起来话长啊。一九三七年哪，日本鬼子进了中原。先打开了芦沟桥，后进了山海关。。。。。
你怎么讲这些了？{:4_203:}
东篱闲人 发表于 2022-5-14 22:40
369？你赶集呢？
当然，不行吗。。。。{:5_158:}
东篱闲人 发表于 2022-5-14 22:37
嗯嗯，现在看见了，都是宫里的故事啊。。。
你得讲讲，你怎么过的日子。。。。。
东篱闲人 发表于 2022-5-14 22:38
午门不是杀头的地方吗？你喜欢这地？
该死跑不了。。。。{:5_106:}
加林森 发表于 2022-5-14 22:49
你怎么讲这些了？
你不是要听故事吗？{:5_115:}
加林森 发表于 2022-5-14 22:50
当然，不行吗。。。。
行。。。
东篱闲人 发表于 2022-5-15 08:05
你不是要听故事吗？
让你讲的是以前的故事。。。。
东篱闲人 发表于 2022-5-15 08:05
行。。。
好。。。
加林森 发表于 2022-5-15 08:30
让你讲的是以前的故事。。。。
1937不是以前吗？{:5_115:}
东篱闲人 发表于 2022-5-15 08:33
1937不是以前吗？
为什么你想起日本鬼子的破事。。。。
加林森 发表于 2022-5-15 08:39
为什么你想起日本鬼子的破事。。。。
俺就知道这一个故事，奉献给你了。。。。{:4_170:}
东篱闲人 发表于 2022-5-15 08:40
俺就知道这一个故事，奉献给你了。。。。
要你来讲这个。。。。。{:5_158:}
加林森 发表于 2022-5-15 08:43
要你来讲这个。。。。。
{:4_181:}
东篱闲人 发表于 2022-5-15 08:45
杀无。。。。。
加林森 发表于 2022-5-14 12:10
就是要这个效果的。
不错，很气势{:4_173:}
红影 发表于 2022-5-15 09:40
不错，很气势
红墙后面故事多。