红唇【先试试】
本帖最后由 亚伦影音工作室 于 2022-6-25 11:38 编辑 <br /><br /><style>/* 帖子外层 */
.outer {
left: -114px;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 3.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/pcwallpaper_ugc/scene/f99dfbf8ae7c74fa737ea9b427eb7508_preview.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
</div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=152569133&.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.30','王峰、安静 - 红唇 (男女对唱版)'],
['4.67','作词：十二月'],
['6.06','作曲：陈伟'],
['7.20','编曲：孙侠'],
['8.48','录音：王小雨'],
['9.99','混音：小多'],
['11.35','音乐制作人：陈伟'],
['13.53','发行公司：亚伦影音'],
['15.99','出品人：王峰'],
['17.60','演唱：王峰、安静'],
['19.75','LRC编辑：亚伦'],
['27.78','男：'],
['28.69','你用思念涂成一抹红'],
['33.37','女：'],
['34.98','让我跌进胭脂色的梦'],
['41.38','情有多浓'],
['43.57','男：'],
['44.55','心就有多痛'],
['47.26','女：'],
['47.96','最怕这样突然的重逢'],
['52.81','男：'],
['54.29','风把回忆摇落一地红'],
['59.13','女：'],
['60.62','我已不再为谁而心动'],
['67.17','烟花春雨'],
['69.37','男：'],
['70.34','都藏在心中'],
['73.58','那是一生不能说的痛'],
['77.86','女：'],
['78.93','就像秋夜里最后的红枫'],
['84.87','男：'],
['85.62','你用唇印将往事尘封'],
['91.70','红唇微启泪光闪动'],
['96.76','女：'],
['98.27','忘了这场短暂的相逢'],
['104.42','就像记忆里最后的红枫'],
['109.84','男：'],
['111.08','层层叠叠染红了天空'],
['117.31','红尘相送胭脂消融'],
['122.96','合：'],
['123.96','我们从此山水不相逢'],
['152.72','男：'],
['153.39','风把回忆摇落一地红'],
['158.94','女：'],
['159.84','我已不再为谁而心动'],
['166.15','烟花春雨'],
['168.76','男：'],
['169.63','都藏在心中'],
['172.80','那是一生不能说的痛'],
['177.54','女：'],
['178.35','就像秋夜里最后的红枫'],
['183.67','男：'],
['184.61','你用唇印将往事尘封'],
['190.96','红唇微启泪光闪动'],
['196.77','女：'],
['197.57','忘了这场短暂的相逢'],
['203.62','就像记忆里最后的红枫'],
['209.20','男：'],
['210.30','层层叠叠染红了天空'],
['216.47','红尘相送胭脂消融'],
['222.14','合：'],
['223.20','我们从此山水不相逢'],
['228.40','女：'],
['229.49','就像秋夜里最后的红枫'],
['234.66','男：'],
['235.72','你用唇印将往事尘封'],
['242.09','红唇微启泪光闪动'],
['247.77','女：'],
['248.84','忘了这场短暂的相逢'],
['254.85','就像记忆里最后的红枫'],
['260.80','男：'],
['261.63','层层叠叠染红了天空'],
['267.81','红尘相送胭脂消融'],
['273.44','合：'],
['274.38','我们从此山水不相逢']
];
//歌词框单击事件
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>
<div style="height: 320px;"> </div>
这个和水芙蓉一样的效果，手机欣赏一直是正在缓冲。。。。。 欢迎亚伦新朋友，愿你在花潮玩得开心{:4_187:} 很漂亮的制作，给亚伦点赞{:4_187:}
页:
[1]