女人们的咖啡
本帖最后由 绿叶清舟 于 2022-6-25 21:58 编辑 <br /><br /><style>.papa { left: -214px; width: 1000px; height: 700px; background: rgba(0,0,0,.4) url('https://pic.imgdb.cn/item/62b710510947543129b1ced0.jpg') no-repeat center / cover; overflow: hidden; box-shadow: 0 4px 24px #000; position: relative; }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: absolute; padding: 10px; width: fit-content; font: normal 1em sans-serif; color: snow; background: rgba(255,255,255,.25); backdrop-filter: blur(2px); overflow: hidden; box-shadow: 1px 2px 2px #000; text-shadow: 1px 1px 1px #000; z-index: 100; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
</style>
<div class="papa">
<div class="playbox">
<p id="geci" style="font-size: 1.2em">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="http://music.163.com/song/media/outer/url?id=28188413.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
//http://www.kumeiwp.com/sub/filestores/2022/03/18/d26fbbe8322cb47f75eb0bb014931efc.mp3
let slider = document.querySelector('#slider'),
aud = document.querySelector('#aud'),
per = document.querySelector('#per'),
btnplay = document.querySelector('#btnplay'),
geci = document.querySelector('#geci');
let slip = 0.3;
let lrcAr = [
['1.59','女人们的咖啡'],
['3.50','作词 : 姚谦'],
['7.18','作曲 : 陈孟奇'],
['19.02','一壶成套式两人分的咖啡呀'],
['24.18','一屋子芬芳气息'],
['27.44','两个女人见到'],
['29.65','话题永远不停'],
['36.28','哦 关于男人'],
['37.98','关于女人和自己'],
['41.67','整个世界都要整理'],
['44.98','有时候只有跟你说才有头绪'],
['53.11','男人总不懂女人眼泪真实的意义'],
['57.39','女人猜不透男人忽然沉默的背景'],
['61.71','有时候爱情 不如和你喝咖啡有趣'],
['70.98','过去的事情想早点忘记却爱回忆'],
['74.77','下一段恋曲却又怕再伤心'],
['79.20','我们总聊聊 互相的安慰 彼此打气'],
['88.65','信用卡可以买到一季的流行'],
['94.03','却买不到真实自己'],
['97.09','只有听你说的分析 深入我心'],
['105.39','就算是小小的竞争或是在斗气'],
['111.66','这一切都不是问题'],
['114.85','用一杯咖啡的时间都能搞定'],
['123.29','男人总不懂女人眼泪真实的意义'],
['127.18','女人猜不透男人忽然沉默的背景'],
['131.76','有时候爱情 不如和你喝咖啡有趣'],
['140.80','过去的事情想早点忘记却爱回忆'],
['144.43','下一段恋曲却又怕再伤心'],
['149.08','我们总聊聊 互相的安慰 彼此打气'],
['159.51','下次见面 拿杯咖啡'],
['161.45','时间地点 先定'],
['168.19','下次见面 那些事情'],
['170.55','没话说 我听你'],
['193.20','男人总不懂女人眼泪真实的意义'],
['197.30','女人猜不透男人忽然沉默的背景'],
['201.65','有时候爱情 不如和你喝咖啡有趣'],
['210.36','男人总不懂女人眼泪真实的意义'],
['214.44','女人猜不透男人忽然沉默的背景'],
['218.72','有时候爱情 不如和你喝咖啡有趣'],
['228.08','过去的事情想早点忘记却爱回忆'],
['231.75','下一段恋曲却又怕再伤心'],
['236.55','我们总聊聊 互相的安慰 彼此打气'],
];
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-6-25 21:47
清舟，没有同步呢？
是啊，找了个转换的还不如自己做的准确了，一会来重做歌词了 绿叶清舟 发表于 2022-6-25 21:49
是啊，找了个转换的还不如自己做的准确了，一会来重做歌词了
老黑的最新版可以纠正的。 加林森 发表于 2022-6-25 21:49
还要调整。
是啊，改过来了 加林森 发表于 2022-6-25 21:51
老黑的最新版可以纠正的。
偷懒了找了个lrc的歌词直接转换了，没去测试，也没想到这么不靠谱的 现在对了。 很优雅的女人咖啡，欣赏清舟漂亮的制作{:4_187:} 加林森 发表于 2022-6-25 22:04
现在对了。
还是得自己做了，不能用转换的 绿叶清舟 发表于 2022-6-25 22:01
偷懒了找了个lrc的歌词直接转换了，没去测试，也没想到这么不靠谱的
你厉害啊。{:4_189:} 绿叶清舟 发表于 2022-6-25 22:07
还是得自己做了，不能用转换的
没关系的，慢慢学点还是挺快乐的。 加林森 发表于 2022-6-25 22:10
没关系的，慢慢学点还是挺快乐的。
是啊，不能偷懒的了 绿叶清舟 发表于 2022-6-25 22:22
是啊，不能偷懒的了
嗯嗯。我原来不懂这些的，现在有点懂了。 加林森 发表于 2022-6-25 22:41
嗯嗯。我原来不懂这些的，现在有点懂了。
你现在已经很厉害了 绿叶清舟 发表于 2022-6-26 10:46
你现在已经很厉害了
只能说是入门了。 加林森 发表于 2022-6-26 11:03
只能说是入门了。
咱还在门外张望着呢{:4_189:} 绿叶清舟 发表于 2022-6-26 11:05
咱还在门外张望着呢
谦虚容易长胖的。。。{:4_189:} 加林森 发表于 2022-6-26 11:22
谦虚容易长胖的。。。
还好，还能再胖一点点了{:4_189:} 绿叶清舟 发表于 2022-6-26 12:30
还好，还能再胖一点点了
哈哈。那就好。我又制作了一个出来，你帮着看看。
页:
[1]
2