情歌虽老却动听 (DJ何鹏版)
本帖最后由 醉美水芙蓉 于 2022-6-24 22:42 编辑 <br /><br /><style>/* 帖子外层 */
.outer {
left: -214px;top:30px;
width: 1024px; /* 帖子宽度 */
height: 600px; /* 帖子高度 */
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; background: lightblue url('https://img-baofun.zhhainiao.com/fs/38178645c4419b8242e7e6bdcc1b7e40.jpg') no-repeat center / cover;text-align: center;
position: relative; /* 重要 帖子定位依赖 */
}
.vid { position: absolute; width: 100%; height: 600px; left: 0px;top:0px; object-fit: cover; opacity: .65;z-index: 20;}
/* 歌词同步显示框 */
.lrcbox {width: 960px;
transform: translate(20px, 480px); /* 定位 */
font: bold 2em sans-serif; /* 文本 */
color: #ff0000; /* 字体颜色 */
-webkit-text-stroke:1px #ffffff;
font-family:华文新魏;
cursor: pointer; /* 手型指针 */
position: absolute; /* 关键 歌词显示框依赖于此 */
z-index: 30;
}
</style>
<div class="outer">
<div class="lrcbox">
<p id="geci" style="padding: 0;margin: 4px 0px">正在缓冲 ...</p>
<meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="80"style="width: 550px; height: 10px;padding: 0;margin: 20px -220px;"></meter>
</div>
<video class="vid" src="https://img-baofun.zhhainiao.com/fs/scene/preview_video/8e915a6eb0d52897214b7dad19ed049e_preview.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
</div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=143964586&.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
//盒子句柄
let lrcbox = document.querySelector('.lrcbox'),
geci = document.querySelector('#geci'),
aud = document.querySelector('#aud'),
meter = document.querySelector('#meter');
let prog = (tt, cc) => 100 * cc / tt;//计算播放进度
//歌词数组
let lrcAr =[
['0.33','花姐 - 情歌虽老却动听 (DJ何鹏版)'],
['1.62','作词：任帅兵'],
['1.85','作曲：任帅兵'],
['2.08','编曲：黄楚权'],
['2.31','制作人：李九鸣'],
['2.61','监制：张加'],
['2.84','吉他：路野、张怀元'],
['3.21','和声：姚斯婷'],
['3.44','设计：温德飞'],
['3.67','录音助理：朱合理@101studio'],
['7.38','录音：张加@101studio'],
['7.61','混音：张加@101studio'],
['7.84','OP：919 Music Group Co.,Ltd'],
['15.28','LRC编辑：醉美水芙蓉'],
['20.74','不怪风雨淋湿我的心'],
['25.21','不怪岁月蹉跎你的情'],
['29.91','纷纷扰扰走过的一程'],
['34.38','多少恩怨都已化成风'],
['39.01','如今我们早已经不同'],
['43.56','还有什么爱值得歌颂'],
['48.11','那些华灯初上的霓虹'],
['52.43','还会不会有你的笑容'],
['57.21','情歌虽老却动听'],
['59.56','唱的是爱的声音'],
['61.83','唱的是我的真心'],
['64.11','唱的是你的无情'],
['66.38','情歌虽老却动听'],
['68.65','那些爱刻骨铭心'],
['70.93','点点滴滴的曾经'],
['73.13','已深深烙在我心中'],
['89.47','如今我们早已经不同'],
['93.79','还有什么爱值得歌颂'],
['98.34','那些华灯初上的霓虹'],
['102.97','还会不会有你的笑容'],
['107.52','情歌虽老却动听'],
['109.80','唱的是爱的声音'],
['112.07','唱的是我的真心'],
['114.42','唱的是你的无情'],
['116.70','情歌虽老却动听'],
['118.90','那些爱刻骨铭心'],
['121.25','点点滴滴的曾经'],
['123.52','已深深烙在我心中'],
['128.30','情歌虽老却动听'],
['130.27','唱的是爱的声音'],
['132.54','唱的是我的真心'],
['134.89','唱的是你的无情'],
['137.17','情歌虽老却动听'],
['139.52','那些爱刻骨铭心'],
['141.79','点点滴滴的曾经'],
['144.07','已深深烙在我心中'],
['150.28','谢谢欣赏！']
];
//歌词框单击事件
lrcbox.onclick = () => aud.paused ? aud.play() : aud.pause();
//audio进度监听事件
aud.addEventListener('timeupdate', () => {
meter.value = prog(aud.duration, aud.currentTime);
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr){
geci.innerHTML = lrcAr;
}
}
})
</script>
简洁大气，菇凉正点 这个漂亮，画面和视频以及歌词同步都做得极好，水芙蓉真棒{:4_199:} 如梦似幻，太美了{:4_187:} 马黑黑 发表于 2022-6-25 07:56
简洁大气，菇凉正点
黑黑老师下午好！ 红影 发表于 2022-6-25 08:21
这个漂亮，画面和视频以及歌词同步都做得极好，水芙蓉真棒
红影美女下午好！ 醉美水芙蓉 发表于 2022-6-25 11:36
黑黑老师下午好！
中午好没到呢，你都提前预祝我了。O(∩_∩)O谢谢 手机一直在缓冲中。。。。。 小辣椒 发表于 2022-6-25 11:58
手机一直在缓冲中。。。。。
辣椒美女下午好！ 醉美水芙蓉 发表于 2022-6-25 17:00
辣椒美女下午好！
水芙蓉好，怎么手机一直在缓冲。。。。听不到音乐 小辣椒 发表于 2022-6-25 17:06
水芙蓉好，怎么手机一直在缓冲。。。。听不到音乐
这个带视频的音画，手机观看效果不怎么好，电脑效果好！ 醉美水芙蓉 发表于 2022-6-25 17:53
这个带视频的音画，手机观看效果不怎么好，电脑效果好！
主要没有音乐出来 醉美水芙蓉 发表于 2022-6-25 11:37
红影美女下午好！
问好水芙蓉{:4_204:}
页:
[1]