《我想和你一起去一个地方》蓝兰

<style>
#papa { 
	position: relative;
	width: 1300pxpx;
	height: 700px;
margin: 40px 0 20px   calc(50% - 670px); 
border-radius: 22px; 
border: thick double  #88abfa;

	overflow:hidden;
       
	background:  url('https://p.cldisk.com/star3/origin/f4696255d8e6d52a727d5c170afcf8f9.png')no-repeat center / cover; 
}

.vid  {
	width: 100%; 
	height: 100%;
	z-index: 1;
	position:absolute;
	top:0%; 
	left:0%;
	object-fit: cover;
	pointer-events: none; 
	opacity: 0;
	animation: round 100s linear infinite;
}       <!--/*背景视频*/
@keyframes round {
	0% {opacity: 0;}
	4% {opacity: 1;}
	10% {opacity: 1;}
	15% {opacity: 0;}
}
.vid:nth-child(1){animation-delay: 90s;}
.vid:nth-child(2){animation-delay: 80s;}
.vid:nth-child(3){animation-delay: 70s;}
.vid:nth-child(4) {animation-delay: 60s;}
.vid:nth-child(5) {animation-delay: 50s;}
.vid:nth-child(6){animation-delay: 40s;}
.vid:nth-child(7){animation-delay: 30s;}
.vid:nth-child(8){animation-delay: 20s;}
.vid:nth-child(9) {animation-delay: 10s;}
.vid:nth-child(10) {animation-delay: 0s;}
.stop .vid:nth-child(1), 
.stop .vid:nth-child(2), 
.stop .vid:nth-child(3), 
.stop .vid:nth-child(4), 
.stop .vid:nth-child(5),
.stop .vid:nth-child(6), 
.stop .vid:nth-child(7), 
.stop .vid:nth-child(8), 
.stop .vid:nth-child(9), 
.stop .vid:nth-child(10),
          <!--/*背景视频*/








#mb{
	width: 100%; 
	height: 100%;
	z-index: 1; 
	position:absolute;
	background: linear-gradient(180deg, rgba(0,0,0,0.008368313145570738) 74%, rgba(0,0,0,0.557387920988708) 93%);
	top:0%; 
	left:0%;
	opacity:1;
}

#mboard {  
	width:100%;
	height:200px;
	display: flex; 
	justify-content: center; 
	align-items:center;
	gap: 8px; 
	position: absolute; 
	bottom: -60px;
	right: 20px; 
	z-index: 3;
	opacity:1;
	z-index: 10; 
}

#papa:hover #mboard{opacity:1;bottom: -60px;}
#papa:hover #mb{opacity:1;top:0%;}

#mboard img { width: 26px; cursor: pointer; filter:invert(100%)hue-rotate(180deg);}
#tMsg1, #tMsg2 { width: 45px; font-size: 16px; text-align: center;color: #eee; }

#volwrap { 
	position: absolute; 
	width: 100px; 
	height: 80px;  
	place-items: center;  
	border-radius: 20px;
	transform:rotate(-90deg);
	right: -14px;
	bottom: 130px;
}

input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	outline: 0;
	background-color: transparent;
	width: 100%;
}

input[type="range"]::-webkit-slider-runnable-track {
	height: 3px;
	border-radius: 20px;
	background: #eee;
}

input[type="range" i]::-webkit-slider-container {
	height: 18px;
	border-radius: 30px;
	overflow: hidden;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background:  #039C09;
	border: 1px solid transparent;
	margin-top: -4px;
	border-image: linear-gradient( #039C09, #039C09) 0 fill / 5 10 5 0 / 0px 0px 0 2000px;
}

#volwrap:hover #volume { opacity:1;}
#btnMute:hover ~ #volwrap > #volume {opacity:1; }
#volume { 
	position: absolute; 
	width: 100px; 
	height: 2px;
	opacity:0;  
}

#prog { 
	--track:#eee; 
	--prog:  #ff0000 ; 
	--prg: 0%; 
	width: 77%; 
	height: 5px; 
	cursor: pointer; 
	background: linear-gradient(to right, var(--prog) var(--prg), var(--track) 0) no-repeat 0% 50%/100% 4px; 
	border-radius: 20px;
	align-items: center;
}

#loopbnt{   z-index: 91;
	position:absolute;
	width: 25px;
	height: 20px;
	bottom: 92px;
	border-radius: 0px;
	right:1%;
	filter:invert(0%)hue-rotate(180deg);
	cursor: pointer;
}

#fullscreen { 
	opacity:1;
	position: absolute; 
	width: 25px; 
	height: 25px;  
	top:5%; 
	cursor: pointer;
	right: 25px;
	z-index: 40;
	filter:invert(0%)hue-rotate(180deg);
}

#papa:hover #fullscreen { opacity:1;}

#全屏{ 
	width: 25px; 
	height: 25px; 
	position: absolute;
	background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}

