月圆花好（致梦油先生）
本帖最后由 马黑黑 于 2022-6-20 22:19 编辑 <br /><br /><style type="text/css">.mama { left: -214px; width: 1024px; height: 560px; background: #eee; overflow: hidden; box-shadow: 0 4px 30px #000; position: relative; }
.player { position: absolute; bottom: 10px; right: 10px; padding: 12px; cursor: pointer; }
.vid { position: absolute; top: -55px; width: 1024px; height: 615px; object-fit: cover; }
#lrcMsg { font: bold 1.5em / 2em sans-serif; display: block; color: #eee; text-shadow: 1px 1px 2px #000; animation: fade 1s infinite; }
#meter { width: 100px; cursor: pointer; }
@keyframes fade { to { opacity: .6; } }
</style>
<div class="mama">
<video class="vid" src="https://img.tukuppt.com/video_show/2422006/00/02/12/5b519a8074c45.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div class="player">
<span id="lrcMsg"> > Loading ...</span>
<meter id="meter" min="0" max="100" low="33" high="66" optimum = "70" value="0"></meter>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=25721169.mp3" autoplay="autoplay" loop="loop"></audio>
<script language="javascript">
let lrcMsg = document.querySelector('#lrcMsg'),
player = document.querySelector('.player');
aud = document.querySelector('#aud'),
meter = document.querySelector('#meter');
let slip = 0.3, lrcKey = 0;
let lrcAr = [
['0.03','月圆花好 - 谢采妘'],
['1.59','词:严华浮'],
['2.50','曲:范烟桥'],
['16.95','浮云散 明月照人来'],
['25.19','团圆美满今朝醉'],
['33.31','清浅池塘 鸳鸯戏水'],
['41.74','红裳翠盖 并蒂莲开'],
['49.90','双双对对 恩恩爱爱'],
['57.98','这清风儿向着好花儿吹'],
['66.23','柔情蜜意满人间'],
['92.88','浮云散 明月照人来'],
['101.16','团圆美满今朝醉'],
['109.35','清浅池塘 鸳鸯戏水'],
['117.64','红裳翠盖 并蒂莲开'],
['125.79','双双对对 恩恩爱爱'],
['134.02','这清风儿向着好花儿吹'],
['142.19','柔情蜜意满人间'],
['160.90','双双对对 恩恩爱爱'],
['168.90','这清风儿向着好花儿吹'],
['177.15','柔情蜜意满人间']
];
aud.addEventListener('timeupdate',() => playMsg());
aud.addEventListener('ended',() => lrcKey = 0);
aud.addEventListener('playing',() => lrcMsg.style.animationPlayState = 'paused');
player.onclick = () => aud.paused ? (aud.play(), lrcMsg.style.animationPlayState = 'paused') : (aud.pause(), lrcMsg.style.animationPlayState = 'running');
let playMsg = () => {
let ct = aud.currentTime, du = aud.duration, prog;
lrcMsg.innerHTML = lrcAr;
for(k = 0; k<lrcAr.length; k ++) {
if(ct >= lrcAr - slip) {
lrcKey = k;
continue;
}
}
meter.value = 100 * ct / du;
}
</script> 歌词是从未网上要的，不太准，看样子还是得自己制作 四个字，好看，好听。{:4_178:} 这月色漂亮了 浮云散明月来，如此美好的花好月圆的美景。欣赏黑黑好帖，梦油收礼开心@梦油{:4_187:} 这个背景特别美，月色美，和谢采妘的甜美声线好相配{:4_199:} 马黑黑 发表于 2022-6-20 20:47
歌词是从未网上要的，不太准，看样子还是得自己制作
这么多年来我是从来不用网上的，所有的歌词同步都是自己编辑的 小辣椒 发表于 2022-6-20 21:50
这么多年来我是从来不用网上的，所有的歌词同步都是自己编辑的
嗯，你说过的 醉美水芙蓉 发表于 2022-6-20 20:51
@马黑黑老师 柔情蜜意满人间有点慢了半拍！
是的，做完我也没校对，就大致看了一下，估算误差值，我已经在帖子里减去5秒了{:5_106:} 小辣椒 发表于 2022-6-20 21:49
这个背景特别美，月色美，和谢采妘的甜美声线好相配
还行 樵歌 发表于 2022-6-20 21:04
四个字，好看，好听。
还可以的吧 绿叶清舟 发表于 2022-6-20 21:12
这月色漂亮了
还不错的 红影 发表于 2022-6-20 21:35
浮云散明月来，如此美好的花好月圆的美景。欣赏黑黑好帖，梦油收礼开心@梦油
还差朵花{:5_117:} 海上升明月，天涯共此时。。。。{:5_116:} 梦老兄收礼开森！ 加林森 发表于 2022-6-20 22:52
梦老兄收礼开森！
一同开森 马黑黑 发表于 2022-6-20 23:11
一同开森
必要的哦。 马黑黑 发表于 2022-6-20 22:07
还差朵花
花在梦油心里{:4_189:}