魏佳艺 - 等春风 (DJ默涵版)
本帖最后由 醉美水芙蓉 于 2024-4-23 22:20 编辑 <br /><br /> <style>#mydiv { margin: 120px20px ; width: 1164px; height: 620px; background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d603e39f5c9c460df7a8734a7ba4f951.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px #333; position: relative; }
#tub{ position: absolute; width: 220px; height: 200px;top: 28px; cursor: pointer; left: 820px; filter:drop-shadow(#000 2px 2px 0)}
#play { position: absolute; width: 210px; height: 50px;top: 552px; cursor: pointer; left: 60px; }
#play img{height: 100%;width: 100%;}
#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%);}}
</style>
<div id="mydiv">
<audio id="aud" src="https://bbs.cnzv.cc/v/a.php/MTczMjg2Mjc2Jmt3bXAz.mp3" ></audio>
<div id="play"> <img id="Img" src="https://pic.imgdb.cn/item/64ee76b5661c6c8e546b61ba.gif" alt="" /></div>
<divclass="lrc" >
<div id="wzsd1"><ul id="ullrc">
</ul>
</div>
</div>
</div>
<script>let autoplayPromise = aud.play();
var canv = document.createElement('canvas');
var ww = canv.width = mydiv.offsetWidth;
var hh = canv.height = mydiv.offsetHeight;
canv.style.cssText = `position: absolute'; left: 0; top: 0; cursor: crosshair`;
mydiv.prepend(canv);
var ctx = canv.getContext('2d');
var balls = [];
var raf = null;
var speed = () => (Math.random() < 0.5 ? -1 : 1) * (Math.random() * 0.5 + 0.5);
var mState = () => {
aud.paused ?
(mydiv.style.setProperty('--state', 'paused'), cancelAnimationFrame(raf)) :
(mydiv.style.setProperty('--state', 'running'), render());
};
var innerCircle = (ex,ey,cx,cy,r) => Math.sqrt((ex - cx) ** 2 + (ey - cy) ** 2) <= r;
var drawBall = (x,y,r,color) => {
ctx.save();
ctx.beginPath();
ctx.fillStyle = color;
ctx.arc(x,y,r,0,2*Math.PI);
ctx.fill();
ctx.restore();
};
var move = (ball) => {
var x = ball.x, y = ball.y, r = ball.r, color = ball.color, spdX = ball.speedX, spdY = ball.speedY;
x += spdX;
y += spdY;
if(x - r < 0 || x + r > ww) spdX = - spdX;
if(y - r < 0 || y + r > hh) spdY = - spdY;
ball.x = x;
ball.y = y;
ball.speedX = spdX;
ball.speedY = spdY;
drawBall(x,y,r,color);
};
var render = () => {
ctx.clearRect(0,0,ww,hh);
for(var j = 0; j < balls.length; j ++) {
for(var k = 0; k < balls.length; k ++) {
var dx = balls.x - balls.x, dy = balls.y - balls.y;
var distance = Math.sqrt(dx * dx + dy * dy);
if(distance < (balls.r + balls.r)) {
balls.speedX = -balls.speedX;
balls.speedY = -balls.speedY;
balls.speedX = -balls.speedX;
balls.speedY = -balls.speedY;
}
}
move(balls);
}
aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(render);
};
var initBalls = (total) => {
for (var j = 0; j < total; j ++) {
var x = Math.random() * (ww - 200) + 50, y = Math.random() * (hh - 100) + 30, r = Math.random() * 4+ 4, color = '#' + Math.random().toString(16).substr(-6), spdx = speed(), spdy = speed();
balls.push({x: x, y: y, r: r, color: color, speedX: spdx, speedY: spdy});
move(balls);
}
};
aud.loop = false;
aud.onplaying = aud.onpause = () => mState();
aud.onseeked = () => cancelAnimationFrame(raf);
aud.onended = () => { cancelAnimationFrame(raf); aud.play(); };
canv.onclick = (e) => {
var x = e.offsetX, y = e.offsetY;
for(var j = 0; j < balls.length; j ++) {
if(innerCircle(x, y, balls.x, balls.y, balls.r)) {
if(balls.r < 20) balls.r += 2;
balls.color = `#${Math.random().toString(16).substr(-6)}`;
}
}
};
initBalls(40);
</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 = '';
}
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;
}
}
};
}
var image= document.getElementById("Img");
play.onclick = () => aud.paused ? (aud.play(),image.play()): (aud.pause(),image.stop());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
/*控制歌词闪动*/
wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => wzsd1.style.animationPlayState = 'paused');
</script>
<style type="text/css">
.lrc{z-index: 20;
width: 60%;
height: 120px;
overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
display: block;position: absolute;top:68%; left:25%;z-index: 5;
margin: 0 auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
height: 70px;
line-height: 60px;
font-family:华文隶书;
font-size: 0px;
color: #000078;
font-weight: normal;
transition: .3s all ease;
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 40px;
color: #ff0000;
text-align: center;
}
</style>
<script >
var lrc =`魏佳艺 - 等春风 (DJ默涵版)
作词：师立宅
作曲：关剑
编曲：DJ默涵
混音：嫣子音乐工作室
制作人：老诚、蓝小龙
监制：Andy毛毛、李菓
发行公司：宏燊文化
LRC编辑：醉美水芙蓉
情丝犹如落叶飘
古道西风花稀少
茫茫人海在寻找
那份情缘的美妙
倾城容颜转身笑
只见城外人缥缈
无情失落心一颗
情缘转身去漂泊
我等春风再吹过
但愿吹开花万朵
相遇燃起心之火
温暖心扉不寂寞
我等春风再吹过
但愿相遇爱情河
岁月饶过情爱歌
走过人间最快乐
情丝犹如落叶飘
古道西风花稀少
茫茫人海在寻找
那份情缘的美妙
倾城容颜转身笑
只见城外人缥缈
无情失落心一颗
情缘转身去漂泊
我等春风再吹过
但愿吹开花万朵
相遇燃起心之火
温暖心扉不寂寞
我等春风再吹过
但愿相遇爱情河
岁月饶过情爱歌
走过人间最快乐
我等春风再吹过
但愿吹开花万朵
相遇燃起心之火
温暖心扉不寂寞
我等春风再吹过
但愿相遇爱情河
岁月饶过情爱歌
走过人间最快乐
谢谢欣赏！`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts = getLrcObj(parts);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
var min = +timeParts;
seconds = min * 60 + seconds;
var words = twoParts;
return{
seconds: seconds,
words: words,
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray.words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 70, lrc_ul_height = 60;
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {top = 0;}$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("aud").ontimeupdate = setPosition;
</script>
这个作品漂亮！！！！ 这个作品漂亮！！！！ 这个作品漂亮！！！！ 这个作品漂亮！！！！ 这个作品漂亮！！！！ 这个作品漂亮！！！！ 这个作品漂亮！！！！ 这个作品漂亮！！！！ 这个作品漂亮！！！！
页:
[1]
2