#退出{ 
	width: 25px; 
	height: 25px; 
	position: absolute;
	opacity: 0;
	background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; 
}

#lrc {
	--state: paused;
	--motion: cover2;
	--tt: 1s;
	--bg: linear-gradient(40deg, #fa4354, #fa4354, #7718f8, #18f5f8, #f5f818, #b75004);
	position: absolute;
	z-index: 16;
	left: 50%; 
	top: 86%;
	transform: translate(-50%);
	font:300 2.0em/1em 华文楷体; 
	color: transparent;
	white-space: pre;
	-webkit-background-clip: text;
	filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px  0);
}

#lrc::before {
	position: absolute;
	content: attr(data-lrc);
	width: 100%; 
	height: 100%;
	color: transparent;
	overflow: hidden;
	white-space: pre;
	background: var(--bg);
	clip-path: inset(0 100% 0 0);
	-webkit-background-clip: text;
	animation: var(--motion) var(--tt) linear forwards;
	animation-play-state: var(--state);
}     <!-- /*歌词*/

@keyframes cover1{ to { clip-path: inset(0 0 0 0); transform: scale(2.0) } }
@keyframes cover2 { to { clip-path: inset(0 0 0 0);transform: scale(2.0) } }
</style>

<div id="papa">

<div id="testImg">
<video class="vid" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1370612809.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1355219061.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/68/10/V-681019-541C9333.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/68/48/V-684880-802FACCC.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/vcg/video/preview/00/00/68/93/51miz_V689333_NWML4eozl.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/69/03/V-690329-7FEFB5E8.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/15/18/V-151809-637CF87A.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/65/86/V-658610-3FC7FB1B.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/69/18/V-691883-5EDA4792.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/68/65/V-686535-A8B3513E.mp4" loop muted autoplay=""></video>  

  

</div>    
<div id="mb"> </div> 
<div id="mboard">
        <img id="btnPlay" src="https://638183.freep.cn/638183/web/icon/play.svg" title="播放/暂停(Alt+X)" alt="" />
        <span id="tMsg1">00:00</span>
        <span id="prog"></span>
        <span id="tMsg2">00:00</span>
        <img id="btnMute" src="https://638183.freep.cn/638183/web/icon/unmuted.svg" title="静音 (Alt+J)" alt="" />
        <div id="volwrap"><input id="volume" type="range" min="0" max="1" step="0.1" value="0.8" /></div>
  <img src="https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png"id="loopbnt" onClick="pmc()" title="开启循环/关闭循环" /> </div>    
  
  <div data-lrc="" id="lrc" ></div>
<div id="" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w8/audio/ee/06/fb/44e21f09a8023475057870d345d38944/audio.mp3" autoplay ></audio>
 
<script>
        
var lastVolume = 1, muted = false;
 
var imgAr = [
        'https://638183.freep.cn/638183/web/icon/play.svg',
        'https://638183.freep.cn/638183/web/icon/pause.svg',
        'https://638183.freep.cn/638183/web/icon/unmuted.svg',
        'https://638183.freep.cn/638183/web/icon/muted.svg',
];
 
var setVolume = (val) => Math.min(1, Math.max(0, val));
 
var setMute = () => {
        if(lastVolume === 0) return;
        muted = !muted;
        muted ? (aud.volume = 0, btnMute.src = imgAr[3]) : (aud.volume = lastVolume, btnMute.src = imgAr[2]);
};
 
var s2m = (seconds) => {
    const secs = Math.floor(seconds || 0);
    return `${String(secs/60|0).padStart(2,'0')}:${String(secs%60).padStart(2,'0')}`;
};
 
var mState = () => {
        btnPlay.src = aud.paused ? imgAr[0] : imgAr[1];
        btnPlay.title = (aud.paused ? '播放' : '暂停') + ' (Alt+X)';
};
 
document.addEventListener('keydown', e => {
        if(!e.altKey) return;
        switch (e.keyCode) {
                case 88:
                        btnPlay.click();
                        break;
                case 74:
                        setMute();
                        break;
                case 187: case 107:
                        aud.volume = setVolume(aud.volume + 0.1);
                        lastVolume = aud.volume;
                        break;
                case 189: case 109:
                        aud.volume = setVolume(aud.volume - 0.1);
                        lastVolume = aud.volume;
                        break;
                default:
                        return;
        }
});
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
        prog.style.setProperty('--prg', aud.currentTime/aud.duration*100 +'%');
        tMsg1.innerText = s2m(aud.currentTime);
        tMsg2.innerText = s2m(aud.duration);
};
 
