大风吹倒梧桐树(DJ 默涵版)-侯泽润
本帖最后由 亚伦影音工作室 于 2024-1-6 23:11 编辑 <br /><br /><style>#papa {margin: 150px -150px;
width: 1164px;
height: 640px;
background:url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/a56f7f6065983b88da4f88456513ad62.png?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080')no-repeat center / cover;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;overflow: hidden;
z-index: 12345;
}
#vid { position: absolute; width: 55%; height: 55%; top:2%; left:23%;object-fit: cover; pointer-events: none;opacity: 1;z-index: 1; transition: 0.1s all ease;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 4px #880000;}
#dt{position: absolute;top:60%; left:30%;width: 40%;height: 40%;z-index:-1;}
#dt1{position: absolute;top:60%; left:73%;width: 5%;height: 40%;z-index:-1;}
#dt2{position: absolute;top:60%; left:22%;width: 5%;height: 40%;z-index:-1;transform: rotateY(180deg);}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#mplayer {z-index: 80;
position: absolute;
top:87.5%; left:52.3%;
bottom: 5px;
width: 18px;
height: 18px;background:#cccccc;
border: 2px solid #000000;
border-radius: 50%;
opacity: 1;
transition: .7s;
display: grid;
place-items: center;
--disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: #000000;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 5px;
border-width: 5px 8px;
border-color: transparent transparent transparent #000000;
opacity: var(--disp1);
}
#mplayer::after {
width: 1px;
height: 10px;
border-width: 0 2px 0 2px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
font: normal 15px sans-serif;
color: #ffffff;
top:61%;
left:45%;}
#prog {position: absolute;z-index: 91;
width: 11%;
height: 1.2%;
cursor: pointer;
top:96%;
box-shadow: 0px 0px 1px 1px #ffffff;
left:44.5%;
border-radius: 3px;}
#wzsd1 { animation: wzsd 0.56s linear infinite ;}
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
#musickrc{width:50%;line-height:25px;position: absolute;position: absolute;left:25%;top:42%;z-index: 11;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);}
#musickrc span {display:block;text-align:center; }
</style>
<div id="papa">
<div id="dt"><img id="Img" src="https://files.superbed.cn/images/65960c24871b83018a18c921.gif" width="100%" height="100%"></div>
<div id="dt1"><img id="Img1" src="https://pic.imgdb.cn/item/65960c33871b83018a18e31b.gif" width="100%" height="100%"></div>
<div id="dt2"><img id="Img2" src="https://pic.imgdb.cn/item/65960c33871b83018a18e31b.gif" width="100%" height="100%"></div>
<video id="vid"src="http://chuangshicdn.data.mvbox.cn/music/yc/24/01/06/24010605451980202947.mp4" muted autoplay loop></video>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer"></div>
<divid="musickrc" >
<p id="musickrc01"style="color:#880000; text-align:left;font-weight: ;font-family:隶书;font-size: 25px;" ></P>
<P id="musickrc02"style="color:#000080;text-align:right;font-weight: ;font-family:隶书;font-size: 25px;"></P>
</div>
<div id="testImg"><div id="bt"><div id="klok">大风吹倒梧桐树(DJ 默涵版)-侯泽润</div></di></di>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music316645920.mp3" loop autoplay></audio>
<script >
var songkrc =`大风吹倒梧桐树(DJ 默涵版)-侯泽润
词：筱毅
曲：筱毅
编曲：DJ 默涵
混音：DJ 默涵
我们都尝尽了生活的苦
我不甘耗尽半生没有退路
就算低下头也绝不服输
强忍着泪我也不敢再哭
我们都尝尽了生活的苦
为了出人头地不怕艰苦
想要以后更好的生活
不被束缚
大风吹倒那棵梧桐树
没钱难买通天路
在我最难的时候
没能把你留住
在我熬过那些愁与苦
谁能比我更清楚
以后走了更宽的路
也要挺住
我们都尝尽了生活的苦
我不甘耗尽半生没有退路
就算低下头也绝不服输
强忍着泪我也不敢再哭
我们都尝尽了生活的苦
为了出人头地不怕艰苦
想要以后更好的生活
不被束缚
在我熬过那些愁与苦
谁能比我更清楚
以后走了更宽的路
也要挺住
我们都尝尽了生活的苦
我不甘耗尽半生没有退路
就算低下头也绝不服输
强忍着泪我也不敢再哭
我们都尝尽了生活的苦
为了出人头地不怕艰苦
想要以后更好的生活
不被束缚
我们都尝尽了生活的苦
我不甘耗尽半生没有退路
就算低下头也绝不服输
强忍着泪我也不敢再哭
我们都尝尽了生活的苦
为了出人头地不怕艰苦
想要以后更好的生活
不被束缚
`;
function parseLyric(text) { var lines = text.split(/\r|\n|\r\n/),pattern = /\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g,result = []; while (!pattern.test(lines)) {lines = lines.slice(1); }; lines.length === 0 && lines.pop(); lines.forEach(function(v,i,a) { var time = v.match(pattern), value = v.replace(pattern,''); time.forEach(function(v1,i1,a1){ var t = v1.slice(1, -1).split(/:/); result.push(,10) * 60 + parseFloat(t), value]); }); }); result.sort(function(a, b){ return a - b;}); return result;}
var my_audio =document.getElementById("aud");var lyric = parseLyric(songkrc); my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric){ document.getElementById("musickrc01").innerHTML = lyric; if(i+1==lyric.length){ document.getElementById("musickrc01").innerHTML = ""; }else{ document.getElementById("musickrc02").innerHTML = lyric;};};};}; my_audio.play();
/*暂停 播放按钮*/
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
/*结束*/
/*进度条 进度时间*/
prog.onclick = (e) => {
aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
}
aud.addEventListener('timeupdate', () => {
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, #00ff00, #00ff00, #00ff00 ' + aud.currentTime / aud.duration * 100 + '%, #111111 0)';});
tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
});
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;
};
/*结束*/
/*控制歌词颜色*/
klok.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => klok.style.animationPlayState = 'running');
aud.addEventListener('pause', () => klok.style.animationPlayState = 'paused');
/*结束*/
/*控制文字颜色*/
dt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => dt.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>dt.style.animationPlayState = 'paused');
/*结束*/
</script>
<style>
#bt{ width: 15%; height: 50px;color: #00ff00; position: absolute; left:23%;top:1%;font-size: 18px; font-family:隶书;z-index: 21; animation: wz 20s linear infinite ; }
.stop #bt{animation-play-state: paused;}
@keyframes wz {
50% {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(100%); left: 50%;}
}
#klok{width: 560px; height: 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color:#880000;
background-image:linear-gradient(50deg, #ff0000 40%, #00ff80 50%, #fff000 10%, #000078 60%);
background-repeat:no-repeat;
line-height:35px;background-position: 0px 0;
-webkit-animation:loop 1slinearinfinite ;}
@-webkit-keyframes loop{
50%{background-position: -300px 0;filter:hue-rotate(0deg)contrast(120%)brightness(150%);}
}
</style>
<script>
/*控制动画*/
(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
/*结束*/
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
// 透明度还原
image.style.opacity = '';image1.style.opacity = '';image2.style.opacity = '';
}
if (this.storeUrl) {
this.src = this.storeUrl;
}
};
HTMLImageElement.prototype.stop = function() {
var canvas = document.createElement('canvas');
// 尺寸
var width = this.width, height = this.height;
if (width && height) {
// 存储之前的地址
if (!this.storeUrl) {
this.storeUrl = this.src;
}
// canvas大小
canvas.width = width;
canvas.height = height;
// 绘制图片帧（第一帧）
canvas.getContext('2d').drawImage(this, 0, 0, width, height);
// 重置当前图片
try {
this.src = canvas.toDataURL("image/gif");
} catch(e) {
// 跨域
this.removeAttribute('src');
// 载入canvas元素
canvas.style.position = 'absolute';
// 前面插入图片
this.parentElement.insertBefore(canvas, this);
// 隐藏原图
this.style.opacity = '0';
// 存储canvas
this.storeCanvas = canvas;
}
}
};
}
vid=document.querySelector('#vid');
var image= document.getElementById("Img");
var image1= document.getElementById("Img1");
var image2= document.getElementById("Img2");
mplayer.onclick =function() { aud.paused ? (image.stop(),vid.pause(),image1.stop(),image2.stop()):(image.play(),vid.play(),image1.play(),image2.play())};
</script>
这个完美可以一键停止{:5_150:}
页:
[1]