胡广生
本帖最后由 马黑黑 于 2022-6-6 22:07 编辑 <br /><br /><style>.mama { left: -302px; width: 1200px; height: 900px; background: #eee url('https://638183.freep.cn/638183/Pic/2022/stone.jpg') no-repeat; box-shadow: 2px 2px 2px #333; position: relative; }
.meter { position: absolute; left: -30px; top: 58px; width: 100px; transform: rotate(-90deg); cursor: pointer; }
.stone { position: absolute; top: 100px; right: 50px; width: 150px; height: 150px; background-color: rgba(255,255,255,.35); background-image: radial-gradient(rgba(255,255,255,.25),rgba(255,255,255,.65)); border-radius: 35% 65% 69% 31% / 53% 53% 47% 47%;box-shadow: inset 10px 10px 10px rgba(0,0,0,.05), 15px 25px 10px rgba(0,0,0,.1), 15px 20px 20px rgba(0,0,0,.05), inset -10px -10px 15px rgba(255,255,255,.9); }
#lrcDiv_outer { position: absolute; left: 20px; top: 20px; width: fit-content; height: fit-content;padding: 10px 14px; background: transparent linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 2px 2px 4px #2E63A5; border-radius: 6px; }
#lrcDiv_inner { width: 340px; height: 72px; padding: 0px; overflow: hidden; }
#lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
#lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 18px / 24px sans-serif; color: lightseagreen; text-shadow: 1px 1px 1px #333; list-style-type: none; }
</style>
<div class="mama">
<div class="stone"></div>
<div id="lrcDiv_outer">
<div id="lrcDiv_inner"><ul id="lrcUl"></ul></div>
</div>
<meter class="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
</div>
<audio class="aud" src="http://www.kumeiwp.com/sub/filestores/2022/03/07/323ae02549faa8fd493bbf6083a379bf.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let aud = document.querySelector('.aud'),
meter = document.querySelector('.meter'),
lrcUl = document.getElementById('lrcUl');
let lrcAr=[
['0:00','作词 : 任素汐'],
['0:05','作曲 : 任素汐'],
['0:08','胡广生 - 师葭希、韩甜甜/小石头和孩子们'],
['0:10','演唱：师葭希/韩甜甜'],
['0:12','声乐老师/和声编写：石栋颖'],
['0:15','录音师/缩混：石栋颖'],
['0:19','录音棚：小石头音乐录音棚'],
['0:20','小石头和孩子们 出品'],
['0:22','师葭希：一个乌的黑团团'],
['0:26','高高哩 哑哑哩'],
['0:28','两个魂喘着粗气'],
['0:31','烟尘四起'],
['0:34','你认得我吗'],
['0:36','跟我说那么多句'],
['0:40','你要哩尊严'],
['0:42','我熟悉'],
['0:45','韩甜甜：桥上走的哪一句'],
['0:48','我没到 你别起韵'],
['0:51','你就把头转过去'],
['0:55','莫给我消息'],
['0:57','我欠你啥子嘛'],
['1:00','我啥子都不欠你的'],
['1:03','你问我真哩迈 真哩'],
['1:08','师葭希、韩甜甜：走走停停不如定定'],
['1:14','凄凄切切说句谢谢'],
['1:20','等等 不必等等'],
['1:26','等等 别等等'],
['1:54','韩甜甜：桥上走的哪一句'],
['1:57','我没到 你别起韵'],
['2:00','你就把头转过去'],
['2:03','莫给我消息'],
['2:05','师葭希：我欠你啥子嘛'],
['2:08','我啥子都不欠你的'],
['2:11','你问我真哩迈 真哩'],
['2:17','师葭希、韩甜甜：走走停停不如定定'],
['2:23','凄凄切切说句谢谢'],
['2:29','等等 不必等等'],
['2:34','等等 别等等'],
['2:40','等等 不必等等'],
['2:45','等等 别等等'],
['2:52','啊。。。'],
['3:13','师葭希：下个清明 我去音书祭你'],
['3:21','还听 还静'],
['3:24','lrc整理 Mark']
];
let toSec = (lrcTime) => {
let tmpAr = lrcTime.split(':');
lrcTime = tmpAr * 60 + parseInt(tmpAr);
return lrcTime;
}
for(j=0; j<lrcAr.length; j++){
lrcAr = toSec(lrcAr);
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){
if(j > 0){
let idxLast = lrcAr;
document.getElementById('li' + idxLast).style.color = 'lightgreen';
lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
}
let idx = lrcAr;
document.getElementById('li' + idx).style.color = 'gold';
}
}
})
aud.addEventListener('ended', () => {
document.getElementById("li" + lrcAr).style.color = 'lightgreen';
lrcUl.style.top = 0;
})
meter.onclick = () => aud.paused ? aud.play() : aud.pause();
</script> 沙发我的 按钮是上面那个大水珠？ 按钮加毛玻璃旁边了 像个人名啊。。。 东篱闲人 发表于 2022-6-6 22:14
像个人名啊。。。
就是个人名，电影无名之辈里的角色 黑黑这个按钮加的好，我可以用了 马黑黑 发表于 2022-6-6 22:16
就是个人名，电影无名之辈里的角色
哦。没看过。。。{:5_103:} 东篱闲人 发表于 2022-6-6 22:23
哦。没看过。。。
我也没看过，但这歌挺好，很多人喜欢，是朋友推荐我听的。因为听不懂，就做个歌词同步的
。 小辣椒 发表于 2022-6-6 22:18
黑黑这个按钮加的好，我可以用了
应该不错吧？我想今后它可以跟歌词板结合在一起 来学习。 加林森 发表于 2022-6-6 22:57
来学习。
{:4_190:} 我喜欢听的歌。
其中韵味，只有经过才能理解。
孤独是最好的结局{:4_203:} 最深情的语言是我无话可说。 本帖最后由 马黑黑 于 2022-6-6 23:05 编辑
四海八荒 发表于 2022-6-6 22:59
我喜欢听的歌。
其中韵味，只有经过才能理解。
孤独是最好的结局
嗯，说的到位。故事挺好。小石头和孩子们的团队成员，都很年轻，还是学生仔。 四海八荒 发表于 2022-6-6 23:00
最深情的语言是我无话可说。
{:5_108:} 明天来学习！ 这个构思好，把进度条放在歌词框的旁边了。黑黑真棒{:4_187:} 红影 发表于 2022-6-7 09:24
这个构思好，把进度条放在歌词框的旁边了。黑黑真棒
是不是像卷轴？
页:
[1]
2