aud.onvolumechange = () => {
        btnMute.src = aud.volume === 0 ? imgAr[3] : imgAr[2];
        volume.value = aud.volume;
}
 function pmc() {
var img = document.getElementById("loopbnt");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png") {aud.loop =true;aud.play();
img.src = "https://pic1.imgdb.cn/item/67b33ba9d0e0a243d4004d10.png";
} else {aud.loop =false;
img.src = "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png";}
}
btnPlay.onclick = () => aud.paused ? aud.play():aud.pause();
btnMute.onclick = () => setMute();
volume.onchange = () => aud.volume = lastVolume = volume.value;
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
prog.onmousemove = (e) => prog.title = s2m(e.offsetX * aud.duration / prog.offsetWidth);
volwrap.onmouseover = () => volwrap.title = '音量 : ' + volume.value + ' (Alt++/-)'
 
let fs= true;
fullscreen.onclick = () => {
        fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
        fs = !fs;
}
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `[00:00.00]《我想和你一起去一个地方》
[00:03.00]词曲 : 王冲
[00:05.00]演唱 : 蓝兰
[00:07.00]LRC编辑：亦是金
[00:09.00]● ● ● ● ● ●
[00:10.79]我想和你一起去一个地方	
[00:19.39]一个地图上都没有的村庄	
[00:28.72]我弹着吉他为你歌唱	
[00:37.23]你坐在身旁为我鼓掌	
[00:45.20]那里有一个不大的房	
[00:53.88]那里有一个我喜欢的床	
[01:02.53]那里有一个不灭的月亮	
[01:11.35]那里有一个你微笑的脸庞
[01:19.85]● ● ● ● ● ●	
[01:55.37]我想和你一起去一个地方	
[02:03.59]逃离这城市的灯火辉煌	
[02:13.19]我为你穿上美丽的衣裳	
[02:21.95]你坐在身旁为我梳妆	
[02:29.86]那里有一个不大的房	
[02:38.56]那里有一个我喜欢的床	
[02:47.29]那里有一个不灭的月亮	
[02:55.95]那里有一个你微笑的脸庞	
[03:04.70]那里有一个	
[03:09.17]火热的胸膛	
[03:13.32]那里有一个	
[03:17.80]爱我的心脏	
[03:22.15]那里有一个	
[03:26.45]能依靠的肩膀	
[03:30.79]那里有一个你幸福的模样	
[03:40.15]
[03:44.10]-- 谢谢欣赏 --
[04:01.10]
`;
/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
	let tmpAr = [];
	for(j = 0; j <ar.length - 1; j ++) {
		if(j !== ar.length - 1) tmpAr[j] = parseFloat((ar[j+1][0] - ar[j][0]).toFixed(1));
	}
	let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
	tmpAr.push(aver);
	tmpAr.forEach((item,key) => {
		ar[key][2] = item > aver ? aver : item;
	});
	return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
	let lrcAr = [];
	let calcRule = [60,1,0.001];
	for(x of text.split('\n')) {
		let ar = [];
		let re = /\d+[\.:]\d+([\.:]\d+)?/g;
		let geci = x.replace(re,'');
		if(geci) {
			geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
			let time = x.match(re);
			if(time != null) {
				for(y of time) {
					let tmp = y.match(/\d+/g);
					let sec = 0;
					for(z in tmp) sec += tmp[z] * calcRule[z];
					ar[0] = [parseFloat(sec.toFixed(2)), geci];
					lrcAr.push(ar[0]); 
				}
			}
		}
	}
	lrcAr.sort((a,b)=> a[0] - b[0]);
	return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
	let name = mFlag ? 'cover1' : 'cover2';
	lrc.innerHTML = lrcAr[mKey][1];
	lrc.dataset.lrc = lrcAr[mKey][1];
	lrc.style.setProperty('--motion', name);
	lrc.style.setProperty('--tt', time + 's');
	lrc.style.setProperty('--state', 'running');
	mKey += 1;
	mFlag = !mFlag;
};

/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
	for (j = 0; j < lrcAr.length; j++) {
		if (aud.currentTime <= lrcAr[j][0]) {
			mKey = j - 1;
			break;
		}
	}
	if (mKey < 0) mKey = 0;
	if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
	let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);
	showLrc(time);
};

/*格式化时间信息*/
let toMin = (val) => {
	if (!val) return '00:00';
	val = Math.floor(val);
	let min = parseInt(val / 60),
	sec = parseFloat(val % 60);
	if (min < 10) min = '0' + min;
	if (sec < 10) sec = '0' + sec;
	return min + ':' + sec;
}

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused')) : (lrc.style.setProperty('--state','running'));

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
	for (j = 0; j < lrcAr.length; j++) {
		if (aud.currentTime >= lrcAr[j][0]) {
			cKey = j;
			if (mKey === j) showLrc(lrcAr[j][2]);
			else continue;
		}
	}
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>
<script>
(function() {var image = document.getElementById("testImg");
        const vids = document.querySelectorAll('.vid');
        var mState = () => {
         vids.forEach(vid => aud.paused ? (vid.pause(),image.classList.add('stop') ): (vid.play(),image.classList.remove('stop')) );
        };
aud.onplaying = aud.onpause = () => mState();
 })();

aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>

</td></tr></table>



<DIV style="HEIGHT: 50px">